We've introduced Ajax technology, and we know how to use XMLHttpRequest objects, and now we're going to combine them. What are the scenarios where Ajax technology needs to be applied? Of course, Ajax's potential is almost limitless, and the use of Ajax can be an endless stream of inspiration. This chapter will show some examples in which the use of AJAX technology can make applications go by leaps and bounds. Some cases are at a glance, others are not. However, the more experience you have in AJAX applications, the more you will find your way to improve your application. Most of these examples use the Java servlet as a server-side component, but each example can easily be written using. NET, Ruby, Perl, PHP, or any other server-side technology.
4.1 Complete Verification
There is a wise word about usability, that is, to prevent the occurrence of errors. But if there is a real mistake, you need to notify the user at the first time. Before Ajax, web-based applications had to submit an entire page to validate data, or to rely on complex JavaScript to check the form. Although some of the checks are really simple and can be written using JavaScript, other checks are not entirely possible with JavaScript authoring. Of course, every validation routine that is written on the client must be overridden in some way on the server because it is possible for the user to disable JavaScript.
With Ajax, you no longer have to be limited to writing simple client-side validation and repetitive logic. Now, if you want to provide users with a more interactive experience, you can simply invoke the validation routines written for the server. In most cases, this logic is simpler to write, is easier to test, and is fully accessible through existing frameworks.
Some people ask where Ajax should be started in applications, and we generally recommend starting with validation. You'll probably want to get rid of some JavaScript, and you can easily add some existing server-side logic. This section describes an example, which is one of the most common validations: Date validation.
The HTML for this example is very simple (see Code Listing 4-1). There is a standard input box, the corresponding onchange () event (of course, you can use any event you think fit) triggers the validation method. You can see that you want to invoke the standard Createxmlhttprequest () method and then send the input value to the Validationservlet servlet. The callback () function obtains results from the server and then delegates to the Setmessage () method, which checks the value to determine what color the message is displayed in.
Code Listings 4-1 validation.html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>using Ajax for Validation</title>
<script type= "Text/javascript" >
var xmlHttp;
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
function Validate () {
Createxmlhttprequest ();
var date = document.getElementById ("birthdate");
var url = "validationservlet?birthdate=" + Escape (Date.Value);
Xmlhttp.open ("Get", url, True);
Xmlhttp.onreadystatechange = callback;
Xmlhttp.send (NULL);
}
function callback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
var mes =
Xmlhttp.responsexml
. getElementsByTagName ("message") [0].firstchild.data;
var val =
Xmlhttp.responsexml
. getElementsByTagName ("passed") [0].firstchild.data;
Setmessage (Mes, Val);
}
}
}
function setmessage (message, isValid) {
var Messagearea = document.getElementById ("Datemessage");
var fontcolor = "Red";
if (IsValid = = "true") {
FontColor = "green";
}
messagearea.innerhtml = "<font color=" + fontcolor + ">"
+ Message + "</font>";
}
</script>
<body>
Birth date: <input type= "text" size= "id=" Birthdate "onchange=" validate (); " />
<div id= "Datemessage" ></div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
