Ajax，或許已經是老掉牙的話題。我學習總結一下。大概會有6篇，從基本的Ajax直至高級的應用。最後會形成一個實用的AJax工具庫。
創建一個基本的AJax應用不需要太多的代碼，大概三個步驟，幾十行代碼即可。
1，創建AJax的核心對象XMLHttPRequest
因為浏覽器之間的不兼容，IE7之前的版本並沒有原生的XMLhttpRequest對象卻實現為ActiveX對象。
互聯網及各種書籍中有著多種創建方式，有的復雜很多行代碼，有的則簡潔很少代碼。當然復雜的考慮的情形更多一些。如下幾乎將IE中所有的情況都考慮到了
vIEw sourceprint?01 function cretaeXHR(){
02 try{ return new XMLHttpRequest();}catch(e){}
03 try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}
04 try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}
05 try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}
06 try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}
07 try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}
08 try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}
09 try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
10 try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}
11 return null;
12 }
代碼較少的采用對象特性判斷，
vIEw sourceprint?1 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
我在這裡采用精簡方式，暫不考慮創建異常的情況。
2，發送請求
vIEw sourceprint?1 xhr.open
2 xhr.send
3，處理響應
vIEw sourceprint?1 xhr.onreadystatechange = function(){
2 if(xhr.readyState == 4){
3 if(xhr.status == 200){//當然你可以把200~300之間或304的都理解成響應成功
4 //callback
5 }
6 }
7 }
嗯，到這裡沒什麼特別的，所有的書籍上都是這麼幾個步驟來著。對於初學者來說，要將這幾個步驟很好的封裝一下形成一個良好的模塊還是很困難的。全局變量滿天飛不知道怎麼去組織代碼，初學者開始都是這樣的。現在想想是對一門語言沒有足夠的掌握，尤其是閉包。
這裡采用 單例模式 封裝成一個對象，即只有一個全局的變量將其賦值給AJax，該對象有一個request方法。request有兩個參數，第一個為請求的url(必要的)，字符串類型，第二個opt為配置參數(可選的)，對象類型。結果處理使用內部私有的_onStateChange函數。
完整代碼如下
vIEw sourceprint?01 /**
02 * 執行基本AJax請求,返回XMLHttpRequest
03 * AJax.request(url,{
04 * async 是否異步 true(默認)
05 * method 請求方式 POST or GET(默認)
06 * data 請求參數 (鍵值對字符串)
07 * success 請求成功後響應函數，參數為xhr
08 * failure 請求失敗後響應函數，參數為xhr
09 * });
10 *
11 */
12 AJax =
13 function(){
14 function request(url,opt){
15 function fn(){}
16 var async = opt.async !== false,
17 method = opt.method || 'GET',
18 data = opt.data || null,
19 success = opt.success || fn,
20 failure = opt.failure || fn;
21 method = method.toUpperCase();
22 if(method == 'GET' && data){
23 url += (url.indexOf('?') == -1 ? '?' : '&') + data;
24 data = null;
25 }
26 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
27 xhr.onreadystatechange = function(){
28 _onStateChange(xhr,success,failure);
29 };
30 xhr.open(method,url,async);
31 if(method == 'POST'){
32 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
33 }
34 xhr.send(data);
35 return xhr;
36 }
37 function _onStateChange(xhr,success,failure){
38 if(xhr.readyState == 4){
39 var s = xhr.status;
40 if(s>= 200 && s < 300){
41 success(xhr);
42 }else{
43 failure(xhr);
44 }
45 }else{}
46 }
47 return {request:request};
48 }();
如下請求後台的一個servlet，發送參數name=jack,age=20，默認使用異步，GET方式
vIEw sourceprint?01 AJax.request('servlet/ServletJSON',{
02 data : 'name=jack&age=20',
03 success : function(xhr){
04 //to do with xhr
05 },
06 failure : function(xhr){
07 //to do with xhr
08 }
09 }
10 );
以上是一個簡單封裝，用了不到40行的代碼。這裡的請求參數data只能是鍵值字符串，有時候希望可以JS對象，以便可以更靈活的傳參，下一篇將從改善請求參數開始。
-
資料引用:http://www.knowsky.com/552170.Html