技術文章 » JS ajax請求

JS ajax請求

2022-03-15 19:00:19
 Ajax 請求通常會有 get 和post兩種方式，接下來我們會通過以下 3 部分的內容來具體講解。

  • get 方式和 post 方式的區別。
  • 使用 get 方式和 post 方式需要注意的點。
  • get 方式和 post 方式的使用場景。

get 方式和 post 方式的區別

使用 get 方式和 post 方式都可以向伺服器傳送請求，只是傳送的機制不同，主要體現在以下幾點：

  • 引數傳遞。

get 請求會將引數新增到請求 URL 的後面，沒有請求主體，呼叫 send() 函數時，傳遞的引數為 null，即 xhr.send()；

post 請求的資料會放請求體中，使用者是無法通過 URL 直接看到的，呼叫 send() 函數時，傳遞的引數為 data，即 xhr.send(data)。

  • 伺服器端引數獲取。

使用 Express 作為伺服器端框架，get 請求通過 Request.query 來獲取引數；而使用 post 請求時需要新增中介軟體，同時通過 Request.body 來獲取引數。

  • 傳遞的資料量。

get 請求傳輸的資料量小，對於不同的瀏覽器有所差異，Chrome 瀏覽器限制為 8K，IE 限制為 2K；

post 請求傳遞的資料量大，一般預設不受限制，但實際上伺服器會規定 post 請求傳遞的資料量大小。

  • 安全性。

get 請求安全性較低，因為其請求的引數會出現在 URL 上，而且採用明文進行資料傳輸，通過瀏覽器快取或者歷史記錄可以很容易獲取到某些隱私請求的引數；

post 請求通過請求體進行資料傳輸，資料不會出現在 URL 上，隱藏了請求資料的資訊，安全性較高。

  • 處理 form 表單的差異性。

在使用 form 表單進行提交時，get 請求和 post 請求也會體現出很大的差異性，我們以下面這段 form 表單程式碼為例進行講解。 
<form name="userForm" method="get" action="/getUser?param=面試廳" class="container">
    <div class="form-group">
        <label for="username">使用者名稱</label>
        <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="form-group">
        <label for="password">密碼</label>
        <input type="password" class="form-control" id="password" name="password">
    </div>
    <div class="text-center">
        <input type="submit" class="btn btn-default btn-primary" value="提交" id="submit">
    </div>
</form>
在上面的程式碼中，我們需要關注以下兩點內容：

form 表單元素新增了 method="get"，表示使用 get 方式進行提交，在不指定 method 屬性時，預設採用 get 請求。

action 屬性為請求的 url，在 url 後攜帶了請求的引數 "param=面試廳"。

當我們在使用者名稱文字方塊中輸入“kingx”，在密碼文字方塊中輸入“123456”時，單擊“提交”按鈕後，在伺服器端獲取的資料如下所示：
{ username: 'kingx', password: '123456' }

我們發現只有 form 表單內的元素值傳遞到了後端，而 action 指定的 url 後面攜帶的引數 "param=面試廳"並未被伺服器端獲取到，這是為什麼呢？

這是因為 form 表單採用 get 請求時，action 指定的 url 中的請求引數會被丟棄，提交時只會將 form 表單內的元素值進行拼接並向伺服器端傳遞。

既然 form 表單使用 get 請求不能通過 action 的 url 傳遞引數，那麼使用 post 請求可不可以呢？

我們將 form 表單的 method 屬性值改為 post，並將請求的 url 換為 saveUser，同樣在 url 中攜帶請求引數"param=面試廳"。 
<form name="userForm" method="post" action="/saveUser?param1=面試廳" class="container">
    ...
</form>
在 Nodejs 伺服器端啟用 post 請求格式的 saveUser() 函數，函數主要程式碼如下所示： 
app.post('/saveUser', multipleMiddleware, function (req, res) {
    // 請求體中的引數
    console.log(req.body);
    // 請求url中的引數
    console.log(req.query);
});
當我們在文字方塊中輸入使用者名稱為“kingx”，密碼為“123456”，並單擊“提交”按鈕後，在伺服器端獲取的資料如下所示： 
{ username: 'kingx', password: '123456' }  // 請求體中的引數
{ param1: '面試廳' }  // 請求url中的引數
我們可以發現 form 表單內的元素和請求 url 中攜帶的引數都被伺服器端接收到了，其中 form 表單內的元素通過 Request.body 請求體被伺服器端接收到，而 url 中攜帶的引數通過 Request.query 被伺服器端接收到。

通過以上的範例就可以很明顯地看出 form 表單使用 get 方式和 post 方式請求的區別了。

使用 get 方式和 post 方式需要注意的點

在使用 get 方式和 post 方式傳送 Ajax 請求時，由於請求方式本身的特性，所以有一些需要注意的點：

  • 使用 get 方式請求時，如果請求的 url 不發生改變，可能會存在快取的問題，因此在請求的 url 後一般會拼接上一個時間戳，以避免出現快取。
  • 使用 get 方式請求時，請求的引數會拼接在 url 後，如果瀏覽器編碼、伺服器編碼、資料庫編碼格式不一致，可能會導致亂碼的問題。通常的做法是對請求的引數經過 encodeURIComponent() 函數處理。
xhr.open('get', '/getUser?username='+encodeURIComponent(usernam​e), true)
  • 使用 post 方式請求時，需要設定請求頭中的 content-type 屬性，表示資料在傳送至伺服器時的編碼型別。預設情況下，使用 post 方式提交 form 表單時， content-type 值為 application/x-www-form-unlencoded，另外還可以支援 multipart/formdata、application/json 等格式。
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

get 方式和 post 方式的使用場景

在瞭解了 get 方式和 post 方式的區別及使用注意事項後，接下來講解 Ajax 請求分別使用 get 方式和 post 方式的場景吧。

Ajax 使用 get 方式的場景

  • 請求是為了檢索資源，form 表單的資料僅用於幫助搜尋。
  • 傳遞的資料量小，適合於 url 中傳遞引數。
  • 資料安全性低，適合明文傳輸。

Ajax 使用 post 方式的場景

  • 請求會修改資料庫中的資源，例如新增、修改、刪除等操作。
  • 傳遞的資料量大，超出 url 中攜帶引數長度的限制。
  • 用於使用者名稱、密碼及身份證號等類似敏感資訊的資料傳輸。