摘要:編碼請求主體的請求包括一個請求主體,將會包含客戶端傳遞給服務器的數據,表單編碼的請求表單,當用戶提交表單時,表單中的數據將會編碼到字符串中,一并伴隨著請求發送。默認情況下表單通過方法發送給服務器,而編碼后的表單數據為請求主體。
編碼請求主體
HTTP的POST請求包括一個請求主體,將會包含客戶端傳遞給服務器的數據,
HTML表單,當用戶提交表單時,表單中的數據將會編碼到字符串中,一并伴隨著請求發送。
默認情況下HTML表單通過POST方法發送給服務器,而編碼后的表單數據為請求主體。
規則:使用URL編碼,使用等號把編碼后的名字和值分開,并使用&符號將名/值對分開。
如下所示: find=pizza&zipcode=02134&redius=1km
表單數據編碼格式會有一個正式的MIME類型
application/x-www-form-urlencoded
MIME 多用途internet郵件擴展類型,對大小寫不敏感,傳統寫法小寫一個栗子
用于HTTP請求的編碼對象
/* * 編碼對象的屬性 * 如果它們是來自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請求結果
同樣的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); }
效果如下
需要在將其更改為
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發送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");
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108217.html
摘要:報文用于協議交互的信息被稱為報文。現在出現的各種首部字段及狀態碼稍后會闡述。狀態碼響應報文包含了多個范圍的內容使用。如果服務器無法響應范圍請求,則會返回狀態碼和完整的實體內容。 showImg(https://segmentfault.com/img/bVbthNL?w=900&h=500); http報文 用于HTTP協議交互的信息被稱為HTTP報文。請求端的http報文叫做請求報文...
摘要:狀態行包含表明響應結果的狀態碼,原因短語和版本。這種把實體主體分塊的功能稱為分塊傳輸編碼。如果服務器端無法響應范圍請求,則會返回狀態碼和完整的實體內容。 HTTP 報文內的 HTTP 信息 HTTP 通信過程包括從客戶端發往服務器端的請求及從服務器端返回 客戶端的響應。 一. HTTP報文 用于 HTTP 協議交互的信息被稱為 HTTP 報文。請求端(客戶端)的 HTTP 報文叫做...
摘要:狀態行包含表明響應結果的狀態碼,原因短語和版本。這種把實體主體分塊的功能稱為分塊傳輸編碼。如果服務器端無法響應范圍請求,則會返回狀態碼和完整的實體內容。 HTTP 報文內的 HTTP 信息 HTTP 通信過程包括從客戶端發往服務器端的請求及從服務器端返回 客戶端的響應。 一. HTTP報文 用于 HTTP 協議交互的信息被稱為 HTTP 報文。請求端(客戶端)的 HTTP 報文叫做...
摘要:報文用于協議交互的信息被稱為報文。報文本身是由多行數據構成的字符串文本。首部字段包含表明請求和響應的各種條件和屬性的各類首部。報文的主體用于傳輸請求或響應的實體主體。協議中有一種被稱為內容編碼的功能也能進行類似的操作。 HTTP報文 用于HTTP協議交互的信息被稱為報文。 請求端(客戶端)的HTTP報文叫做請求報文,響應端(服務器端)的叫做響應報文。 HTTP報文本身是由多行數據構成...
閱讀 2683·2021-09-26 10:19
閱讀 2135·2021-09-24 10:27
閱讀 2519·2021-09-01 10:42
閱讀 2302·2019-08-29 16:09
閱讀 2485·2019-08-29 15:17
閱讀 1447·2019-08-29 15:09
閱讀 633·2019-08-29 11:14
閱讀 2301·2019-08-26 13:25