Ajax journey (iii) -- asynchronous update

In the previous blog, I have already explained in theory what is the XMLHTTPRequest object, which is the core object for Ajax asynchronous update. Next, we will use an instance to understand how to use the XMLHTTPRequest object orAsynchronous update Implementation.

Instance: judge whether the user code is repeated

Solution 1: Synchronize updates.Shows the principle:

We can see that when we enter "User code" in the browser user code input box, we can only wait for the response from the server,After the server returns the result to the browser, we can perform the next operation.That is, enter the "user name ".

This is a synchronous update, which will inevitably give the user a few seconds of waiting time. Maybe there is nothing in an input box. If you enter something every time, you have to wait for a few seconds, even a second, are there any other users willing to continue using our website? So asynchronous and new.

Solution 2: asynchronous update, As shown in the following figure:

We can see that it is significantly different from synchronous update. In asynchronous updates, we use the Ajax engine, which seems to be,Adding an intermediate layer (Ajax engine) to the browser and Server).

In this way, after entering the "user code", the browser sends the request to the Ajax engine, and then you can continue entering the "user name,No longer waiting. The Ajax engine then sends the request to the server. After the server operation is complete, return the result to the Ajax engine. The Ajax engine then returns the result to the browser for display. In short,The browser only needs to send the request to Ajax, and then what to do and what to do. When the Ajax engine is updated, the callback function is used to return the request to the browser. This is asynchronous update.

Through solution 1, we obviously know the advantages of solution 2. How can we implement it in code, the following are some code implementations that I use to determine whether the user code is repeated for your reference. Of course, these implementations are also used to give readers a deep understanding of the use of XMLHttpRequest objects.

Step 1: Create the core Ajax object XMLHttpRequest.

Here, we need to make different instantiation results for different browsers.

<Span style = "font-size: 18px;"> var XMLHTTP; function createxmlhttprequest () {// indicates that the current browser is not ie If (window. XMLHttpRequest) {XMLHTTP = newxmlhttprequest ();} else if (window. activexobject) {XMLHTTP = newactivexobject ("Microsoft. XMLHTTP ") ;}}</span>

Step 2: register the callback function.

The callback function is the core method for implementing asynchronous update of the XMLHTTPRequest object. After a request is sent, the client cannot determine when the request will be completed. Therefore, an event mechanism is required to capture the Request status. The XMLHTTPRequest object provides the onreadystatechange event to implement this function, that is, the callback function.

In other words:The callback is called by the server instead of by you.(This is called by the Ajax engine .)

<Span style = "font-size: 18px;"> <span style = "font-size: 14px;"> // registers the callback function XMLHTTP. onreadystatechange = callback; </span>

Note the following:

<Span style = "font-size: 18px;"> XMLHTTP. onreadystatechange = callback (); // indicates the method to call XMLHTTP. onreadystatechange = callback; // indicates passing the method address </span>

Step 3: Set the interaction mode and corresponding parameters with the server.

The code implementation varies according to different submission methods. The Implementation below is the code submitted by get. There is also a parameter, XMLHTTP. Open ("get", URL,True), True indicates asynchronous submission, and false indicates synchronous submission,To Implement Asynchronous update, set this parameter to true..

<Span style = "font-size: 18px;"> // Step 3: Set the interaction mode with the server and the corresponding parameter varurl = "user_validate.jsp? Userid = "+ trim (filed. Value) +" & time = "+ new date (). gettime () </span>

<span style="font-size:18px;">        xmlHttp.open("GET", url, true);</span>

Step 4: send data to the server.

After the preceding settings are complete, we only need to send data to the server.

<Span style = "font-size: 18px;"> // Step 4: send data to the server XMLHTTP. send (null);} else {document. getelementbyid ("spanuserid "). innerhtml = "" ;}</span>

Step 5: Use the callback function to determine whether the interaction with the server is complete, whether the response is correct, and update the page content based on the data returned by the server.

<Span style = "font-size: 18px;"> // Step 5: Determine whether the interaction with the server has completed functioncallback () {If (XMLHTTP. readystate = 4) {If (XMLHTTP. status = 200) {If (TRIM (XMLHTTP. responsetext )! = "") {// Alert (XMLHTTP. responsetext); document. getelementbyid ("spanuserid "). innerhtml = "<fontcolor = 'red'>" + XMLHTTP. responsetext + "</font>"} else {document. getelementbyid ("spanuserid "). innerhtml = "" ;}} else {alert ("request failed. Error Code: "+ XMLHTTP. Status) ;}}</span>

Note:

<Span style = "font-size: 18px;"> Ajax. readystate = 4 // a response is returned. Whether it is correct or not; Ajax engine status is successful Ajax. Status = 200 // HTTP protocol status is successful </span>

After five steps, we can determine whether the user code has repeated asynchronous updates. I don't know how much you know about Ajax, XMLHttpRequest objects, and asynchronous updates?