Shulou(Shulou.com)06/01 Report--

This article mainly explains "Ajax to achieve asynchronous web page update method", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "Ajax web page asynchronous update method" bar!

The concept of 1:ajax

Full name: AsynchronousJavascriptAndXml

AJAX is not a new programming language, but a technology for creating faster, better and more interactive WEB applications, which was used around 1998. Through AJAX, your JS can communicate directly with the server without reloading the page through the XMLHttpRequest object of JS. This allows you to request the desired data on the server instead of the entire page. The core of AJAX is the XMLHttpRequest object of JS. The xhr object, first introduced in IE5, is an object that supports asynchronous requests.

Advantages of 2:ajax

Update data without refreshing.

Communicate with the server asynchronously.

Based on standards is widely supported.

The front end is separated from the back end.

Save bandwidth.

3: write steps

1. Create a XMLHttpRequest object.

All modern browsers (IE7+,chrome,firefox,opera,safari) have built-in XMLHttpRequest objects. But IE5, 6 uses the ActiveXObject object.

FunctiongetAjax () {

Varxmlhttp=null

If (window.ActiveXObject) {

Xmlhttp=newActiveXObject ('Microsoft.XMLHTTP')

} elseif (window.XMLHttpRequest) {

Xmlhttp=newXMLHttpRequest ()

}

Returnxmlhttp

}

two。 Open the connection to Server and specify the sending method, URL, permissions, etc.

Open method: create a new HTTP request and specify the method, URL, and authentication information for this request.

Xhr.open (type,url,async,user,password)

Type:HTTP request method, such as GET, POST, etc. Case insensitive.

Url: request address.

Async: Boolean, whether the request is asynchronous. The default is true. If true, the callback function specified by the onreadystatechange property is called when the state changes. (optional)

User: if the server needs authentication, specify the user name here. If not, the authentication window will pop up when the server needs authentication. (use less and only know)

Password: the password part of the authentication information. If the username is empty, this value will be ignored. (use less and only know)

Note:

In AJAX, we are actually here to simulate normal form submission data. A normal form sends a Content-Type field when POST data, so we specify the field value as application/x-www-form-urlencoded in AJAX. And the field name and value are encoded before being sent. Use setRequestHeader: specify one of the HTTP headers of the request separately.

Note: the data should be encoded using the encocdeURIComponent () function.

3. Send instructions.

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

The synchronous or asynchronous manner of this method depends on the async parameter in the open method. If async is true, this method will return immediately, and if false, this method will wait for the request to complete or time out before returning.

Xhr.send (body)

Body: the data sent through this request. The GET request can be set to null.

4. Wait for and receive the processing results returned by the server.

5. Received by the client.

6. Release the XMLHttpRequest object.

4: callback function

Specify the event handling callback function when the readystate property changes through the onreadystatechange property.

Xhr.onreadystatechange=function () {}

ReadyState property: returns the current status of the request.

Status:

0: the object has been created and has not been initialized (the open method has not been called).

1: the object has been created and the send method has not been called.

The 2:send method has been called. But the current status and HTTP status are unknown.

3: start to receive data, because the response and HTTP headers are incomplete, there will be an error in obtaining some data through responseBody and responseText.

4: after the data has been received, you can obtain the complete response data through responseBody and responseText.

Status property: returns the status code of the current request.

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

304NotModified: have a local cached copy, and the server-side content is the same.

403Forbidden: the requestor does not have the appropriate permissions on the requested document.

404NotFound: the requested document was not found.

StatusText property: returns the response line information for the current request.

ResponseXML property: returns the response information formatted as a XMLDocument object.

ResponseText property: returns the response information as a string.

Parsing JSON by 5:JS

Introduction to JSON: (mentioned in the js article)

Definition: JavascriptObjectNotation, a lightweight text-based data exchange format, easy for people to read and write, but also can improve the network transmission rate.

There are two new methods for ES5:

JSON.parse: converts JSON string data to a JSON object.

JSON.stringify: converts a JSON object to a JSON string.

Note: 1. Browser support: IE8+.

2. Key or string value in JSON format must be wrapped in double quotation marks.

6: local data refresh

Manipulate the corresponding DOM node (such as the paging effect of the comment list)

7: application of event delegation

Event delegation: using the bubbling mechanism, the child element event is delegated to the parent element for execution (for example, some news websites remove news that some users do not like)

8: separation of front and rear ends

The background is only responsible for data output and business logic processing, while the front end is responsible for interactive logic and interface display. To put it simply: there is no background program code in the front-end static page, and the background outputs data without HTML tags.

The front and back ends separate and rely on ajax to realize the interaction of data.

Thank you for your reading, the above is the content of "Ajax to achieve web page asynchronous update method", after the study of this article, I believe you have a deeper understanding of the method of Ajax web page asynchronous update, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.