原生 JS 的 AJAX 方案

vihi3329 8年前發布 | 16K 次閱讀 Ajax 前端技術

原聲js的ajax方案

整理原聲ajax設計方案原因如下：

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

一些概念：

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

開始準備如下：

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

XMLHttpRequest發送請求步驟：

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

核心代碼：

//創建xhr對象
var xhr = 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 = dealWithParam(ajaxSetting,this,xhr));
//設置超時時間（只有異步請求才有超時時間）
ajaxParam.async?(xhr.timeout = ajaxSetting.time):(null);
//設置http協議的頭部
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){this.postParam == undefined?(result =null):(result=this.postParam);return result;})(this.postParam));</code></pre> 
  
測試代碼如下： 
  前端同源測試代碼 
  ajax.post("/api/ajax1/ajaxT1/",{"name":"測試異步post請求","age":"success"},function(data){alert(data)});  //該接口在1122上 
  前端跨域測試代碼 
  ajax.post_cross("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 
   
  具體代碼已封裝成一個js庫，供大家根據項目需求，自己開發定制，不過我已經封裝了一些常用請求 
   
   異步get請求 -- ajax.get 
   異步post請求 -- ajax.post 
   同步get請求 -- ajax.get_sync 
   同步post請求 -- ajax.post_sync 
   跨域get請求 -- ajax.get_cross 
   跨域post請求 -- ajax.post_cross 
   通用配置請求 -- ajax.common
 PS：該方法為方便使用，不用的可以直接使用精簡版本，只有common方法 
   
    
  來自：https://github.com/GerryIsWarrior/ajax


                    
                         本文由用戶 vihi3329 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1480666437839.html
                         Ajax 前端技術

原生 JS 的 AJAX 方案

原聲js的ajax方案

XMLHttpRequest發送請求步驟：

相關經驗

相關資訊

相關文檔

目錄