For Ajax, jquery is a rare good JS library, but many friends do not understand the AJAX implementation of the process, or do not understand, this CG is not advocated, CG write the following code on the one hand is to solve a netizen's doubt, Also hope that those who want to have a deep improvement in jquery technology can see the jquery source code more.
Here is a simple implementation of an AJAX support class, if you do not understand the words can initiate questions and comments.
| The code is as follows |
Copy Code |
| /**
* Name: Ajax support JavaScript class
* Function: For the page to achieve AJAX support, simple encapsulation of AJAX requests
* Date Created: 2010-01-14
* Author: CG
*/
The following are common functions or objects
Whether it is IE
var Isie = (document.all)? True:false;
$ ID Selector
var $ = function (ID) {
Return "string" = = typeof ID? document.getElementById (ID): ID;
};
Class object
var Class = {
Create:function () {
return function () {this.initialize.apply (this, arguments);}
}
};
event function Bindings
var Bind = function (object, fun) {
return function () {
Return Fun.apply (object, arguments);
}
};
Global AJAX Objects
For Ajaxsupport object invocation
var $ajax = function (obj) {
Error message
if (undefined = = Obj.error) {
Obj.error = Ajaxerror;
}
Create new objects, which can be implemented using a single example to reduce resource consumption
New Ajaxsupport (obj);
};
Common Ajax Error display
function Ajaxerror (msg) {
Alert (msg);
}
var ajaxsupport = Class.create ();
Ajaxsupport.prototype ={
/** Initialization method
* Parameter: Obj calls the object
*/
Initialize:function (obj) {
This._xmlhttp = null;
URL Object
This._url = Obj.url;
Request Method Object
This._method = Obj.method;
Request method
This._asyn= Obj.asyn;
Request data
This._data= Obj.data;
Request succeeded
this._success = obj.success;
Error
This._error = Obj.error;
Initialize HttpRequest
This._inithttprequest ();
Start request
This._ajaxrequest ();
},
Request status changes
_readystatechange:function () {
Only Judge 4 of the situation, the other needs to set up a separate
if (4 = this._xmlhttp.readystate) {
Request succeeded
if (= = This._xmlhttp.status) {
if (undefined!= this._success) {
Send request to Caller
This._success (This._xmlhttp.responsexml);
}
}
Error, or return result not 200
else{
if (undefined!= this._error) {
This._error ("Error:server Internal error!");
}
}
}
},
Start Ajax Request
_ajaxrequest:function () {
Open Request
try{
Open Request
This._xmlhttp.open (This._method, This._url, This._asyn);
}catch (e) {
Open Request Error
if (undefined!= this._error) {
This._error ("error:openning Ajax Request error!");
}
}
try{
Send Request
This._xmlhttp.send (This._data);
}
catch (e) {
Sending data errors
if (undefined!= this._error) {
This._error ("error:sending Ajax Request error!");
}
}
},
Initializing the HttpRequest object
_inithttprequest:function () {
Initialize Httpreqest
if (!isie) {//ff Opera safari
This._xmlhttp = new XMLHttpRequest ();
}else{//ie
try{//ie6+
This._xmlhttp = new ActiveXObject ("Msxml2.xmlhttp");
}catch (e) {
try{//ie5.5+
This._xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
}catch (e) {
Browser does not support
if (undefined!= this._error) {
This._error ("sorry! Your Browser dose not Support ajax! ");
}
}
}
}
Event Bindings
if (null!= this._xmlhttp) {
Binding state Change Event
This._xmlhttp.onreadystatechange = Bind (this, this._readystatechange);
}else{
Binding Event Call Error message
if (undefined!= this._error) {
This._error ("Error:init Ajax Object error!");
}
}
}
} |
Here is a simple call code, I believe that the use of jquery friends feel very similar to it?
| The code is as follows |
Copy Code |
| Function Testajax () {
var req = "text=" + $ ("txtname"). Value;
//Object Invoke Ajax Test
$ajax ({
URL: "Ajaxtest",
method: "Post",
asyn:true,
data:req,
success:function ( obj) {
//Here test output data, do not parse XML
$ ("msg"). InnerHTML = obj;
},
error:function ( msg) {
//error message display
$ ("msg"). InnerHTML = msg;
}
});
} |
