JavaScript implementation Ajax Summary _ajax related

Ajax applications are very popular, the advantages of Ajax, we all know, specifically do not say more, its shortcomings are really many, such as the destruction of the browser back function, the same URL to open the interface is not exactly the same, as well as security performance and so on, as there are so many shortcomings, also prevent everyone to use the pace of Ajax ~~~

Here's an example of a form to implement Ajax steps:

1. Get the data we need first from the form

2. Then create the corresponding URL

3. Set the onReadyStateChange function

4. Open the connection

5. Send Request

The above is the implementation of Ajax steps, followed by a simple step-by-step summary.

The first is about the establishment of the Xrh object.

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

A little complete can be written 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 ();
 }
}

Above for IE and non IE browsers do more compatible processing.

Then it's time to send an AJAX request, taking a table single 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 above gets a country table item, and the onReadyStateChange function is the event that is triggered when readystate changes, and can be used to determine whether 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 the onreadystatechange equals 4, the resources have been completely downloaded to the client, you can use, while looking at the status code, between 200 to 300, left open right, you can refresh, here is simply a responsetext to a table item, Of course, you can return the relevant data such as XML, related content can see other related introduction.

Finally, as with triggering Ajax, you can add onchange events to the form's country, which triggers Ajax when the user enters the form.

Ps:javascript Ajax Summary

1. Create a Xhr object

Method	Description
New ActiveXObject ("Microsoft.XMLHTTP")	Applies to I support window. ActiveXObject's IE5 and IE6, etc.
New XMLHttpRequest ()	Applicable to Ie7+/ff/chrome/safari/opera, etc.

2. Properties and methods of XHR objects

Property or method	Description
ReadyState	Communication state, take value 0~4, see later text
onReadyStateChange	Trigger this event when readystate changes
ResponseText	Text-formatted document returned by the server
Respon**ml	XML-formatted document returned by the server
Status	Status codes, such as 100,200,404,500
StatusText	Text corresponding to the status code (Ok/not Found)
Abort ()	Abort the current request
Open (Method,url)	Open a request
Send (args)	Send Request
setRequestHeader (Key,value)	Set the requested head
getResponseHeader (Key)	Get the head value of the response
getAllResponseHeaders ()	Returns all header information in the form of a key value pair

3, ReadyState property

Code	Description
0	Represents an uninitialized state. To create an uninitialized XHR object
1	Represents the connection state. The open method has been called, ready to send the request
2	Represents the Send status. The Send method has been called and no response data has been received
3	Representative is receiving status, has received header information for HTTP response, receiving response content
4	Represents an already loaded state, at which time the response content has been fully received