Five steps for Ajax applications __ajax

Five Steps for AJAX applications

1. Create a XMLHttpRequest Object
var xmlhttp=createxmlhttprequest ();
function Createxmlhttprequest ()
{
var xmlHttp;
if (window.xmlhttprequest)
{
IE6 above version and other browsers built-in XMLHttpRequest objects
Xmlhttp=new XMLHttpRequest ();
}
else if (window.activexobject)
{
The IE6 and the following browsers can be created by ActiveXObject two controls, putting the new version in front
var activexname=["MSXML2. XMLHTTP "," Microsoft.XMLHTTP "];
for (var i=0; i<activexname.length; i++)
{
Try
{///Remove a control name for creation, create success to terminate the loop
Xmlhttp=new ActiveXObject (Activexname[i]);
Break
}
catch (e) {};
}
}
Confirm that the XMLHttpRequest object was created successfully
if (!xmlhttp)
{
Alert ("XMLHttpRequest object creation failed.) ");
Return
}
Else
{
alert (xmlHttp);
return xmlHttp;
}
}

2. Register callback function
Xmlhttp.onreadystatechange=callback;

3. Initialize the XMLHttpRequest object and set the connection information
The first parameter represents the way HTTP is requested, divided into get and post two, and the get-mode-requested parameter is in the URL
The second parameter represents the URL address of the request, which is resolved to an absolute address
The third parameter indicates whether the request is synchronous or asynchronous, and the default is sync True, and four, five parameters are usually not
Xmlhttp.open ("Get", url, True);

4. Sending data, starting and delivering on the server side
Synchronous mode: Send () This sentence will be sent back to the server side of the data after the execution, and then execute the next statement
Asynchronous mode: Send () This sentence will be executed immediately, followed by the next statement
To post, you need to set the HTTP request headers yourself
Xmlhttp.open ("POST", url,true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("name=" +value);
Xmlhttp.send (NULL); This parameter is optional and can not be written at this time

5. Defines a callback function that is primarily responsible for receiving data from the server side and displaying it on the page
function callback ()
{
To determine whether an object's interaction state is complete
if (xmlhttp.readystate==4)
{
To determine if HTTP interaction is successful
if (xmlhttp.status==200)
{
Gets the data returned by the server side, in plain text data or in XML document format
var Responsetext=xmlhttp.responsetext;
Display response data on a page
Get document nodes in DOM or jquery
var Divnode=document.getelementbyid ("#divNode_ID");
Divnode.innerhtml=responsetext;
}
}

}