国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 學(xué)院 > 開發(fā)設(shè)計 > 正文

基本的封裝-Ajax之一

2019-11-17 03:36:30

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

1，創(chuàng)建Ajax的核心對象xmlHttPRequest

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

01function 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');`

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

2，發(fā)送請求

`1`	`xhr.open`

`2`	`xhr.send`

3，處理響應(yīng)

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

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

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

完整代碼如下

01/** 
02 * 執(zhí)行基本ajax請求,返回XMLHttpRequest 
03 * Ajax.request(url,{ 
04 *      async   是否異步 true(默認(rèn)) 
05 *      method  請求方式 POST or GET(默認(rèn)) 
06 *      data    請求參數(shù) (鍵值對字符串) 
07 *      success 請求成功后響應(yīng)函數(shù)，參數(shù)為xhr 
08 *      failure 請求失敗后響應(yīng)函數(shù)，參數(shù)為xhr 
09 * }); 
10 * 
11 */
12Ajax =  
13function(){ 
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，發(fā)送參數(shù)name=jack,age=20，默認(rèn)使用異步，GET方式

01Ajax.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);