Several common methods of AJAX implementation

Ajax Resource Center

Basic methods of implementation

var xmlHttp = false;
If you are using a newer version of Internet Explorer, you need to use object Msxml2.xmlhttp, while older versions of the Internet//explorer use Microsoft.XMLHTTP. Non-IE requires xmlhttprequest.
try {
XmlHttp = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (E2) {
try{
XmlHttp = new XMLHttpRequest ();
catch (E3) {
Alert ("Your browser does not support AJAX technology");
}
}
}

function Send () {
var url = "/demo.action"
Note The order of the write, sometimes the wrong order will make mistakes
Xmlhttp.open ("Get", url, True); Open function Description See below
Xmlhttp.onreadystatechange = callback; Calling a callback function to respond to a server
Xmlhttp.send (NULL); General content with the URL to send information, special needs can send sent information, this is the URL sent//information written
}

callback function to obtain information from the server
function callback{
if (xmlhttp.readystatechange
if (xmlhttp.readystate = = 4) {//See HTTP Ready state
if (Request.status = = 200) {//details of HTTP status code
var response = Xmlhttp.responsetext;
}
}
}

Open () parameter
Request-type: The type of request sent. A typical value is a get or POST, but a head request can also be sent.
URL: The URL to connect to.
Asynch: True if you want to use an asynchronous connection, false otherwise. The parameter is optional and the default is true.
Username: If authentication is required, you can specify the user name here. The optional parameter has no default value.
Password: If authentication is required, you can specify a password here. The optional parameter has no default value.
The first three parameters are usually used

HTTP Ready state
The HTTP ready state indicates the status or situation of the request. It is used to determine whether the request has started, whether a response has been received, or whether the request/response model has been completed. It can also help determine if the response text or data provided by the server is safe to read. You need to understand five ready states in an AJAX application:

0: The request was not issued (before calling open ()).
1: The request has been established but has not been issued (before send () is called).
2: The request has been sent out in process (it is usually possible to get the content head from the response).
3: The request has been processed and there is usually some data available in the response, but the server has not completed the response yet.
4: The response is complete, you can access the server response and use it.

As with most cross-browser issues, the use of these ready states is inconsistent. You may expect the task readiness status to be from 0 to 1, 2, 3, and then 4, but in practice it is rarely the case. Some browsers never report 0 or 1 and start directly from 2, then 3 and 4. Other browsers report all the states. Others report ready State 1 more than once. As you can see in the previous section, the server calls Updatepage () multiple times, and every call pops up a warning box--possibly different from what you expected.

HTTP status Code
404 The page does not exist
Data accessed by 403 and 401 are protected or inaccessible
2001 Cut Smooth

For more detailed instructions, visit the http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/

prototype Implementation Ajax

Look at the code first

<script type= "Text/javascript" src= "Prototype.js"/>

Function Demo () {

var url= "Demo.action"; Request Path

var pars= "";//request parameters such as the full request path is http://www.demo.com/demo&d1=2,

Then Url= "http://www.demo.com/demo,pars=" d1=2 "
var ajax=new ajax.request (url,{method: "Post", Parameters:pars,oncomplete:callback});

Callback as callback method

var ajax=new ajax.updater (div,url,{method: "Post", parameters:pars,evalscripts:true});

Evaldemo=function () {}

With the Ajax.request class there are other properties that can be defined and set within this object, such as asynchronous, that can be true or false to determine whether Ajax calls to the server are asynchronous (the default value is True).

There are two other useful options to handle the results. We can pass in a method at the onsuccess option, and when AJAX is done correctly, you can also pass in a method at the OnFailure option, which is invoked when an error occurs on the server side.

}

function callback (Request) {//callback method requires a parameter

var S=request.responsetext; Get Server return information

}

More use methods see the Help documentation for prototype

Dojo Implementation Ajax

<script type= "Text/javascript" src= "Dojo.js"/>

Function Demo () {
var pars={actionsign: ' Firstlogin ', userid:dojo.byId (' userid '). Value}; Request parameter format is {parameter name: value}
Dojo.xhrpost ({///the method of using a POST request to correspond to a GET request is Xhrget
URL: "Demo.action",
Content:pars,
Preventcatch:true,//No browser cache if used, two of the same requests, the browser will invoke the result of the last request from the cache

Handleas: ' text ',//returned data format

Load:function (data) {//action after successful request
callback (data);
},
Error:function (Response,ioargs) {//action after a request error
Alert ("HTTP Status code:" + ioArgs.xhr.status);
}
});

}

More ways to use see Http://api.dojotoolkit.org/jsdoc/dijit/HEAD/dijit.layout.ContentPane

Http://sitepen.com/labs/guides/?guide=DojoQuickStart

A small detail question about prototype and dojo in AJAX usage:

If the request is back to a Web page, and this page contains JavaScript methods, it is recommended to use prototype, it can guarantee the correct invocation of these JS methods, but you need to pay attention to the method format Demo=function () {}, otherwise the JS method will be directly executed, Does not trigger execution based on the event. Examples are as follows:

Function Demo () {

var url= "Demo.action"; Request Path

var pars= "";//request parameters such as the full request path is http://www.demo.com/demo&d1=2,

Then Url= "http://www.demo.com/demo,pars=" d1=2 "

var ajax=new ajax.updater (div,url,{method: "Post", parameters:pars,evalscripts:true});

}