報(bào)告，我要說(shuō)話(huà)！xp被歷史淘汰了，IE6 say goodbye了，太TM開(kāi)心了，從此不要兼容IE6了，哈哈哈哈哈哈

報(bào)告，我要說(shuō)話(huà)！IE這sb為啥不早點(diǎn)被殺掉呢，找工作聽(tīng)說(shuō)要兼容IE，立馬軟了，唉唉唉唉唉唉

報(bào)告，我要說(shuō)話(huà)！Jquery太豐富了，老子只用了幾個(gè)功能，媽的，太不劃算了，啊啊啊啊啊啊

......

好了，言歸正傳。對(duì)于想到整理ajax設(shè)計(jì)方案，原因如下：

從資源合理利用的角度以及網(wǎng)站優(yōu)化角度去想，每次為了那幾個(gè)功能，去引用一個(gè)框架，不劃算

拜讀了w3c的ajax的設(shè)計(jì)方案，包括level1和level2的規(guī)范，有種豁然開(kāi)朗的感覺(jué)

有朋友遇到ajax的跨域方案，各種糾結(jié)在心里，導(dǎo)致內(nèi)心不能舒暢

自己的框架底層也要需要用到ajax的基礎(chǔ)功能，（get post請(qǐng)求，對(duì)于level2的上傳暫時(shí)沒(méi)用到）

最關(guān)鍵的也是之前對(duì)這塊概念十分模糊，所以開(kāi)始整理ajax這塊的設(shè)計(jì)方案

?

介紹一些概念：

瀏覽器的同源策略：瀏覽器最基本的安全功能，同源是指，域名，協(xié)議，端口相同（所以我寫(xiě)的接口部署端口分別為1122和2211即不是同源，屬于跨域）

ajax：是一種技術(shù)方案，依賴(lài)的是CSS/HTML/Javascript，最核心依賴(lài)是瀏覽器提供的XMLHttpRequest對(duì)象，這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)。

XMLHttpRequest Level 1主要存在以下缺點(diǎn):

　　受同源策略的限制，不能發(fā)送跨域請(qǐng)求；

? ? ? 不能發(fā)送二進(jìn)制文件（如圖片、視頻、音頻等），只能發(fā)送純文本數(shù)據(jù)；

? ? ? 發(fā)送和獲取數(shù)據(jù)的過(guò)程中，無(wú)法實(shí)時(shí)獲取進(jìn)度信息，只能判斷是否完成；

XMLHttpRequest Level 2中新增了以下功能:

　　可以發(fā)送跨域請(qǐng)求，在服務(wù)端允許的情況下；

　　支持發(fā)送和接收二進(jìn)制數(shù)據(jù)；

　　新增formData對(duì)象，支持發(fā)送表單數(shù)據(jù)；

　　發(fā)送和獲取數(shù)據(jù)時(shí)，可以獲取進(jìn)度信息；

　　可以設(shè)置請(qǐng)求的超時(shí)時(shí)間；

XMLHttpRequest 兼容性如下：

nginx：是一個(gè)高性能的HTTP和反向代理服務(wù)器

IIS:微軟開(kāi)發(fā)的的服務(wù)器，window系統(tǒng)自帶

?

開(kāi)始準(zhǔn)備如下：

純前端代碼

nginx反向代理服務(wù)器（前后端分離用）

后臺(tái)2套接口（端口：1122，端口：2211） ?PS：一份必須支持跨域請(qǐng)求

IIS服務(wù)器（部署后臺(tái)接口）

chrome插件postman（接口測(cè)試）

IE、chrome、firefox、Opera、safari、edge 6大瀏覽器，做兼容性測(cè)試

?

XMLHttpRequest發(fā)送請(qǐng)求步驟：

實(shí)例化XMLHttpRequest對(duì)象（IE8-9是微軟封裝的ActiveXObject('Microsoft.XMLHTTP')）獲得一個(gè)實(shí)例

通過(guò)實(shí)例open一個(gè)請(qǐng)求，設(shè)置發(fā)送類(lèi)型和接口以及同異步

如有需要配置報(bào)文，以及各種事件（success，error，timeout等）

調(diào)用實(shí)例的send方法，發(fā)送http/https的請(qǐng)求

服務(wù)器回調(diào)，客戶(hù)端接收，并做響應(yīng)處理

?

代碼關(guān)鍵點(diǎn)如下：

//創(chuàng)建xhr對(duì)象
    var xhr = createXhrObject();

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

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

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

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

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

    //判斷并設(shè)置跨域頭部信息
    (ajaxSetting.crossDomain)?(xhr = addCoreHeader(xhr,ajaxSetting)):(null);

    //onload事件（IE8下沒(méi)有該事件）
    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的問(wèn)題，以及請(qǐng)求完成而造成的其他錯(cuò)誤，比如404等
             *   如果跨域請(qǐng)求在IE8、9下跨域失敗不走onerror方法
             *       其他支持了Level 2 的版本 直接走onerror
             * */
            ajaxSetting.error(e.currentTarget.status, e.currentTarget.statusText);
        }
    };

    //xmlhttprequest每次變化一個(gè)狀態(tài)所監(jiān)控的事件（可拓展）
    xhr.onreadystatechange = function(){
        switch(xhr.readyState){
            case 1://打開(kāi)
                //do something
                break;
            case 2://獲取header
                //do something
                break;
            case 3://請(qǐng)求
                //do something
                break;
            case 4://完成
                //在ie8下面，無(wú)xhr的onload事件，只能放在此處處理回調(diào)結(jié)果
                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超時(shí)事件
    xhr.ontimeout = function(e){
        ajaxSetting.timeout(999,e?(e.type):("timeout"));   //IE8 沒(méi)有e參數(shù)
        xhr.abort();  //關(guān)閉請(qǐng)求
    };

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

    xhr.send((function(result){this.postParam == undefined?(result =null):(result=this.postParam);return result;})(this.postParam));

測(cè)試代碼如下：

前端同源測(cè)試代碼

ajax.post("/api/ajax1/ajaxT1/",{"name":"測(cè)試異步post請(qǐng)求","age":"success"},function(data){alert(data)});  //該接口在1122上

前端跨域測(cè)試代碼

ajax.post_cross("http://192.168.0.3:2211/api/weixin/ajaxT2/",{"name":"測(cè)試跨域post請(qǐng)求","age":"success"},function(data){alert(data)});

后端跨域接口代碼

/// <summary>
   /// 測(cè)試跨域請(qǐng)求
   /// </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>
/// 測(cè)試ajax同源請(qǐng)求
/// </summary>
/// <param qwer="code"></param>
/// <returns>result</returns>
[Route("ajaxT2")]
public String GetkuaAjaxT1(string name,string age)
{
    String result = "1J跨域成功:" + name + "-" + age;
    return result;
}

下面是各種瀏覽器的測(cè)試結(jié)果（僅提供同源post請(qǐng)求和跨域post請(qǐng)求）：

同源測(cè)試：

chrome

IE8-9

IE10+

firefox

opera

safari

edge

?

跨域測(cè)試：

chrome

IE8-9

IE10+

firefox

opera

safari

edge

?具體代碼已封裝成一個(gè)js庫(kù)，供大家根據(jù)項(xiàng)目需求，自己開(kāi)發(fā)定制，不過(guò)我已經(jīng)封裝了一些常用請(qǐng)求：

異步get請(qǐng)求 ?-- ?ajax.get

異步post請(qǐng)求 ?-- ?ajax.post

同步get請(qǐng)求 ?-- ?ajax.get_sync

同步post請(qǐng)求 ?-- ?ajax.post_sync

跨域get請(qǐng)求 ?-- ?ajax.get_cross

跨域post請(qǐng)求 ?-- ?ajax.post_cross

通用配置請(qǐng)求 ?-- ?ajax.common

?

代碼和測(cè)試頁(yè)面已上傳github，后臺(tái)接口如果大家想測(cè)試的話(huà)，就自己寫(xiě)一個(gè)把，后臺(tái)代碼就不上傳了，關(guān)鍵壓縮完了只有4K！