編碼請求主體

編碼請求主體
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

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發送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');

打開網絡面板查看
此處輸入圖片的描述

multipart/from-data 請求

當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');

此處輸入圖片的描述

相關文章
相關標籤/搜索