摘要：內(nèi)部怎么實(shí)現(xiàn)的使用一個(gè)文件來(lái)模擬服務(wù)器返回，代碼如下請(qǐng)求的發(fā)送實(shí)際上我們都通過(guò)瀏覽器的實(shí)現(xiàn)，使用，不考慮的兼容，我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的請(qǐng)求如下。

使用一個(gè)php文件來(lái)模擬服務(wù)器返回，php代碼如下

請(qǐng)求的發(fā)送實(shí)際上我們都通過(guò)瀏覽器的XMLHttpRequest實(shí)現(xiàn)，ie6使用ActiveXObject，不考慮IE6的兼容，我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的xhr請(qǐng)求如下。

0：剛剛創(chuàng)建初始狀態(tài)
1：已連接
2：已發(fā)送
3：已接受-頭（32k上限）
4：已接受-body（1G上限）

1XX 消息
2XX 成功
3XX 重定向
    301 永久重定向——瀏覽器永遠(yuǎn)不會(huì)再次請(qǐng)求老的地址
    302 臨時(shí)重定向——瀏覽器下次還會(huì)請(qǐng)求老地址
    304 （not modified）重定向到緩存請(qǐng)求——因此304也是成功
4XX 請(qǐng)求錯(cuò)誤，客戶(hù)端錯(cuò)誤
5XX 服務(wù)端錯(cuò)誤
6XX 擴(kuò)展錯(cuò)誤碼

因此可以通過(guò)2XX和304的狀態(tài)碼判斷請(qǐng)求成功。

    // 接收;4代表結(jié)束
    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 文本數(shù)據(jù)
xhr.responseXML XML數(shù)據(jù)（已經(jīng)不常用）

xml數(shù)據(jù)是不固定標(biāo)簽組成的數(shù)據(jù)，xml數(shù)據(jù)更加占空間，例如：

    xiaoyezi
    18
    front engineer

json格式：

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

按照我們上面代碼的思路，post請(qǐng)求的寫(xiě)法推導(dǎo)出來(lái)應(yīng)該是如下寫(xiě)法，實(shí)際上如下寫(xiě)法并不行。

// 連接,true代表異步，false代表同步;瀏覽器對(duì)異步的xhr會(huì)報(bào)錯(cuò)
xhr.open("post","../server/a.php",true,);

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

對(duì)比f(wàn)orm的post提交方式，我們可以看到，Request Headers里面有條設(shè)置和form提交的不同：

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

需要增加setRequestHeader的設(shè)置，再send請(qǐng)求的body內(nèi)容，請(qǐng)求成功。

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

content-type類(lèi)型及含義？

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

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

    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代表同步;瀏覽器對(duì)異步的xhr會(huì)報(bào)錯(cuò)
    if (options.type == "get"){
        xhr.open("get",options.url + "?" + dataStr,true);
        xhr.send();
    } else {
        xhr.open("post",options.url,true,);

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

    // 接收;4代表結(jié)束
    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");
            }
        }
    };
}