In-depth understanding of Ajax principles

1. Concept

The full name of AJAX is asynchronousjavascript and XML. Asynchronous is asynchronous, which is different from the synchronous method used in traditional web development.

2. Understand synchronous and asynchronous

Asynchronous transmission is character-oriented transmission. Its unit is character, while synchronous transmission is bit-oriented transmission. Its unit is bytes, it requires that the receiver and the sender's clock be consistent during transmission.

For example, synchronous and asynchronous means that we make one-time payment for the building, while asynchronous means the installment payment for the building. So when we move the conceptual interpretation of this kind of life to understanding Ajax Asynchronization, we find that it is through this Asynchronous Method to make users more profitable, that is to say, users can have better experience. In fact, this is also the significance of Ajax.

 

3. Analyze XMLHttpRequest to understand Ajax principles

The principle of AJAX is simply to use the XMLHTTPRequest object to send asynchronous requests to the server, obtain data from the server, and then use JavaScript to operate the Dom to update the page. The most critical step is to obtain request data from the server. To understand the process and principles, we must understand XMLHttpRequest.

 

XMLHttpRequest is the core mechanism of Ajax and a technology supporting asynchronous requests. Simply put, JavaScript can promptly request and process responses to the server without blocking users. Achieve the effect of refreshing.

Therefore, to understand Ajax principles, we must first understand how XMLHttpRequest works.

First, let's take a look at the attributes of the XMLHTTPRequest object.

Based on the above understanding of the XMLHTTPRequest object, let's look at its working principle through an example:

This is an example of Ajax that verifies whether the input tag is null:

Function validate (field) {<br/> If (TRIM (field. Value). length! = 0) {<br/> var XMLHTTP = NULL; <br/> // indicates that the current browser is not IE, such as NS, Firefox <br/> If (window. XMLHttpRequest) {<br/> XMLHTTP = new XMLHttpRequest (); <br/>} else if (window. activexobject) {<br/> XMLHTTP = new activexobject ("Microsoft. XMLHTTP "); <br/>}< br/> var url =" user_validate.jsp? Userid = "+ trim (field. value) + "& time =" + new date (). gettime (); </P> <p> // set the request method to get, set the request URL, and set it to asynchronous submission <br/> XMLHTTP. open ("get", URL, true ); </P> <p> // copy the method address to the onreadystatechange attribute <br/> // similar to a telephone number <br/> XMLHTTP. onreadystatechange = function () {<br/> // Ajax engine status is successful <br/> If (XMLHTTP. readystate = 4) {<br/> // the HTTP protocol status is successful <br/> If (XMLHTTP. status = 200) {<br/> If (TRIM (XMLHTTP. responsetext )! = "") {<Br/> // alert (XMLHTTP. responsetext); <br/> document. getelementbyid ("spanuserid "). innerhtml = "<font color = 'red'>" + XMLHTTP. responsetext + "</font>" <br/>} else {<br/> document. getelementbyid ("spanuserid "). innerhtml = ""; <br/>}< br/>} else {<br/> alert ("request failed, error code =" + XMLHTTP. status); <br/>}</P> <p >}; </P> <p> // send the settings to the Ajax engine. <br/> XMLHTTP. send (null); <br/>}else {<br/> document. getelementbyid ("spanuserid "). innerhtml = ""; <br/>}< br/>

First, create an XMLHTTPRequest object, and then check the overall status of XMLHttpRequest by using the javaspcript method and ensure that it is complete (readystatus = 4). That is, the data has been sent. Then, query the Request status based on the server settings. If everything is ready (status = 200), perform the following operations.

 

For the XMLHttpRequest methods, open and send, the open method specifies:

A. Type of data submitted to the server, that is, post or get.

B. request URL and transmitted parameters.

C. Transmission Mode. If the value is false, synchronization is performed. If the value is true, asynchronous transmission is performed. The default value is true. If it is an asynchronous communication method (true), the client will not wait for the server to respond; if it is a synchronous mode (false), the client will wait until the server returns a message before executing other operations.

Call the send method to send the request.

 

In this example, we can see that AJAX basically places JavaScript and XMLHttpRequest objects between web forms and servers. When a user sends a request to the server, the data is sent to some JavaScript code rather than directly to the server. The javascript code sends an asynchronous request behind the scenes, and the server returns the data to the JavaScript code, which determines how to process the data, which can quickly update the form data. This is the principle of Ajax.

4. Use graphs to understand Ajax principles