Sort out an Ajax example, encapsulate it, and call it!

What Is Ajax?

That is, javascript can promptly request and process responses to the server without blocking users. Achieve the effect of refreshing.

Core Mechanism: XMLHttpRequest

XMLHttpRequest attributes:

Onreadystatechange the event handler of the event triggered by each state change.
The string format of responseText returned data from the server process.
ResponseXML is a DOM-compatible document data object returned by the server process.
Status Code returned from the server, such as common 404 (not found) and 200 (ready)
String information of the status Text accompanied by the status code
ReadyState object status value, 0-not initialized 1-loading 2-Loading completed 3-interaction 4-finished.

 

JS:

Function Ajax (){
Var xmlHttpReq = null;
If (window. XMLHttpRequest ){
XmlHttpReq = new XMLHttpRequest ();
} Else {
If (window. ActiveXObject ){
XmlHttpReq = new ActiveXObject ("Microsoft. XMLHTTP ");
}
}
Var handler = null;
This. invoke = function (url, mode, synchro, _ handler ){
Handler = _ handler;
XmlHttpReq. open (mode, url, synchro );
XmlHttpReq. onreadystatechange = this. callback;
XmlHttpReq. send (null );
};
This. callback = function (){
If (xmlHttpReq. readyState = 4 ){
If (xmlHttpReq. status = 200 ){
Handler (xmlHttpReq. responseText );
} Else {
Alert ("There was a problem retrieving the XML data: \ n" + xmlHttpReq. statusText );
}
}
};
}

 

Call method:

 

Var ajax = new Ajax ();

Ajax. invoke ("http://www.xx.com/getlist.aspx? Type = 1 & id = 1 "," GET ", true, function (response ){
Var json = eval ("(" + response + ")");
});

 

Jquery:

 

// Parameter settings. The format is key: value. If {"cl": "check", "dd": "dd "}, the obtained format is cl = check & dd = dd.
Var params = $. param ({"il": Math. random ()});
// Verify Logon
$. Ajax ({
Type: "POST ",
Url: "Control/Login. aspx ",
Data: encodeURI (params ),
Success: function (response ){
Var json = eval ("(" + response + ")");
// JSON, json [0]; json. Table [0]. id;
}
});

//---------------
$. GetJSON ("Control/GetData. aspx", {t: Math. random ()}, function (json ){
Alert (json. OK );
If (json. OK = true ){
Alert (json. Table [0]. ID );
}
});

// Traverse JSON
$. Each ({name: "John", lang: "JS"}, function (I, n ){
Alert ("Name:" + I + ", Value:" + n );
});