在 JavaScript 中使用 XMLHttpRequest 发送 POST 请求
本文将通过不同的示例解释如何使用 JavaScript 代码在 AJAX 编程中发送 XMLHttpRequest post 请求。
XMLHttpRequest
要从 Web 服务器获取数据，我们使用 XMLHttpRequest (XHR)。 它是一种对象形式的 API，可在 Web 浏览器和 Web 服务器之间传输数据。
XMLHttpRequest 主要用于 AJAX 编程。
AJAX编程
AJAX 代表异步 JavaScript 和 XML。 它不是一种编程语言，但 AJAX 是一组 Web 开发技术，它使用多种 Web 技术在客户端开发异步 Web 应用程序。
我们可以使用 AJAX 在后台将数据发送到 Web 服务器。
页面加载后，我们可以从 Web 服务器读取数据并使用 AJAX 而无需重新加载。 我们也可以更新网页。
创建 XMLHttpRequest 对象的基本语法：
my_variable = new XMLHttpRequest();
我们在加载请求期间定义回调函数。
my_variable.onload = function() {
// Here we can use the Data
}
现在，我们可以发送请求了。
xhttp.open("REQUEST_METHOD, "FILE_PATH")
xhttp.send();
在 JavaScript 中使用 XMLHttpRequest 发送 POST 请求
POST 请求帮助我们将数据从客户端发送到服务器。 如果我们需要更新数据库中的文件或数据，我们会使用 POST 方法。
POST 方法没有大小限制，这意味着我们可以向服务器发送大量数据。 我们通常使用 POST 方法来接收用户输入并将它们像注册表单一样存储在我们的数据库中。
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 方法，我们将创建一个完整的 JavaScript 源作为示例，以更好地理解 POST 请求的语法和工作方式。 请记住，我们需要在执行请求之前在我们的对象中设置标头。
示例代码：
<!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 源代码中，我们创建了一个段落元素并定义了一个 ID 来分配它的文本值。
-
我们创建了一个按钮，Request post 方法，该按钮的 onclick 事件是我们称为
loadRequest()的函数。 -
在
loadRequest()函数中，我们创建了一个XMLHttpRequest()对象。 - 然后，我们使用回调函数获取数据并使用 document.getElementById("test") 为段落分配请求-响应。
- 现在，我们打开了一个请求连接，并传递了请求方法 POST 和网络请求文件路径。
- 我们已经设置了请求标头来定义内容类型。
- 最后，我们使用我们想要发布的数据发送了请求。
- 您可以使用正确的网络请求文件路径保存此 HTML 源，并使用 .html 扩展名保存该文件。
- 在任何浏览器上打开它以查看结果。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
