前端通訊：ajax設計方案（一）---集成核心請求

報告，我要說話！xp被歷史淘汰了，IE6 say goodbye了，太TM開心了，今後不要兼容IE6了，哈哈哈哈哈哈

報告，我要說話！IE這sb爲啥不早點被殺掉呢，找工做據說要兼容IE，立馬軟了，唉唉唉唉唉唉

報告，我要說話！Jquery太豐富了，老子只用了幾個功能，媽的，太不划算了，啊啊啊啊啊啊

......

好了，言歸正傳。對於想到整理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響應。
• XMLHttpRequest Level 1主要存在如下缺點:

1. 1. 　　受同源策略的限制，不能發送跨域請求；
   2.       不能發送二進制文件（如圖片、視頻、音頻等），只能發送純文本數據；
   3.       發送和獲取數據的過程當中，沒法實時獲取進度信息，只能判斷是否完成；

• XMLHttpRequest Level 2中新增瞭如下功能:

1. 1. 　　能夠發送跨域請求，在服務端容許的狀況下；
   2. 　　支持發送和接收二進制數據；
   3. 　　新增formData對象，支持發送表單數據；
   4. 　　發送和獲取數據時，能夠獲取進度信息；
   5. 　　能夠設置請求的超時時間；

• XMLHttpRequest 兼容性以下：

• nginx：是一個高性能的HTTP和反向代理服務器
• IIS:微軟開發的的服務器，window系統自帶

 

開始準備以下：

1. 純前端代碼
2. nginx反向代理服務器（先後端分離用）
3. 後臺2套接口（端口：1122，端口：2211）  PS：一份必須支持跨域請求
4. IIS服務器（部署後臺接口）
5. chrome插件postman（接口測試）
6. 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 = 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{
            /*
             *  這邊爲了兼容IE八、9的問題，以及請求完成而形成的其餘錯誤，好比404等
             *   若是跨域請求在IE八、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));

 

測試代碼以下：

前端同源測試代碼

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

 

 具體代碼已封裝成一個js庫，可自我定製開發，供你們根據項目需求，本身開發定製，不過我已經封裝了一些經常使用請求

• 異步get請求  --  ajax.get
• 異步post請求  --  ajax.post
• 同步post請求  --  ajax.post_sync
• 通用配置請求  --  ajax.common

PS：該方法爲方便使用，不用的能夠直接使用精簡版本，只有common方法 

 

代碼和測試頁面已上傳github，後臺接口若是你們想測試的話，就本身寫一個把，後臺代碼就不上傳了

感謝大夥提的意見： 1. 跨域不須要在前端設置跨域請求報文頭，現已刪除 ==> author: keepfool (cnblogs)

 

　　　　　　　　 2. 更新tool方法，完善結構  ==> author: pod4g  (github)

　　　　　　　　 3. 去除參數中的跨域設置，post方法已經支持跨域   ==>author: wYhooo  (github)

 

 

github地址：https://github.com/GerryIsWarrior/ajax     但願你們多點幾顆星，增長精簡版本，只有common方法的版本

 

PS：連續搞了半個月的研究，研究ajax的設計方案，整體說來仍是有很大的收穫的，對瀏覽器的瞭解，js的瞭解，服務器技術的瞭解，後端的溫習仍是有很大的進步的，特別是解決問題的能力，感受又上了一個level，雖然暫時還沒去大公司，還在小公司遊蕩，可是從沒有放棄對技術執着的追求。下一個目標bat，但願能夠經過個人努力，進去，再接受一番洗禮。不過到時候有人內推就行了，哎。爲了前端架構師的夢想，爲了本身的前端架構，繼續加油努力下去。技術的將來，不會遠...

 

我的介紹

性別：男

愛好：女

近期目標：前端架構師

職業目標：全棧架構師

github地址：https://github.com/GerryIsWarrior