快捷導(dǎo)航

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

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

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

XMLHttpRequest

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

XMLHttpRequest 主要用于 AJAX 編程。

AJAX編程

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

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

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

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

my_variable = new XMLHttpRequest();

我們?cè)诩虞d請(qǐng)求期間定義回調(diào)函數(shù)。

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

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

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

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

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

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

POST 方法比 GET 方法更安全。

基本語(yǔ)法：

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)建一個(gè)完整的 JavaScript 源作為示例，以更好地理解 POST 請(qǐng)求的語(yǔ)法和工作方式。請(qǐng)記住，我們需要在執(zhí)行請(qǐng)求之前在我們的對(duì)象中設(shè)置標(biāo)頭。

示例代碼：

<!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>

示例代碼解釋：

在上面的 HTML 源代碼中，我們創(chuàng)建了一個(gè)段落元素并定義了一個(gè) ID 來分配它的文本值。
我們創(chuàng)建了一個(gè)按鈕，Request post 方法，該按鈕的 onclick 事件是我們稱為 loadRequest() 的函數(shù)。
在 loadRequest() 函數(shù)中，我們創(chuàng)建了一個(gè) XMLHttpRequest() 對(duì)象。
然后，我們使用回調(diào)函數(shù)獲取數(shù)據(jù)并使用 document.getElementById(“test”) 為段落分配請(qǐng)求-響應(yīng)。
現(xiàn)在，我們打開了一個(gè)請(qǐng)求連接，并傳遞了請(qǐng)求方法 POST 和網(wǎng)絡(luò)請(qǐng)求文件路徑。
我們已經(jīng)設(shè)置了請(qǐng)求標(biāo)頭來定義內(nèi)容類型。
最后，我們使用我們想要發(fā)布的數(shù)據(jù)發(fā)送了請(qǐng)求。
您可以使用正確的網(wǎng)絡(luò)請(qǐng)求文件路徑保存此 HTML 源，并使用 .html 擴(kuò)展名保存該文件。
在任何瀏覽器上打開它以查看結(jié)果。

到此這篇關(guān)于在 javascript 中使用 xmlHttpRequest 發(fā)送 POST 請(qǐng)求的文章就介紹到這了,更多相關(guān)javascript 發(fā)送 POST 請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: