Ajax，或許已經是老掉牙的話題。我學習總結一下。大概會有6篇，從基本的Ajax直至高級的應用。最后會形成一個實用的Ajax工具庫。
創建一個基本的Ajax應用不需要太多的代碼，大概三個步驟，幾十行代碼即可。
1，創建Ajax的核心對象xmlHttPRequest
因為瀏覽器之間的不兼容，IE7之前的版本并沒有原生的xmlhttpRequest對象卻實現為ActiveX對象。
互聯網及各種書籍中有著多種創建方式，有的復雜很多行代碼，有的則簡潔很少代碼。當然復雜的考慮的情形更多一些。如下幾乎將IE中所有的情況都考慮到了
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 | } |
代碼較少的采用對象特性判斷，
1 | var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); |
我在這里采用精簡方式，暫不考慮創建異常的情況。
2，發送請求
1 | xhr.open |
2 | xhr.send |
3，處理響應
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函數。
完整代碼如下
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方式
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對象，以便可以更靈活的傳參，下一篇將從改善請求參數開始。
新聞熱點
疑難解答
