編碼請求主體
HTTP的POST請求包括一個請求主體,將會包含客戶端傳遞給服務器的數據,json
HTML表單,當用戶提交表單時,表單中的數據將會編碼到字符串中,一併伴隨着請求發送。
默認狀況下HTML表單經過POST方法發送給服務器,而編碼後的表單數據爲請求主體。api
規則:使用URL編碼,使用等號把編碼後的名字和值分開,並使用&符號將名/值對分開。
以下所示: find=pizza&zipcode=02134&redius=1km服務器
表單數據編碼格式會有一個正式的MIME類型網絡
application/x-www-form-urlencoded
MIME 多用途internet郵件擴展類型,對大小寫不敏感,傳統寫法小寫
用於HTTP請求的編碼對象app
/* * 編碼對象的屬性 * 若是它們是來自HTML表單的名/值對,使用application/x-www-form-urlencolded * 將鍵值對轉換爲HTTP的編碼方式的一個工具函數 */ 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(); // 將值轉換成字符串 name = encodeURIComponent(name.replace('%20', '+')); value = encodeURIComponent(value.replace('%20', '+')); pairs.push(name + '=' + value); // 記住名值對 } return pairs.join('&'); // 進行鏈接 }
上方代碼將傳入的鍵值對,轉換爲url的方式提交函數
function postData(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/x-www-form-urlencoded'); } request.send(encodeFormData(data)); }
上方的代碼將會發送一個post請求,將鍵值對轉換爲標準的url進行提交工具
var e = {e:2222220}; postData('./', e);
查看一下post請求結果
post
一樣的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); }
效果以下
url
須要在將其更改成
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文檔做爲主體的HTTP POST請求
function postQuery(url, what, where, radius, callback) { var request = new XMLHttpRequest(); request.open('post', url); // 對指定的url發送POST請求 request.onreadystatechange = () => { if (request.readyState === 4 && callback) callback(request); } // 下面開始使用XML var doc = document.implementation.createDocument('', 'query', null); // document.implementaton 返回一個DOMImplementation對象,該對象和當前文檔的節點沒有任何關係(相似於一個虛擬節點)其根節點爲qqery 而且沒有聲明 var query = doc.documentElement; // 返回文檔的根元素 var find = doc.createElement('find'); // 建立一個find元素 query.appendChild(find); // 讓find成爲query的子節點 find.setAttribute('zipcode', where); // 建立一個屬性 find.setAttribute('radius', radius); find.appendChild(doc.createTextNode(what)); // what做爲文本節點,而且設置爲find的子節點 // 如今向服務器發送XML編碼的數據 // 將會自動設置Content-Type頭 request.send(doc); };
查看結果
postQuery('./', 'hello', 'world', 'world');
打開網絡面板查看
當HTML表單包含文件上傳元素的時候,表單須要使用二進制上傳,即
multipart/form-data
使用post方法發送multipart/form-data請求主體
XHR 爲一種簡稱,全稱爲XMLHttpRequest
將會以一個字節一個字節發送
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 = () => { // 當響應完成的時候,回調函數 if (request.readyState === 4 && callback) callback(request); // 若是存在,則調用回調函數 }; var formdata = new FormData(); // 建立文件上傳的類 for(var name in data) { if (!data.hasOwnProperty(name)) continue; // 跳過繼承的屬性 var value = data[name]; // 取值 if (typeof value === 'function') continue; // 跳過方法 // 將其鍵值對插入節點中 formdata.append(name, value); // 添加鍵值對做爲子節點 } // 因爲使用FormData將會自動設置頭部信息 // 將鍵值對做爲主體進行發送 request.send(formdata); }
postFormData('./', '11111111111111');