如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST 請求

更新時間：2023年07月06日 09:36:03 作者：跡憶客

本文將通過不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請求，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

XMLHttpRequest

要從 Web 服務器獲取數(shù)據(jù)，我們使用 XMLHttpRequest (XHR)。它是一種對象形式的 API，可在 Web 瀏覽器和 Web 服務器之間傳輸數(shù)據(jù)。

XMLHttpRequest 主要用于 AJAX 編程。

AJAX編程

AJAX 代表異步 JavaScript 和 XML。它不是一種編程語言，但 AJAX 是一組 Web 開發(fā)技術，它使用多種 Web 技術在客戶端開發(fā)異步 Web 應用程序。

我們可以使用 AJAX 在后臺將數(shù)據(jù)發(fā)送到 Web 服務器。

頁面加載后，我們可以從 Web 服務器讀取數(shù)據(jù)并使用 AJAX 而無需重新加載。我們也可以更新網(wǎng)頁。

創(chuàng)建 XMLHttpRequest 對象的基本語法：

my_variable = new XMLHttpRequest();

我們在加載請求期間定義回調函數(shù)。

my_variable.onload = function() {
 // Here we can use the Data
}

現(xiàn)在，我們可以發(fā)送請求了。

xhttp.open("REQUEST_METHOD, "FILE_PATH")
xhttp.send();

在 JavaScript 中使用 XMLHttpRequest 發(fā)送 POST 請求

POST 請求幫助我們將數(shù)據(jù)從客戶端發(fā)送到服務器。如果我們需要更新數(shù)據(jù)庫中的文件或數(shù)據(jù)，我們會使用 POST 方法。

POST 方法沒有大小限制，這意味著我們可以向服務器發(fā)送大量數(shù)據(jù)。我們通常使用 POST 方法來接收用戶輸入并將它們像注冊表單一樣存儲在我們的數(shù)據(jù)庫中。

POST 方法比 GET 方法更安全。

基本語法：

my_variable = new XMLHttpRequest();
my_variable.onload = function() {
// Here, we can use the data
}
xhttp.open("POST", "MY_FILE_PATH");
xhttp.send();

通過使用 POST 方法，我們將創(chuàng)建一個完整的 JavaScript 源作為示例，以更好地理解 POST 請求的語法和工作方式。請記住，我們需要在執(zhí)行請求之前在我們的對象中設置標頭。

示例代碼：

<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequest using POST method</h2>
<button type="button" onclick="loadRequest()">Request post method</button> // calling of a request
<p id="test"></p>
<script>
function loadRequest() {
    const requestObject = new XMLHttpRequest(); // object of request
    requestObject.onload = function() {
        document.getElementById("test").innerHTML = this.responseText; // displaying response text in paragraph tag
    }
    requestObject.open("POST", "MY_FILE_PATH");
    requestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // setting of headers  in request
    requestObject.send("DATA_TO_SEND"); // data to send in request
}
</script>
</body>
</html>

示例代碼解釋：