編碼請求主體
HTTP的POST請求包括一個請求主體，將會包含客戶端傳遞給服務(wù)器的數(shù)據(jù)律想，
表單編碼的請求
HTML表單猎莲，當(dāng)用戶提交表單時，表單中的數(shù)據(jù)將會編碼到字符串中技即，一并伴隨著請求發(fā)送著洼。
默認(rèn)情況下HTML表單通過POST方法發(fā)送給服務(wù)器，而編碼后的表單數(shù)據(jù)為請求主體而叼。
規(guī)則：使用URL編碼身笤，使用等號把編碼后的名字和值分開，并使用&符號將名/值對分開葵陵。
如下所示: find=pizza&zipcode=02134&redius=1km
表單數(shù)據(jù)編碼格式會有一個正式的MIME類型
application/x-www-form-urlencoded
MIME 多用途internet郵件擴展類型,對大小寫不敏感液荸，傳統(tǒng)寫法小寫
一個栗子
用于HTTP請求的編碼對象
/*
* 編碼對象的屬性
* 如果它們是來自HTML表單的名/值對，使用application/x-www-form-urlencolded
* 將鍵值對轉(zhuǎn)換為HTTP的編碼方式的一個工具函數(shù)
*/
function encodeFormData(data) {
if (!data) return ''; // 如果傳入為空莹弊，直接返回字符串
var pairs = []; // 保存名/值對
for(var name in data) { // 進行遍歷
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); // 記住名值對
}
return pairs.join('&'); // 進行連接
}
上方代碼將傳入的鍵值對响迂，轉(zhuǎn)換為url的方式提交
function postData(url, data, callback) {
var request = new XMLHttpRequest(); // 新建一個類
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));
}
上方的代碼將會發(fā)送一個post請求川梅，將鍵值對轉(zhuǎn)換為標(biāo)準(zhǔn)的url進行提交
var e = {e:2222220};
postData('./', e);
查看一下post請求結(jié)果
此處輸入圖片的描述
同樣的get請求
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);
}
效果如下
此處輸入圖片的描述
JSON編碼
需要在將其更改為
application/json
即可以進行表單提交
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編碼請求
xml文檔作為主體的HTTP POST請求
function postQuery(url, what, where, radius, callback) {
var request = new XMLHttpRequest();
request.open('post', url); // 對指定的url發(fā)送POST請求
request.onreadystatechange = () => {
if (request.readyState === 4 && callback) callback(request);
}
// 下面開始使用XML
var doc = document.implementation.createDocument('', 'query', null); // document.implementaton 返回一個DOMImplementation對象，該對象和當(dāng)前文檔的節(jié)點沒有任何關(guān)系（類似于一個虛擬節(jié)點）其根節(jié)點為qqery 并且沒有聲明
var query = doc.documentElement; // 返回文檔的根元素
var find = doc.createElement('find'); // 創(chuàng)建一個find元素
query.appendChild(find); // 讓find成為query的子節(jié)點
find.setAttribute('zipcode', where); // 創(chuàng)建一個屬性
find.setAttribute('radius', radius);
find.appendChild(doc.createTextNode(what)); // what作為文本節(jié)點丢早，并且設(shè)置為find的子節(jié)點
// 現(xiàn)在向服務(wù)器發(fā)送XML編碼的數(shù)據(jù)
// 將會自動設(shè)置Content-Type頭
request.send(doc);
};
查看結(jié)果
postQuery('./', 'hello', 'world', 'world');
打開網(wǎng)絡(luò)面板查看
此處輸入圖片的描述
multipart/from-data 請求
當(dāng)HTML表單包含文件上傳元素的時候怨酝，表單需要使用二進制上傳，即
multipart/form-data
使用post方法發(fā)送multipart/form-data請求主體
XHR 為一種簡稱斤葱，全稱為XMLHttpRequest
將會以一個字節(jié)一個字節(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)完成的時候，回調(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; // 跳過方法
// 將其鍵值對插入節(jié)點中
formdata.append(name, value); // 添加鍵值對作為子節(jié)點
}
// 由于使用FormData將會自動設(shè)置頭部信息
// 將鍵值對作為主體進行發(fā)送
request.send(formdata);
}
postFormData('./', '11111111111111');
此處輸入圖片的描述
