在Web開發(fā)中，請(qǐng)求(request)是一個(gè)非常重要的概念。在前后端分離的趨勢(shì)下，前端開發(fā)人員需要了解如何獲取請(qǐng)求信息以便完成特定的業(yè)務(wù)需求。在Javascript中，獲取請(qǐng)求信息的方式很多，例如獲取URL參數(shù)，請(qǐng)求頭部信息等。下面將簡(jiǎn)單介紹Javascript中獲取請(qǐng)求(request)的相關(guān)內(nèi)容。
獲取URL參數(shù)
想必大家都使用過在URL中通過查詢參數(shù)的方式傳遞數(shù)據(jù)。例如：http://www.example.com/?id=1&name=Bob。獲取URL參數(shù)可以通過JavaScript中的window.location.search屬性來(lái)實(shí)現(xiàn)。該屬性可以獲取當(dāng)前URL的查詢參數(shù)部分（以'?'開頭）。
// 獲取URL中的查詢參數(shù)
const queryString = window.location.search;
// 解析查詢參數(shù)為Object
const queryParams = new URLSearchParams(queryString);
// 獲取指定參數(shù)的值
const id = queryParams.get('id');
const name = queryParams.get('name');// 創(chuàng)建新的XMLHttpRequest對(duì)象
const xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求URL和請(qǐng)求方法
xhr.open('GET', '/api/user', true);
// 監(jiān)聽文檔就緒狀態(tài)改變事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取響應(yīng)頭部信息
const contentType = xhr.getResponseHeader('Content-Type');
const contentLength = xhr.getResponseHeader('Content-Length');
}
};
// 發(fā)送請(qǐng)求
xhr.send();// 創(chuàng)建表單數(shù)據(jù)對(duì)象
const formData = new FormData();
formData.append('username', 'user1');
formData.append('password', '123456');
// 創(chuàng)建新的XMLHttpRequest對(duì)象
const xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求URL和請(qǐng)求方法
xhr.open('POST', '/login', true);
// 監(jiān)聽文檔就緒狀態(tài)改變事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理響應(yīng)數(shù)據(jù)
console.log(xhr.responseText);
}
};
// 發(fā)送請(qǐng)求
xhr.send(formData);