How do you create Ajax? Detailed steps to create AJAX (with instance parsing)

This article focuses on how to create an AJAX case for yourself, so let's take a look at this article.

Learning Ajax for some time, now to summarize the construction and function of Ajax.

the use of Ajax is to request data back, which is characterized by the asynchronous request of data (no flush read data), before Ajax appears, if you fill out a project more than a form for the user is a nightmare, if the middle of which link is wrong, Then in the final submission of the error, then the need to re-fill, after several times to fill the user lost the desire to fill out. And then after the advent of Ajax, this problem has been well solved, each project will be completed by the server to verify the results and return the results, to a certain extent, improve efficiency, and give users a better experience. (want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

Now to explain the use of Ajax in some of the problems: first, in IE, the data update is not timely (the cache caused), with a URL read only once, so you need to change the URL at each refresh, but in the domain name? After the parameter does not affect the page acquisition, and because the URL of different browsers will reload the page, which resolves the page cache problem. You can pass url+ '? t= ' +new Date (). GetTime (), or Math.random () is also possible, followed by a problem with the data format received, which is the need for uniform encoding; again, Ajax reads anything, returns characters, At this point, we need to parse the data ourselves. Next, write an Ajax yourself:

1. Create an Ajax object var oajax=new xmlhttprequest () ~ High version browser or new ActiveXObject (' Microsoft.XMLHTTP ') ~ie

2. Establish connection Oajax.open (way, address, async)

3. Send request oajax.send ();

4. Accept onReadyStateChange When the read state changes

Oajax.readystate Status Code

0. Ajax objects have just been created (new one Ajax object)

1. Connect to the server (open method just executed)

2. Send complete

3. Receive complete (file header)

4. Receive complete (body), content request failure will also have 4

Where the HTTP status code:

Oajax.status 200<=n<300 or n==304 indicates successful delivery

Oajax.responsetext return Data

encodeuricomponent (str) string is compiled as a URI component

Ajax:

Data Background//options=url,data,type,timeout,success,errorfunction Ajax (options) {options=options| | {};options.data=options.data| | {};options.type=options.type| | ' Get '; options.timeout=options.timeout| | 0;//Tidy Data Data options.data.t=math.random ();//Create a T key for data var arr=[];for (Var key in Options.data) {Arr.push (key+ ' = ' + encodeURIComponent (Options.data[key]));} var str=arr.join (' & '), if (window. XMLHttpRequest) {//1var oajax=new XMLHttpRequest ();} Else{var oajax=new ActiveXObject (' Microsoft.XMLHTTP ');} if (options.type== ' get ') {oajax.open (' get ', options.url+ '? ') +str,true);//2oajax.send ();//3}else{//postoajax.open (' Post ', options.url,true);// Set Ajax header information Oajax.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); oajax.send (str);} Oajax.onreadystatechange=function () {//4if (oajax.readystate==4) {if (oajax.status>=200 && oAjax.status <300 | | oajax.status==304) {clearinterval (timer); options.success && options.success (oajax.responsetext)}else{ Options.error && Options.error (oajax.status);}}; if (options.timeout) {var timer=settimeout (function () {alert (' timed out '); Oajax.abort ();//Stop Loading},options.timeout)}}

1. Create Ajax functions, because the various parameters in Ajax, and the arrangement of different positions, so to use the JSON to do the data, the parameters options, where options are optional, if the transmission of the data passed, without passing the words with the default parameters, It has the type of sending and the time-out setting and data.

2. The URL needs to add some random variables later, so you can add a key options.data.t=math.random () to the data, then encode the URL, and then manipulate it.

3. then the browser is judged and Windows is supported for Chrome and FF. XMLHttpRequest, and for IE browser only support ActiveXObject (' Microsoft.XMLHTTP '), and then determine the type of its send, if it is get mode, you need to add the random number just set after the URL, You can then send the data oajax.send (), but for the Post method you also need to set the AJAX header information Oajax.setrequestheader (' Content-type ', ' application/ X-www-form-urlencoded '), and then send the data

4. judge when the state changes Oajax.onreadystatechange when oajax.readystate==4 indicates that the receiving is complete at this time to judge the status code oajax.status>=200 && oajax.status<300 | | OAJAX.STATUS==304 indicates a successful callback function at this time, otherwise it will fail, then return the status code and tell the user.

5. in this middle can be set up a timer, when the set time has not yet achieved success indicates timeout, the need to stop loading oajax.abort (), and tell the user time-out, if the set time to load successfully, then clear the timer.

Now that Ajax is encapsulated, it's easy to call.

Ajax ({data:{a:3,b:5},url: ' php/php_get.php ', success:function (str) {alert (str);}});

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.