日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
基本的封裝Ajax之一

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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、虛擬主機、營銷軟件、網(wǎng)站建設、萍鄉(xiāng)網(wǎng)站維護、網(wǎng)站推廣。

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

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

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

 
 
 
    
  
  
  
  1. function cretaeXHR(){  
    2. 
  
  
  
  2. try{ return new XMLHttpRequest();}catch(e){}  
    3. 
  
  
  
  3. try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}  
    4. 
  
  
  
  4. try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}  
    5. 
  
  
  
  5. try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}  
    6. 
  
  
  
  6. try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}  
    7. 
  
  
  
  7. try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}  
    8. 
  
  
  
  8. try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}  
    9. 
  
  
  
  9. try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}  
    10. 
  
  
  
  10. try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}  
    11. 
  
  
  
  11. return null;  
    12. 
  
  
  
  12. } 
    13.

代碼較少的采用對象特性判斷，

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

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

2，發(fā)送請求

 
 
 
    
  
  
  
  1. xhr.open  
    2. 
  
  
  
  2. xhr.send 
    3.

3，處理響應

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

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

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

完整代碼如下：

 
 
 
    
  
  
  
  1. /**  
    2. 
  
  
  
  2. * 執(zhí)行基本ajax請求,返回XMLHttpRequest  
    3. 
  
  
  
  3. * Ajax.request(url,{  
    4. 
  
  
  
  4. * async 是否異步 true(默認)  
    5. 
  
  
  
  5. * method 請求方式 POST or GET(默認)  
    6. 
  
  
  
  6. * data 請求參數(shù) (鍵值對字符串)  
    7. 
  
  
  
  7. * success 請求成功后響應函數(shù)，參數(shù)為xhr  
    8. 
  
  
  
  8. * failure 請求失敗后響應函數(shù)，參數(shù)為xhr  
    9. 
  
  
  
  9. * });   
    10. 
  
  
  
  10. */  
    11. 
  
  
  
  11. Ajax =  
    12. 
  
  
  
  12. function(){  
    13. 
  
  
  
  13. function request(url,opt){  
    14. 
  
  
  
  14. function fn(){}  
    15. 
  
  
  
  15. var async = opt.async !== false,  
    16. 
  
  
  
  16. method = opt.method || 'GET',  
    17. 
  
  
  
  17. data = opt.data || null,  
    18. 
  
  
  
  18. success = opt.success || fn,  
    19. 
  
  
  
  19. failure = opt.failure || fn;  
    20. 
  
  
  
  20. method = method.toUpperCase();  
    21. 
  
  
  
  21. if(method == 'GET' && data){  
    22. 
  
  
  
  22. url += (url.indexOf('?') == -1 ? '?' : '&') + data;  
    23. 
  
  
  
  23. data = null;  
    24. 
  
  
  
  24. }  
    25. 
  
  
  
  25. var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  
    26. 
  
  
  
  26. xhr.onreadystatechange = function(){  
    27. 
  
  
  
  27. _onStateChange(xhr,success,failure);  
    28. 
  
  
  
  28. };  
    29. 
  
  
  
  29. xhr.open(method,url,async);  
    30. 
  
  
  
  30. if(method == 'POST'){  
    31. 
  
  
  
  31. xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');  
    32. 
  
  
  
  32. }  
    33. 
  
  
  
  33. xhr.send(data);  
    34. 
  
  
  
  34. return xhr;  
    35. 
  
  
  
  35. }  
    36. 
  
  
  
  36. function _onStateChange(xhr,success,failure){  
    37. 
  
  
  
  37. if(xhr.readyState == 4){  
    38. 
  
  
  
  38. var s = xhr.status;  
    39. 
  
  
  
  39. if(s>= 200 && s < 300){  
    40. 
  
  
  
  40. success(xhr);  
    41. 
  
  
  
  41. }else{  
    42. 
  
  
  
  42. failure(xhr);  
    43. 
  
  
  
  43. }  
    44. 
  
  
  
  44. }else{}  
    45. 
  
  
  
  45. }  
    46. 
  
  
  
  46. return {request:request};  
    47. 
  
  
  
  47. }(); 
    48.

如下請求后臺的一個servlet，發(fā)送參數(shù)name=jack,age=20，默認使用異步，GET方式

 
 
 
    
  
  
  
  1. Ajax.request('servlet/ServletJSON',{   
    2. 
  
  
  
  2.          data : 'name=jack&age=20',   
    3. 
  
  
  
  3.         success : function(xhr){   
    4. 
  
  
  
  4.              //to do with xhr   
    5. 
  
  
  
  5.         },   
    6. 
  
  
  
  6.          failure : function(xhr){   
    7. 
  
  
  
  7.              //to do with xhr   
    8. 
  
  
  
  8. }   
    9. 
  
  
  
  9. }   
    10. 
  
  
  
  10. );  
    11.

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


標題名稱：基本的封裝Ajax之一
標題路徑：http://www.dlmjj.cn/article/cdjedsj.html