node.js中從http規范角度來看xmlhttprequest發送請求的示例分析

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

首先咱們來看一下簡單的http協議。

瀏覽器在和服務端進行通訊的時候，發送的所有請求基本都是基于http協議。

http協議最簡單的模型是：請求--->處理--->響應。

請求的時候發送的信息被稱為請求報文。

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

1. 請求行(請求報文行)
   

2. 請求頭(請求報文頭)

3. 請求體(請求報文體)

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

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

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

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

ａ、請求方法

ｂ、請求的url

ｃ、協議版本。

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

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

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

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

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

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

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

上面簡單說了一下http請求，接下來說下用XMLHttpRequest這個構造函數來發送一個請求，先來看一下發送get請求：

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

這里面需要注意的是：

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

2、調用setRequestHeader方法設置請求頭，這個步驟只能放在open方法之后。

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

最后一步就是設置回調函數，回調函數設置的位置，既可以放在前面也可以放在后面，放在前面所有狀態都可以監聽到，放在后面有些狀態就監聽不到了，但這不影響數據的發送，和接收響應數據。

只有在這個回調函數中才能通過得到xhr的response屬性值。

下面來看一下post請求的發送：

我設置了請求頭，并在send中傳遞了數據，數據格式與請求頭一致，都是查詢字符串格式。

看一下network：

如果將請求頭改成json格式呢？那么send中的數據格式也要改成json。正確演示如下：

network演示如下：

這里面需要注意的是，使用xmlhttprequest發送post請求如果不設置請求頭會是什么樣的呢？如圖將設置請求頭的函數全部注釋掉：

查看network：

xmlhttprequest會自動設置Content-Type: text/plain;charset=UTF-8請求頭。

看完了這篇文章，相信你對“node.js中從http規范角度來看xmlhttprequest發送請求的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！