node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析

小編給大家分享一下node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為保德等服務(wù)建站，保德等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為保德企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

首先咱們來看一下簡單的http協(xié)議。

瀏覽器在和服務(wù)端進行通訊的時候，發(fā)送的所有請求基本都是基于http協(xié)議。

http協(xié)議最簡單的模型是：請求--->處理--->響應(yīng)。

請求的時候發(fā)送的信息被稱為請求報文。

請求報文包含以下三個部分：

請求行(請求報文行)
請求頭(請求報文頭)
請求體(請求報文體)

每次請求必須包含這三部分，一張圖演示如下：

node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析

這個信息可以在瀏覽器的network控制欄中可以看到，如圖：

node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析

上面的圖還是有些使人疑惑，哪些信息屬于請求行，哪些信息屬于請求頭，哪些信息屬于請求體呢？如圖所示：

node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析

先說請求行，請求行中包含三個基本信息：

ａ、請求方法

ｂ、請求的url

ｃ、協(xié)議版本。

前兩項請求方法和請求的url是可以通過javascript代碼可以設(shè)置的，而協(xié)議版本是由瀏覽器控制的。

請求頭中攜帶的信息的格式一般都是鍵值對，大部分是按照http協(xié)議規(guī)范來設(shè)置的，比如Content-Type:application/x-www-form-urlencoded、Content-Type:application/json、Content-Type:multipart/form-data。請求頭中的信息一般用來標(biāo)識此次請求的一些規(guī)范信息，比方說上面提到的三個常用請求頭，這三個請求頭是標(biāo)識請求體中信息傳遞的格式。除了標(biāo)識請求體中的格式還有其他的作用，標(biāo)識這個請求來自何方的Referer請求頭，是否應(yīng)用緩存的Cache-Control請求頭，標(biāo)識客戶端信息的User-Agent請求頭...等等。

這里需要注意的是，客戶端設(shè)置請求頭分為兩種情況，一種是按照http協(xié)議規(guī)范嚴格設(shè)置請求頭，例如有些請求頭客戶端不能由用戶自己設(shè)置，如下：

node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析

另外一種情況是自定義設(shè)置請求頭，設(shè)置這種請求頭時也需要注意，1、不能和規(guī)范名稱沖突，2、不同域名下發(fā)送ajax請求設(shè)置自定義請求頭，服務(wù)器端必須設(shè)置一個特殊的響應(yīng)頭“Access-Control-Allow-Header:*”。

以上便是請求頭設(shè)置需要注意的內(nèi)容，下面說一下請求體，當(dāng)客戶端發(fā)送get請求時一般不會設(shè)置請求體，如果個請求需要傳遞參數(shù)，一般是拼接到url中，也就是在請求行中設(shè)置參數(shù)。

只有發(fā)送post請求時才會設(shè)置請求體，設(shè)置請求體時需要注意請求體的格式，一般大家使用jquery發(fā)送post請求時會自動將數(shù)據(jù)轉(zhuǎn)換成查詢字符串格式，也就是name=zs&age=18，這樣格式的數(shù)據(jù)。并且請求頭中會設(shè)置Content-Type:application/x-www-form-urlencoded這個請求頭。這是模仿表單提交數(shù)據(jù)的格式。之所以設(shè)置請求頭，就是要告訴后端服務(wù)器，發(fā)送的數(shù)據(jù)格式是這個格式的。

而有些同學(xué)在用一些vue框架或者react框架的時候，會使用axios這個庫去發(fā)送post請求，這個庫是默認把數(shù)據(jù)也就是請求體設(shè)置成json格式，并默認加上Content-Type:application/json這個請求頭，所以大家在使用的時候要注意區(qū)分。這里為什么要著重強調(diào)這一點呢？因為這里需要和服務(wù)端人員約定好，你傳遞數(shù)數(shù)據(jù)的格式，不然服務(wù)器端不知道你傳遞的數(shù)據(jù)格式就不能正確的將請求體中的信息解析出來。舉個簡單的例子，請求體中的數(shù)據(jù)格式是查詢字符串，服務(wù)器端只支持json格式解析，這就會出現(xiàn)錯誤。

上面簡單說了一下http請求，接下來說下用XMLHttpRequest這個構(gòu)造函數(shù)來發(fā)送一個請求，先來看一下發(fā)送get請求：

node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析

在第三步設(shè)置請求頭時為了個大家演示setRequestHeader的用法，設(shè)置了一個自定義請求頭。

這里面需要注意的是：

1、調(diào)用open方法設(shè)置請求行中的請求方法和請求url，不能設(shè)置http版本，前面說過了。版本由瀏覽器控制。

2、調(diào)用setRequestHeader方法設(shè)置請求頭，這個步驟只能放在open方法之后。

3、設(shè)置完請求頭和請求行之后就是設(shè)置請求體了，這里需要注意的是，send方法既可以設(shè)置請求體，也是發(fā)送請求。get請求不需要設(shè)置請求體，post如果傳遞數(shù)據(jù)，則將指定格式的數(shù)據(jù)傳入send方法中，為什么是指定數(shù)據(jù)呢，如果你前面設(shè)置請求頭設(shè)置的是Content-Type:application/x-www-form-urlencoded，那么數(shù)據(jù)就是查詢字符串格式的，如果是Content-Type:application/json那么傳入的數(shù)據(jù)就是json格式的。

最后一步就是設(shè)置回調(diào)函數(shù)，回調(diào)函數(shù)設(shè)置的位置，既可以放在前面也可以放在后面，放在前面所有狀態(tài)都可以監(jiān)聽到，放在后面有些狀態(tài)就監(jiān)聽不到了，但這不影響數(shù)據(jù)的發(fā)送，和接收響應(yīng)數(shù)據(jù)。

只有在這個回調(diào)函數(shù)中才能通過得到xhr的response屬性值。

下面來看一下post請求的發(fā)送：

node.js中從http規(guī)范角度來看xmlhttprequest發(fā)送請求的示例分析