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

1. What is Ajax?

Ajax, English name Asynchronous JavaScript and XML, that is, asynchronous JavaScript and XML. It is not a new language, but a new way to use existing standards to exchange data with the server and update part of the web content without reloading the entire page, and does not require any browser plug-ins, just the user to allow JavaScript to execute on the browser.

2. The working principle of Ajax

From the figure above, we can see that the browser first creates a XMLHttpRequest object, and then sends it to the server; the server responds and encapsulates some data back to the browser; and the browser receives the response data from the server and makes corresponding actions according to the data, such as updating the content of the page.

3. How to use Ajax?

①, create XMLHttpRequest object

②, write state response function

③, call the open () method

④, send request send ()

Let's use a simple example to simulate updating the content on the page through Ajax.

Step 1: create a new AjaxTest.html file first

123456789101112 Title / / the AjaxTest.js file / / defines the click event Ajax ()

The effect of the page is as follows:

Step 2: create a new formInfo.json file to store the contents to be updated

1234 {"name": "ys", "age": 24}

Step 3: create a new AjaxTest.js file and write Ajax code

1234567891011121314151617181920212223242526272829303132333435function Ajax () {var xhr= null; if (window.XMLHttpRequest) {/ / IE7+, Firefox, Chrome, Opera, Safari browser executes code xhr=new XMLHttpRequest ();} else {/ / IE6, IE5 browser executes code xhr=new ActiveXObject ("Microsoft.XMLHTTP");} xhr.onreadystatechange = function () {if (xhr.readyState==0 & & xhr.status==200) {alert ("request not initialized") } if (xhr.readyState==1 & & xhr.status==200) {alert ("Server connection established");} if (xhr.readyState==2 & & xhr.status==200) {alert ("request received");} if (xhr.readyState==3 & & xhr.status==200) {alert ("request processing");} if (xhr.readyState==4 & & xhr.status==200) {alert ("request completed and response ready"); document.getElementById ("mydiv") [xss_clean] = xhr.responseText }} xhr.open ("GET", ".. / json/fromInfo.json", true); xhr.send ();}

When we click the button, the interface updates to:

4. The analysis of each step of Ajax

①, create XMLHttpRequest object

In general, all modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have built-in XMLHttpRequest objects. So you can create a XMLHttpRequest object like this directly

1var xhr=new XMLHttpRequest ()

However, older versions of Internet Explorer (IE5 and IE6) use ActiveX objects and do not support XMLHttpRequest objects. So here's what we create:

1var xhr=new ActiveXObject ("Microsoft.XMLHTTP")

So to sum up, the method to create a XMLHttpRequest object is:

12345678var xhr= null; if (window.XMLHttpRequest) {/ / IE7+, Firefox, Chrome, Opera, Safari browser executes code xhr=new XMLHttpRequest ();} else {/ / IE6, IE5 browser executes code xhr=new ActiveXObject ("Microsoft.XMLHTTP");}

The properties of the object are:

In the above example, we can see that the XMLHttpRequest object is:

②, write state response function

The state response function is the onreadystatechange event

Common status response status codes:

③, call the open () method

Open (string method,string url,boolean asynch,String username,string password)

Specify the HTTP method, URL address, or other request information that interacts with the server

Method: indicates the http request method, usually using "GET" and "POST".

Url: indicates the address of the requested server

Asynch: indicates whether to use asynchronous method. True is asynchronous and false is synchronous.

The last two can be unspecified. Username and password represent the user name and password, respectively, providing the user name and password required by the http authentication mechanism.

④, send request send ()

Send (content)

Make a request to the server, and if it is asynchronous, the method returns immediately. Content can be specified as null to indicate that no data is sent, and its content can be a DOM object, an input stream, or a string.

In actual development, there are many open source libraries that have been packaged for us, so we can just use them.

1. Ajax request of jQuery:

1234567891011121314151617181920212223242526 $.ajax ({type: "post", / / request method url: ".. / json/fromInfo.json", / / request path data: "", / / data transferred to the server cache: false, / / whether there is cache async: false, / / synchronous and asynchronous, false indicates asynchronous dataType: "json", / / expected server response data type beforeSend:function (xhr) {alert (xhr); alert ('before sending') }, success:function (data,textStatus,jqXHR) {alert (data); / / the data in the json file is an object object alert (textStatus); / / the value is success, indicating the success status code alert (jqXHR); / / the third parameter encapsulates some information of the response document.getElementById ("mydiv") [xss_clean] = jqXHR.responseText;}, error:function (xhr,textStatus) {alert ('error'); alert (xhr); alert (textStatus) }, complete:function () {alert ('end');}})

Parsing the corresponding parameters above:

2. Get request of jQuery

$.get (url,data,success (response,status,xhr), dataType)

Note: url is the request address, data is the list of request data, callback is the callback function after the request is successful, and dataType returns the data type for the server. The fourth parameter, dataType, returns a string by default if it is not written.

12345678 $.get (".. / json/fromInfo.json", ", function (response,status,xhr) {alert (xhr.responseText);}," json ")

3. Post request of jQuery

$.post (url,data,success (response,status,xhr), dataType)

Parameters are the same as get request

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.