Easily understand the Ajax of JavaScript

AJAX technology is one of the necessary skills built by web pages. This article hopes to help everyone learn this technology

What is AJAX?

AJAX (asynchronous JavaScript XML) can refresh local web pages instead of reloading the entire web page.

Create XMLHttpRequest object

Create an XMLHttpRequest object, XMLHttpRequest object Come with the server exchange data.


Step 2: Register the callback function

OnReadyStateChange function, when the server After requesting and returning data, we want the client to handle this data, you need to use the OnReadyStateChange function, and the ReadyStateChange function is triggered each time the XMLHttpRequest object. For ReadyState, you will be described in detail in the next chapter.

XMLHTTP.ONREADYSTATANGE = Callback; function callback () {}

 Step 3: Configuration And Send Request   Use the open () and send () methods of the XMLHttpRequest object to configure and send resource requests to the server. 
XMLHTTP.Open (Method, URL, ASYNC) Method included GET and POST, URLIf the path of the file or resource, the async parameter is true (representative asynchronous) or false

XMLHttp.send (); use the GET method to send a request to the server. Xmlhttp.send (String); Send a request to the server using the POST method.

POST form data requires an HTTP header to add an HTTP header using the SetRequestHeader method for the XMLHTTPRequest object.

When is POST send request?

(1) When updating a file or database.

(2) Send a large amount of data to the server because the POST request has no character limit.

(3) Send the encrypted data input by the user.

XHTTP.Open (“POST”, “Ajax_Test.aspx”, true); XHTTP.SetRequestHeader (“Content-Type”, “Application / X-WWW-Form -urlencoded “);

Step 4: Processing Response Data

The response of the server using the ResponseText or ResponseXML property of the XMLHttpRequest object.

Use the ResponseText property to get the string data of the server response, use the Responsexml property to get the XML data of the server response.
Using ReadyState == 4 and Status == 200 in the callback function to determine whether the interaction ends, whether the response is correct, and obtain the data returned by the server side, update the page content.
Function Callback () {if (XMLHTTP.ReadyState == 4) {// Judgment the interaction Success IF (XMLHTTP.Status == 200) {// Get the data returned by the server /// Get plain text data var responsext = Xmlhttp.ResponseText; document.getlementByid (“info”). Innerhtml = responsext;}}}

Third, AJAX operation process In 5 states

In the actual operation of AJAX, it is not completed for accessing XMLHttpRequest (XHR), but has experienced a variety of states, for this There are five states in Ajax, and these five states are set by the AJAX engine switch, respectively.

0: Defined XHR, but not initialized

1: Call the send () method, is sending a request, after the request is sent, start waiting for the reception response
 2 : Response reception completion   3: Pravings Response content 
4: Response content parsing is complete, return to the client call

for the above state, where “0” state It is automatically have a status value after defining, and most of the status of successful access (information) we use “4” to determine. It is worth noting that every switch is switched once, it will trigger an OnReadyStateChange event, so the entire process onreadystatechange event is triggered 5 times

Fourth, Ajax’s advantages and disadvantages


1, the biggest point is that the page is free, communicating with the server in the page, does not need to interrupt the user’s operation, have a more prominent response ability to give the user experience very well.

2, mitigation of the burden of the server, the principle of Ajax is “Data on Data” to minimize redundant requests, and the burden on the server.


1, AJAX droves the BACK button, that is, the destruction of the browser back-to-back mechanism.

2, the support of search engines is relatively weak.

The above is all the contents of this article, and it is hoped that the content of this article will bring certain help to everyone’s learning or work, and I hope to support Tumi cloud!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment