Ajax，或許已經(jīng)是老掉牙的話(huà)題。我學(xué)習(xí)總結(jié)一下。大概會(huì)有6篇，從基本的Ajax直至高級(jí)的應(yīng)用。***會(huì)形成一個(gè)實(shí)用的Ajax工具庫(kù)。

創(chuàng)建一個(gè)基本的Ajax應(yīng)用不需要太多的代碼，大概三個(gè)步驟，幾十行代碼即可。

1，創(chuàng)建Ajax的核心對(duì)象XMLHttpRequest

因?yàn)闉g覽器之間的不兼容，IE7之前的版本并沒(méi)有原生的XMLHttpRequest對(duì)象卻實(shí)現(xiàn)為ActiveX對(duì)象。
互聯(lián)網(wǎng)及各種書(shū)籍中有著多種創(chuàng)建方式，有的復(fù)雜很多行代碼，有的則簡(jiǎn)潔很少代碼。當(dāng)然復(fù)雜的考慮的情形更多一些。如下幾乎將IE中所有的情況都考慮到了。

function cretaeXHR(){   
try{ return new XMLHttpRequest();}catch(e){}   
try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}   
try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}   
try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}   
try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}   
try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}   
try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}   
try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}   
try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}   
return null;   
}  

代碼較少的采用對(duì)象特性判斷，

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject('Microsoft.XMLHTTP');  

我在這里采用精簡(jiǎn)方式，暫不考慮創(chuàng)建異常的情況。

2，發(fā)送請(qǐng)求

xhr.open   
xhr.send  

3，處理響應(yīng)

xhr.onreadystatechange = function(){   
if(xhr.readyState == 4){   
if(xhr.status == 200){//當(dāng)然你可以把200~300之間或304的都理解成響應(yīng)成功   
//callback   
}   
}   
}  

嗯，到這里沒(méi)什么特別的，所有的書(shū)籍上都是這么幾個(gè)步驟來(lái)著。對(duì)于初學(xué)者來(lái)說(shuō)，要將這幾個(gè)步驟很好的封裝一下形成一個(gè)良好的模塊還是很困難的。全局變量滿(mǎn)天飛不知道怎么去組織代碼，初學(xué)者開(kāi)始都是這樣的?，F(xiàn)在想想是對(duì)一門(mén)語(yǔ)言沒(méi)有足夠的掌握，尤其是閉包。

這里采用 單例模式 封裝成一個(gè)對(duì)象，即只有一個(gè)全局的變量將其賦值給Ajax，該對(duì)象有一個(gè)request方法。request有兩個(gè)參數(shù)，***個(gè)為請(qǐng)求的url(必要的)，字符串類(lèi)型，第二個(gè)opt為配置參數(shù)(可選的)，對(duì)象類(lèi)型。結(jié)果處理使用內(nèi)部私有的_onStateChange函數(shù)。

完整代碼如下：

/**   
* 執(zhí)行基本ajax請(qǐng)求,返回XMLHttpRequest   
* Ajax.request(url,{   
* async 是否異步 true(默認(rèn))   
* method 請(qǐng)求方式 POST or GET(默認(rèn))   
* data 請(qǐng)求參數(shù) (鍵值對(duì)字符串)   
* success 請(qǐng)求成功后響應(yīng)函數(shù)，參數(shù)為xhr   
* failure 請(qǐng)求失敗后響應(yīng)函數(shù)，參數(shù)為xhr   
* });    
*/   
Ajax =   
function(){   
function request(url,opt){   
function fn(){}   
var async = opt.async !== false,   
method = opt.method || 'GET',   
data = opt.data || null,   
success = opt.success || fn,   
failure = opt.failure || fn;   
method = method.toUpperCase();   
if(method == 'GET' && data){   
url += (url.indexOf('?') == -1 ? '?' : '&') + data;   
data = null;   
}   
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');   
xhr.onreadystatechange = function(){   
_onStateChange(xhr,success,failure);   
};   
xhr.open(method,url,async);   
if(method == 'POST'){   
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');   
}   
xhr.send(data);   
return xhr;   
}   
function _onStateChange(xhr,success,failure){   
if(xhr.readyState == 4){   
var s = xhr.status;   
if(s>= 200 && s < 300){   
success(xhr);   
}else{   
failure(xhr);   
}   
}else{}   
}   
return {request:request};   
}();  

如下請(qǐng)求后臺(tái)的一個(gè)servlet，發(fā)送參數(shù)name=jack,age=20，默認(rèn)使用異步，GET方式

Ajax.request('servlet/ServletJSON',{    
         data : 'name=jack&age=20',    
        success : function(xhr){    
             //to do with xhr    
        },    
         failure : function(xhr){    
             //to do with xhr    
}    
}    
);   

以上是一個(gè)簡(jiǎn)單封裝，用了不到40行的代碼。這里的請(qǐng)求參數(shù)data只能是鍵值字符串，有時(shí)候希望可以JS對(duì)象，以便可以更靈活的傳參，下一篇將從改善請(qǐng)求參數(shù)開(kāi)始。

【編輯推薦】

1. 使用 jQuery 簡(jiǎn)化 Ajax 開(kāi)發(fā)
2. 外國(guó)設(shè)計(jì)大師Ajax之父74張圖詳談?dòng)脩?hù)體驗(yàn)的要素
3. 在AJAX開(kāi)發(fā)中集成數(shù)據(jù)庫(kù)技術(shù)
4. Ajax和WEB服務(wù)數(shù)據(jù)格式：自定義返回格式