How to achieve web page asynchronous update

Xiaobian to share the Ajax how to achieve the web page asynchronous update, I hope everyone will read this article, let us discuss it!

1: AJAX concept

full name: Asynchronous JavaScript and XML

Ajax is not a new programming language, but a more better and better and A more interactive web application technology, which has been applied in 98 years. With AJAX, your JS can communicate directly with the server with the server with the server’s XMLHttpRequest object. This can request the desired data in the server instead of the entire page. The core of Ajax is the XMLHttpRequest object of JS. The XHR object is introduced first in IE5, which is an object that supports asynchronous requests.

2: Advantages of AJAX

Non-refresh update data.

Asynchronous and server communication.

Based on standards are widely supported.

The front end is separated from the rear end.

Save bandwidth.

3: Writing step

1. Create an XMLHttpRequest object.

All modern browsers (IE7 +, Chrome, Firefox, Opera, Safari) build XMLHttpRequest objects. But IE5, 6 uses ActiveXObject objects.

function getAjax () {var xmlhttp = null; if (window.ActiveXObject) {xmlhttp = new ActiveXObject ( ‘Microsoft.XMLHTTP’);} else if (window.XMLHttpRequest) { Xmlhttp = new xmlhttprequesT ();} return xmlhttp;}

 2. Open the connection with the Server, specify the transmission method, URL, and permission.  Open method: Create a new HTTP request and specify the method, URL, and verification information for this request.  XHr.Open (Type, URL, Async, User, Password); 
TYPE: HTTP request mode, GET, POST, etc. Size is not sensitive.

URL: Request address.

Async: Boolean, request is asynchronous. The default is True. If true, the callback function specified by the OnReadyStateChange property is called when the status changes. (Optional)

User: If the server needs to be verified, specify the username here, if not specified, when the server needs to verify, the verification window will pop up. (Less only)

Password: Verify the password portion in the information, if the user is named, this value will be ignored. (Less only)


In Ajax, in fact, we are to simulate normal form submission data. When the normal form is in Post data, the Content-Type field is sent, so we have to specify this field value as Application / X-WWW-FORM-URLENCODED in AJAX. And the field name and value are encoded during transmission. Use SetRequestHeader: Separate an HTTP header requested separately.

Note: Data should be encoded using the eNCOCDEURIMPONENT () function.

3. Send instructions.

Send (): Send a request to the HTTP server and receives a response.

The synchronization or asynchronous mode of this method depends on the async parameter in the open method. If async is TRUE, this method will return immediately, if false, this method will waitThe request will not be returned when the request is completed.

xhr.send (body);

Body: The data sent by this request. The GET request is set to NULL.

4. Waiting and receive the processing result returned by the server.

5. Client Receive.

6. Release the XMLHttpRequest object.

4: The callback function

Specifies the event processing callback function when the ReadyState property changes via the OnReadyStateChange property.

xhr.onreadyStateChange = function () {}

ReadyState property: Returns the current state of the request.


0: The object has been established, has not been initialized (not adjusted).

1: The object has been established, and the send method has not been called.

2: The Send method has been called. But the current state and the HTTP state is unknown.

3: Start receiving data, because the response and the HTTP header are not full, then obtaining part of the data through ResponseBody and ResponseText will have an error.

4: The data is received, and complete response data can be obtained via ResponseBody and ResponseText.

Status Properties: Returns the status code of the currently requested.

200 OK: The request document has been found and returned correctly.

304 Not Modified: Have a local cache copy, the server-side content is the same.

403 Forbidden: The requester does not have corresponding permissions to the requested document.

404 NOT Found: The requested document is not found.

STATUSTEXT attribute: Returns the response line information of the current request.

RESponsexml property: Format the response information to the XML Document object returns.

ResponseText property: Return the response information as a string.

5: JS Analysis JSON

JSON Introduction: (mentioned in the JS article)

Definition: JavaScript Object Notation, a lightweight-based text-based data Exchange format, easy to read and write, and improve network transmission rates.

Two methods of ES5:

JSON.PARSE: Convert JSON string data to JSON objects.

JSON.STRINGY: Converts JSON objects to JSON strings.

Note: 1. Browser support: IE8 +.

2, the KEY or string type VALUE in the string of JSON format must be parked with a double quotation number.

6: Local data brush

Operate the corresponding DOM node (such as the page effect of the list of comments)

7: Application of Event Entrusted

Event commission : Use the bubbling mechanism to entrust the child elements to the parent element (for example, some news sites have news that the website is not good)

8: Front-rear end separation

Background only data Output and business logic processing, front-end responsible for interactive logic and interface display. Simply put: there is no background program code in the front-end static page, and the background output does not have an HTML tag.

The front and rear ends are separated by AJAX to implement data interaction. (Function dispensing achieves specific separation, Demo is given)

After reading this article, I believe that you have a certain understanding of how Ajax is asynchronous update, want to know more related knowledge, welcome attention Tumi Yun Industry Information Channel, thank you for reading!

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

Please log in to comment