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

This article mainly introduces Ajax how to achieve asynchronous interaction, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Using ajax to implement asynchronous interaction is nothing more than 4 steps:

1. Create an ajax core object

two。 Establish a connection with the server

3. Send a request to the server

4. Receive data from the server response

The seemingly mysterious asynchronous interaction, after defining these four steps, may have a preliminary idea in everyone's mind.

First of all, we create the core object of ajax. Because of the compatibility problem of the browser, we should not consider the compatibility problem when creating the ajax core object, because the later steps to achieve asynchronous interaction are based on the success of the first step in creating the ajax core object.

Function getXhr () {/ / declare XMLHttpRequest object var xhr = null;// create if (window.XMLHttpRequest) {/ / represent browsers other than IE xhr = new XMLHttpRequest ();} else {/ / represent IE browser xhr = new ActiveXObject ('Microsoft.XMLHttp');} return xhr;} / create core object var xhr = getXhr ()

Through the above code, we have successfully created the ajax core object, we saved it in the variable xhr, and all the ajax core objects mentioned next will be replaced by xhr.

The second step is to establish a connection with the server and call the open (method,url,async) method through the ajax core object.

Formal parameter interpretation of open method:

Method indicates the request method (get or post)

Url represents the address of the requested php (note that when the request type is get, the requested data will be followed by the url address with a question mark, and the null value will be passed in the following send method)

Async is a Boolean value indicating whether it is asynchronous or not. The default is true. This item no longer needs to be filled in in the latest specification, because officials believe that ajax is used for asynchronism.

Xhr.open ("get", "01.php?user=xianfeng"); / / this is the get request data xhr.open ("post", "01.php"); / / this is the request for data in post mode

In the third step, we will send a request to the server and call the send method using the ajax core object

If it is in post mode, the requested data will be sent to the server in the form of name=value in the send method, and the null value will be passed in directly in get mode

Xhr.send ("user=xianfeng"); / / this is to send the request data xhr.send (null) in post mode; / / this is in get mode

The fourth step is to receive the data from the server and use onreadystatechange events to monitor the communication status of the server. Get the current communication status of the server through the readyState property. Status gets the status code, and uses the responseText attribute to receive the data returned by the server (here, string format data of text type). Then write the data in XML format and the famous json format data.

Xhr.onreadystatechange = function () {/ / ensure that the server-side response data is sent, and that the request must be a successful if (xhr.readyState = = 4&&xhr.status = = 200) {/ / receive the server-side data var data = xhr.responseText; / / Test console.log (data) }}

Ps:Ajax simple asynchronous interaction

The simple asynchronous interaction of ajax can start with get.

So to create an asynchronous request between Ajax and server, you need to complete three

Step 1. Creation of XMLHttpRequest object

If (window.XMLHttpRequest) {/ / for IE7 or above and standard browsers var xhr=new XMLHttoRequest ();} else if (window.ActiveXObject) {var xhr=new ActiveXObject ("Microsoft.XMLHTTP");}

Step 2. Register the callback function

Xhr.onreadystatechange=callback; or xhr.onreadystatechange=function () {/ / codes here}

Step 3. Set connection information

Xhr.open ("GET", url,true) / / where true is represented as asynchronous interaction

Step 4. Send data

Xhr.send (null)

Thank you for reading this article carefully. I hope the article "how to achieve asynchronous interaction in Ajax" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.