JavaScript implementation Ajax summary, javascriptajax Summary

JavaScript implementation Ajax summary, javascriptajax Summary

Ajax applications are very popular. We all know the advantages of ajax. I will not talk about them more. There are many shortcomings. For example, if the browser's back function is damaged, the interfaces opened by the same url are not exactly the same, there are also security and other aspects. As for so many shortcomings, it cannot stop everyone from using ajax ~~~

The following describes how to implement Ajax using a form:

1. obtain the required data from the form first.

2. Create the corresponding URL

3. Set the onreadystatechange Function

4. Open the connection

5. Send a request

The above is the Ajax implementation step. Next, we will summarize it in a simple step-by-step manner.

The first is about the establishment of xrh objects.

function creatXhr(){ var xhr=null; if(window.XMLHttpRequest){  xhr=new XMLHttpRequest(); }else{  xhr=new ActiveXObject("Microsoft.xhr"); }}

If it is a little complete, you can write it like this:

function creatXhr(){ var xhr=null; try{  xhr=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){  try {   xhr=new ActiveXObject("Microsoft.XMLHTTP");  }catch (e2){   xhr=false;  } } if(!xmlHttp && typeof XMLHttpRequest != 'undefined') {  xhr=new XMLHttpRequest(); }}

The preceding operations are compatible with ie and non-ie browsers.

Then it is necessary to send an Ajax request. The following uses a form item country as an example:

function callReqest(){ var country=document.getElementById('country').value; if((country==null)||(country==''))  return; var url='example.php?country='+encodeURIComponent(country); xhr.onreadystatechange=update; xhr.open('GET',url,true); xhr.send(null);}

The preceding figure shows a country form item. The onreadystatechange function is an event triggered when the readystate changes. You can determine whether an action is required.

The onreadystatechange function is as follows:

function onreadystatechange(){ if((xhr.onreadystatechange==4)&&((xhr.state==200)||((xhr.state>200)&&(xhr.state<300)))){  document.getElementById('countryCode').value=xhr.responseText; }}

When onreadystatechange is equal to 4, it indicates that the resource has been completely downloaded to the client and can be used. Check the status code at the same time. The value ranges from 200 to 300, and the value is left closed and right open to refresh, in this example, responseText is simply given to a form item. Of course, XML and other related data can be returned. For more information, see other related descriptions.

Finally, to trigger Ajax, you can add the onChange event in the form's country, so that the user will trigger Ajax when entering the form.

Ps: javascript ajax Summary

1. Create an XHR object

Method	Description
New ActiveXObject ("Microsoft. XMLHTTP ")	It is applicable to ie5 and ie6 that support window. ActiveXObject.
New XMLHttpRequest ()	Suitable for ie7 +/ff/chrome/safari/opera, etc.

2. properties and methods of XHR objects

Attribute or Method	Description
ReadyState	Communication Status, value range: 0 ~ 4. See the following document.
Onreadystatechange	This event is triggered when readyState changes.
ResponseText	Text format document returned by the server
Respon ** ML	XML format document returned by the server
Status	Status Code, such as 100,200,404,500
StatusText	Text corresponding to the status code (OK/Not Found)
Abort ()	Abort current request
Open (method, url)	Open a request
Send (args)	Send request
SetRequestHeader (key, value)	Set the Request Header
GetResponseHeader (key)	Obtain the Response Header Value
GetAllResponseHeaders ()	Return all header information in the form of key-value pairs

3. readyState attributes

Code	Description
0	Indicates an uninitialized status. To create an uninitialized XHR object
1	Indicates the connection status. The open method has been called to prepare to send a request.
2	Indicates the sending status. The send method has been called and no response data has been obtained.
3	Indicates the receiving status. The HTTP response header is received and the response content is being received.
4	Indicates that the response content has been fully received.