摘要：內部怎么實現的使用一個文件來模擬服務器返回，代碼如下請求的發送實際上我們都通過瀏覽器的實現，使用，不考慮的兼容，我們實現一個簡單的請求如下。

使用一個php文件來模擬服務器返回，php代碼如下

請求的發送實際上我們都通過瀏覽器的XMLHttpRequest實現，ie6使用ActiveXObject，不考慮IE6的兼容，我們實現一個簡單的xhr請求如下。

0：剛剛創建初始狀態
1：已連接
2：已發送
3：已接受-頭（32k上限）
4：已接受-body（1G上限）

1XX 消息
2XX 成功
3XX 重定向
    301 永久重定向——瀏覽器永遠不會再次請求老的地址
    302 臨時重定向——瀏覽器下次還會請求老地址
    304 （not modified）重定向到緩存請求——因此304也是成功
4XX 請求錯誤，客戶端錯誤
5XX 服務端錯誤
6XX 擴展錯誤碼

因此可以通過2XX和304的狀態碼判斷請求成功。

    // 接收;4代表結束
    xhr.onreadystatechange = function(){
        if (xhr.readyState ==4){
            if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                alert("成功:"+xhr.responseText);
                console.log(xhr);
            } else {
                alert("失敗");
            }
        }
    };

xhr.responseText 文本數據
xhr.responseXML XML數據（已經不常用）

xml數據是不固定標簽組成的數據，xml數據更加占空間，例如：

    xiaoyezi
    18
    front engineer

json格式：

let json={name:"xiaoyezi",age:18,job:"front engineer"};

按照我們上面代碼的思路，post請求的寫法推導出來應該是如下寫法，實際上如下寫法并不行。

// 連接,true代表異步，false代表同步;瀏覽器對異步的xhr會報錯
xhr.open("post","../server/a.php",true,);

// 發送;send里面是body，post需要發送
xhr.send("a=12&b=5");

對比form的post提交方式，我們可以看到，Request Headers里面有條設置和form提交的不同：

Content-Type: text/plain;charset=UTF-8
form提交：Content-Type: application/x-www-form-urlencoded

需要增加setRequestHeader的設置，再send請求的body內容，請求成功。

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("a=12&b=5");

content-type類型及含義？

text/plain 文本
application/x-www-form-urlencoded &&&連接的方式，eg：a=12&b=5
multippart/form-data 定界符分割各個數據（文件上傳）

function ajax(options){
    // 數據處理
    options = options || {};
    options.data = options.data || {};
    options.type = options.type || "get";
    options.dataType = options.dataType || "text"; //解析數據

    let arr = [];
    for (let name in options.data) {
        arr.push(`${name}=${encodeURIComponent(options.data[name])}`);
    }
    let dataStr = arr.join("&");

    // 不兼容ie6
    let xhr=new XMLHttpRequest();

    // 連接,true代表異步，false代表同步;瀏覽器對異步的xhr會報錯
    if (options.type == "get"){
        xhr.open("get",options.url + "?" + dataStr,true);
        xhr.send();
    } else {
        xhr.open("post",options.url,true,);

        // 發送;send里面是body,post需要發送Content-Type
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(dataStr);
    }

    // 接收;4代表結束
    xhr.onreadystatechange = function(){
        if (xhr.readyState ==4){
            if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                let result = xhr.responseText;
                switch (options.dataType){
                    case "text":
                        break;
                    case "json":
                        if (window.JSON && JSON.parse){
                            result = JSON.parse(result);
                        } else {
                            result = eval("("+result+")");
                        }
                        break;
                    case "xml":
                        result = xhr.XMLHttpRequest;
                        break;
                    default:
                        break;

                }
                options.success && options.success(result);
            } else {
                options.error && options.error("error");
            }
        }
    };
}