摘要：編碼請(qǐng)求主體的請(qǐng)求包括一個(gè)請(qǐng)求主體，將會(huì)包含客戶端傳遞給服務(wù)器的數(shù)據(jù)，表單編碼的請(qǐng)求表單，當(dāng)用戶提交表單時(shí)，表單中的數(shù)據(jù)將會(huì)編碼到字符串中，一并伴隨著請(qǐng)求發(fā)送。默認(rèn)情況下表單通過方法發(fā)送給服務(wù)器，而編碼后的表單數(shù)據(jù)為請(qǐng)求主體。

編碼請(qǐng)求主體
HTTP的POST請(qǐng)求包括一個(gè)請(qǐng)求主體，將會(huì)包含客戶端傳遞給服務(wù)器的數(shù)據(jù)，

HTML表單，當(dāng)用戶提交表單時(shí)，表單中的數(shù)據(jù)將會(huì)編碼到字符串中，一并伴隨著請(qǐng)求發(fā)送。
默認(rèn)情況下HTML表單通過POST方法發(fā)送給服務(wù)器，而編碼后的表單數(shù)據(jù)為請(qǐng)求主體。

規(guī)則：使用URL編碼，使用等號(hào)把編碼后的名字和值分開，并使用&符號(hào)將名/值對(duì)分開。

如下所示: find=pizza&zipcode=02134&redius=1km

表單數(shù)據(jù)編碼格式會(huì)有一個(gè)正式的MIME類型

application/x-www-form-urlencoded

MIME 多用途internet郵件擴(kuò)展類型,對(duì)大小寫不敏感，傳統(tǒng)寫法小寫

用于HTTP請(qǐng)求的編碼對(duì)象

/*
 *    編碼對(duì)象的屬性
 *    如果它們是來自HTML表單的名/值對(duì)，使用application/x-www-form-urlencolded
 *    將鍵值對(duì)轉(zhuǎn)換為HTTP的編碼方式的一個(gè)工具函數(shù)
 */

function encodeFormData(data) {
    if (!data) return "";    // 如果傳入為空，直接返回字符串
    var pairs = [];    // 保存名/值對(duì)
    for(var name in data) {    // 進(jìn)行遍歷
        if (!data.hasOwnProperty(name))    continue;    // 跳過繼承屬性,指示自身的屬性是否具有該值
        if (typeof data[name] === "function") continue;    // 跳過方法
        var value = data[name].toString();    // 將值轉(zhuǎn)換成字符串
        name = encodeURIComponent(name.replace("%20", "+"));    
        value = encodeURIComponent(value.replace("%20", "+"));
        pairs.push(name + "=" + value);    // 記住名值對(duì)
    }

    return pairs.join("&");    // 進(jìn)行連接
}

上方代碼將傳入的鍵值對(duì)，轉(zhuǎn)換為url的方式提交

function postData(url, data, callback) {
    var request = new XMLHttpRequest();    // 新建一個(gè)類
    request.open("post", url);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && callback) {
            callback(request);    // 調(diào)用回調(diào)函數(shù)
        };
        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        
    }
    request.send(encodeFormData(data));
}

上方的代碼將會(huì)發(fā)送一個(gè)post請(qǐng)求，將鍵值對(duì)轉(zhuǎn)換為標(biāo)準(zhǔn)的url進(jìn)行提交

var e = {e:2222220};
postData("./", e);

查看一下post請(qǐng)求結(jié)果

同樣的get請(qǐng)求

function getData(url, data, callback) {
    var request = new XMLHttpRequest();
    request.open("GET", url + "?" + encodeFormData(data));
    request.onreadystatechange = () => {
        if (request.readyState === 4 && callback) {
            callback(request);
        }
    }
    request.send(null);
}

效果如下

需要在將其更改為

application/json

即可以進(jìn)行表單提交

function postJSON(url, data, callback) {
    var request = new XMLHttpRequest();
    request.open("post", url);
    request.onreadystatechange = () => {
        if (request.readystate === 4 && callback) {
            callback(request);
        };
    }
    request.setRequestHeader("Content-Type", "application/json");
    request.send(JSON.stringify(data))
}

演示如下

psotJSON("./", e);

xml文檔作為主體的HTTP POST請(qǐng)求

function postQuery(url, what, where, radius, callback) {
    var request = new XMLHttpRequest();    
    request.open("post", url);    // 對(duì)指定的url發(fā)送POST請(qǐng)求
    request.onreadystatechange = () => {
        if (request.readyState === 4 && callback) callback(request);
    }

    // 下面開始使用XML
    var doc = document.implementation.createDocument("", "query", null);    // document.implementaton 返回一個(gè)DOMImplementation對(duì)象，該對(duì)象和當(dāng)前文檔的節(jié)點(diǎn)沒有任何關(guān)系（類似于一個(gè)虛擬節(jié)點(diǎn)）其根節(jié)點(diǎn)為qqery 并且沒有聲明
    var query = doc.documentElement;    // 返回文檔的根元素
    var find = doc.createElement("find");    // 創(chuàng)建一個(gè)find元素
    query.appendChild(find);    // 讓find成為query的子節(jié)點(diǎn)
    find.setAttribute("zipcode", where);    // 創(chuàng)建一個(gè)屬性
    find.setAttribute("radius", radius);    
    find.appendChild(doc.createTextNode(what));    // what作為文本節(jié)點(diǎn)，并且設(shè)置為find的子節(jié)點(diǎn)

    // 現(xiàn)在向服務(wù)器發(fā)送XML編碼的數(shù)據(jù)
    // 將會(huì)自動(dòng)設(shè)置Content-Type頭
    request.send(doc);
};

查看結(jié)果

postQuery("./", "hello", "world", "world");

打開網(wǎng)絡(luò)面板查看

當(dāng)HTML表單包含文件上傳元素的時(shí)候，表單需要使用二進(jìn)制上傳，即

multipart/form-data

使用post方法發(fā)送multipart/form-data請(qǐng)求主體

XHR 為一種簡(jiǎn)稱，全稱為XMLHttpRequest

將會(huì)以一個(gè)字節(jié)一個(gè)字節(jié)發(fā)送

function postFormData(url, data, callback) {
    if (typeof FormData === "undefined") {     // 兼容，判斷該api是否存在
        throw new Error("not FormData");
    }

    var request = new XMLHttpRequest();
    request.open("post", url);
    request.onreadystechange = () => {    // 當(dāng)響應(yīng)完成的時(shí)候，回調(diào)函數(shù)
        if (request.readyState === 4 && callback)
            callback(request);    // 如果存在，則調(diào)用回調(diào)函數(shù)
    };
    var formdata = new FormData();    // 創(chuàng)建文件上傳的類
    for(var name in data) {
        if (!data.hasOwnProperty(name)) continue;    // 跳過繼承的屬性
        var value = data[name];    // 取值
        if (typeof value === "function") continue;    // 跳過方法
        // 將其鍵值對(duì)插入節(jié)點(diǎn)中
        formdata.append(name, value);    // 添加鍵值對(duì)作為子節(jié)點(diǎn)
    }
    // 由于使用FormData將會(huì)自動(dòng)設(shè)置頭部信息
    // 將鍵值對(duì)作為主體進(jìn)行發(fā)送
    request.send(formdata);
}

postFormData("./", "11111111111111");