ajax設計方案 -- 知其然，又知所以然

LawerenceHy 8年前發布 | 14K 次閱讀 Ajax 前端技術

原聲js的ajax設計方案

整理ajax設計方案原因如下

  1. 從資源合理利用的角度以及網站優化角度去想，每次為了那幾個功能，去引用一個框架，不劃算
  2. 拜讀了w3c的ajax的設計方案，包括level1和level2的規范，有種豁然開朗的感覺
  3. 有朋友遇到ajax的跨域方案，各種糾結在心里，導致內心不能舒暢
  4. 自己的框架底層也要需要用到ajax的基礎功能，（get post請求，對于level2的上傳暫時沒用到）
  5. 最關鍵的也是之前對這塊概念十分模糊，所以開始整理ajax這塊的設計方案

一些概念

  • 瀏覽器的同源策略：瀏覽器最基本的安全功能，同源是指，域名，協議，端口相同（所以我寫的接口部署端口分別為1122和2211即不是同源，屬于跨域）
  • ajax：是一種技術方案，依賴的是CSS/HTML/Javascript，最核心依賴是瀏覽器提供的XMLHttpRequest對象，這個對象使得瀏覽器可以發出HTTP請求與接收HTTP響應。
  • nginx：是一個高性能的HTTP和反向代理服務器
  • IIS:微軟開發的的服務器，window系統自帶
  • XMLHttpRequest 兼容性如下：
  • XMLHttpRequest Level 1主要存在以下缺點:
    1. 受同源策略的限制，不能發送跨域請求；
    2. 不能發送二進制文件（如圖片、視頻、音頻等），只能發送純文本數據；
    3. 發送和獲取數據的過程中，無法實時獲取進度信息，只能判斷是否完成；
  • XMLHttpRequest Level 2中新增了以下功能:
    1. 可以發送跨域請求，在服務端允許的情況下；
    2. 支持發送和接收二進制數據；
    3. 新增formData對象，支持發送表單數據；
    4. 發送和獲取數據時，可以獲取進度信息；
    5. 可以設置請求的超時時間；

開始準備

  • 純前端代碼
  • nginx反向代理服務器（前后端分離用）
  • 后臺2套接口（端口：1122，端口：2211） PS：一份必須支持跨域請求
  • IIS服務器（部署后臺接口）
  • chrome插件postman（接口測試）
  • IE、chrome、firefox、Opera、safari、edge 6大瀏覽器，做兼容性測試

XMLHttpRequest發送請求步驟

  1. 實例化XMLHttpRequest對象（IE8-9是微軟封裝的ActiveXObject('Microsoft.XMLHTTP')）獲得一個實例
  2. 通過實例open一個請求，設置發送類型和接口以及同異步
  3. 如有需要配置報文，以及各種事件（success，error，timeout等）
  4. 調用實例的send方法，發送http/https的請求
  5. 服務器回調，客戶端接收，并做響應處理

關鍵代碼

//創建xhr對象
var xhr = tool.createXhrObject();


//針對某些特定版本的mozillar瀏覽器的BUG進行修正
xhr.overrideMimeType?(xhr.overrideMimeType("text/javascript")):(null);


//針對IE8的xhr做處理    PS：ie8下的xhr無xhr.onload事件，所以這里做判斷
xhr.onload===undefined?(xhr.xhr_ie8=true):(xhr.xhr_ie8=false);


//參數處理（get和post）,包括xhr.open     get:拼接好url再open   post:先open，再設置其他參數
ajaxSetting.data === ""?(null):(xhr = tool.dealWithParam(ajaxSetting,this,xhr));


//設置超時時間（只有異步請求才有超時時間）
ajaxSetting.async?(xhr.timeout = ajaxSetting.time):(null);


//設置http協議的頭部
tool.each(ajaxSetting.requestHeader,function(item,index){xhr.setRequestHeader(index,item)});


//onload事件（IE8下沒有該事件）
xhr.onload = function(e) {
    if(this.status == 200||this.status == 304){
        ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText));
    }else{
        /*



     *  這邊為了兼容IE8、9的問題，以及請求完成而造成的其他錯誤，比如404等
     *   如果跨域請求在IE8、9下跨域失敗不走onerror方法
     *       其他支持了Level 2 的版本 直接走onerror
     * */
    ajaxSetting.error(e.currentTarget.status, e.currentTarget.statusText);
}



};


//xmlhttprequest每次變化一個狀態所監控的事件（可拓展）
xhr.onreadystatechange = function(){
    switch(xhr.readyState){
        case 1://打開
            //do something
            break;
        case 2://獲取header
            //do something
            break;
        case 3://請求
            //do something
            break;
        case 4://完成
            //在ie8下面，無xhr的onload事件，只能放在此處處理回調結果
            xhr.xhr_ie8?((xhr.status == 200 || xhr.status == 304)?(ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText))):(null)):(null);
            break;
    };
};


//ontimeout超時事件
xhr.ontimeout = function(e){
    ajaxSetting.timeout(999,e?(e.type):("timeout"));   //IE8 沒有e參數
    xhr.abort();  //關閉請求
};


//錯誤事件，直接ajax失敗，而不走onload事件
xhr.onerror = function(e){
    ajaxSetting.error();
};


//發送請求
xhr.send((function(result){result == undefined?(result =null):(null);return result;})(this.postParam));</pre> 
  
測試代碼
 
  
前端同源測試代碼
 
  
ajax.post("/api/ajax1/ajaxT1/",{"name":"測試異步post請求","age":"success"},function(data){alert(data)});  //該接口在1122上
 
  
前端跨域測試代碼
 
  
ajax.post("http://192.168.0.3:2211/api/weixin/ajaxT2/",{"name":"測試跨域post請求","age":"success"},function(data){alert(data)});
 
  
后端跨域接口代碼
 
  
/// <summary>
/// 測試跨域請求
/// </summary>
/// <param name="module"></param>
/// <returns></returns>
[Route("ajaxT2")]
public String kuaAjaxT2([FromBody]TModule module)
{
    String result = "跨域post傳輸成功："+module.name+"-"+module.age;
    return result;
}
 
  
后端同源測試代碼
 
  
/// <summary>
/// 測試ajax同源請求
/// </summary>
/// <param qwer="code"></param>
/// <returns>result</returns>
[Route("ajaxT2")]
public String GetkuaAjaxT1(string name,string age)
{
    String result = "1J跨域成功:" + name + "-" + age;
    return result;
}
 
  
以下是各種瀏覽器的測試結果（僅提供同源post請求和跨域post請求）
 
  
同源測試
 
  
chrome
 
  
 
  
IE8-9
 
  
 
 
  
IE10+
 
  
 
  
firefox
 
  
 
  
opera
 
  
 
  
safari
 
  
 
  
edge
 
  
 
  
跨域測試
 
  
chrome
 
  
 
  
IE8-9
 
  
 
 
  
IE10+
 
  
 
  
firefox
 
  
 
  
opera
 
  
 
  
safari
 
  
 
  
edge
 
  
 
  
輪詢技術的實現（需要后臺接口支持）
 
  
/*


    

  • 長輪詢的實現
    • 

  • a. 業務上只需要得到服務器一次響應的輪詢
    • 

  • b. 業務上需要無限次得到服務器響應的輪詢
*
    • 

  • param: url   請求接口地址
    • 

  • data  請求參數
    • 

  • successEvent    成功事件處理
    • 

  • isAll           是否一直請求（例如，等待付款完成業務，只需要請求一次）
    • 

  • timeout         ajax超時時間
    • 

  • timeFrequency   每隔多少時間發送一次請求
    • 

  • error           錯誤事件
    • 

  • timeout         超時處理
    • 

  • */
longPolling:function(url,data,successEvent,isAll,timeout,timeFrequency,errorEvent,timeoutEvent){
 var ajaxParam ={

     time:timeout,
 type:"post",
 url:url,
 data:data,
 async:false,
 success:function(date){
     successEvent(data);
     var timer = setTimeout(
         function(){
             tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent);
         },timeFrequency);
     //業務需求判斷，是否只需要得到一次結果
     if (!isAll) clearTimeout(timer);
 },
 //如果走了error說明該接口有問題，沒必要繼續下去了
 error:errorEvent,
 timeout:function(){
     timeoutEvent();
     setTimeout(function(){
         tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent)
     },timeFrequency);
 }

    
 };
 ajax.common(ajaxParam);
}</pre> 
    考慮到業務需求，集成了一次isAll參數有2個意義
     

    聊天系統會要一直需求輪詢，不間斷的向后臺使用數據，所以isAll = true
     

    等待付款業務只需要得到后臺一次響應是否支付成功，所以isAll = false
     

    具體代碼已封裝成一個js庫，供大家根據項目需求，自己開發定制，不過我已經封裝了一些常用請求
     

       
 
    • 異步get請求 -- ajax.get
      •  
 
    • 異步post請求 -- ajax.post
      •  
 
    • 同步post請求 -- ajax.postSync
      •  
 
    • 輪詢請求 -- ajax.longPolling
      •  
 
    • 通用配置請求 -- ajax.common PS：該方法為方便使用，不用的可以直接使用生產版本，只有common方法
      •  

     

    連續搞了半個月的研究，研究ajax的設計方案，總體說來還是有很大的收獲的，對瀏覽器的了解，js的了解，服務器技術的了解，后端的溫習還是有很大的進步的，特別是解決問題的能力，感覺又上了一個level，雖然暫時還沒去大公司，還在小公司游蕩，但是從沒有放棄對技術執著的追求。下一個目標bat，希望可以通過我的努力，進去，再接受一番洗禮。不過到時候有人內推就好了，哎。為了前端架構師的夢想，為了自己的前端架構，繼續加油努力下去。技術的未來，不會遠...
     

    版本更新介紹
     

       
 
    1. 跨域不需要在前端設置跨域請求報文頭，現已刪除 ==>author:keepfool from cnblog
      2.  
 
    2. 更新tool一些方法，擁抱es5+新技術 ==>author:pod4g from github
      3.  
 
    3. 刪除頭部參數中的跨域參數設置 ==>author:wYhooo from github
      4.  
 
    4. 集成ajax的輪詢技術
      5.  

     

    程序員的小笑話
     

     

     
     

    來自：https://github.com/GerryIsWarrior/ajax?1
     

     
    •
 本文由用戶 LawerenceHy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！