Ajax practices for users

I have a preliminary understanding of the basic knowledge of Ajax in my previous studies, but it is not practical. Then let's test the truth through practice!

Basics: http://blog.csdn.net/liu_yujie2011com/article/details/29812777

So let's take a look at the problem that AJAX is used to solve? The answer is simple: Solve the Problem of synchronization and Asynchronization, so as to improve the interface friendliness and enhance the user experience. Let's try it out with the instance "determining whether a user exists when adding a user.

I. input code in HTML

<tdwidth="78%"><inputname="userId" type="text" class="text1"id="userId"size="10"maxlength="10" onkeypress="userIdOnKeyPress()"value="<%=userId%>" onblur="validate(this)"><spanid="spanUserId"></span></td>

Ii. jsp interface code

<% @ Pagelanguage = "Java" contenttype = "text/html; charset = gb18030" pageencoding = "gb18030" %> <% @ pageimport = "com. bjpowernode. DRP. sysmgr. manager. * "%> <% stringuserid = request. getparameter ("userid"); If (usermanager. getinstance (). finduserbyid (userid )! = NULL) {out. println ("User code already exists") ;}%>

Iii. JavaScript code

(1) Create an Ajax engine object XMLHttpRequest

VaR XMLHTTP; functioncreatexmlhttprequest () {// indicates that the current browser is not IE, such as NS, firefoxif (window. XMLHttpRequest) {XMLHTTP = new XMLHttpRequest ();} else if (window. activexobject) {XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");}}

(2) Call the open method to establish a connection with the Ajax engine and tell the Ajax engine that our request method is get, request URL and asynchronous

Functionvalidate (field) {// alert (document. getelementbyid ("userid "). value); // alert (field. value); If (TRIM (document. getelementbyid ("userid "). value ). length! = 0) {// create the Ajax core object xmlhttprequestcreatexmlhttprequest (); // The cache solution, in milliseconds varurl = "user_validate.jsp? Userid = "+ trim (document. getelementbyid ("userid "). value) + "& time =" + new date (). gettime (); // set the request method to get, set the request URL, and set the asynchronous submission of XMLHTTP. open ("get", URL, true); // copy the method address to the onreadystatechange property // similar to the phone number XMLHTTP. onreadystatechange = callback; // sends the set information to the Ajax engine XMLHTTP. send (null);} else {document. getelementbyid ("spanuserid "). innerhtml = "";}}

(3) Tell the Ajax engine to specify a method handle after processing, so that Ajax will call the method we specify to obtain the data returned by the Ajax engine (callback mechanism ). The method is as follows:

Function callback () {// Ajax engine status is successful if (XMLHTTP. readystate = 4) {// the HTTP protocol status is successful if (XMLHTTP. status = 200) {// alert ("request successful! ") // If it is null, remove the red span from the IF (TRIM (XMLHTTP. responsetext )! = "") {Document. getelementbyid ("spanuserid "). innerhtml = "<font color = 'red'>" + XMLHTTP. responsetext + "</font>"} else {document. getelementbyid ("spanuserid "). innerhtml = "" ;}} else {alert ("request failed, error code =" + XMLHTTP. status );}}}

(4) Call the send method to send the parameters set in the preceding steps to the Ajax engine for processing. This refers to "XMLHTTP. Send (null)" in step 2 )"

4. Note

The above is a simple implementation of Ajax, but pay attention to the following points:

(1) To use Ajax technology, you need to clear the cache; otherwise, an inexplicable error may occur. There are two methods:

1. Use the URL followed by the timestamp (a random number is generated) to prevent browser caching, such:

// The cache solution, in milliseconds

varurl="user_validate.jsp?userId=" +trim(document.getElementById("userId").value)+ "&time="+new Date().getTime();

2. Add the clear cache code, such:

header("Cache-Control:no-cache, must-revalidate"); xmlHttp.setRequestHeader("If-Modified-Since","0"); xmlHttp.setRequestHeader("Cache-Control","no-cache");

(2) If you need to initiate multiple requests, you need to create multiple XMLHttpRequest objects.

V. Summary

Through the above steps, you have basically understood the basic process of Ajax practice. Next, you need to use the anonymous function in JS to determine the codes that exist in the user. Let's look forward to the next article!

 

 

 

Ajax practices for users