在 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 扩展名保存该文件。
- 在任何浏览器上打开它以查看结果。
相关文章
使用 JavaScript 将鼠标指针移动到特定位置
发布时间：2023/06/06 浏览次数：106 分类：JavaScript
-
在这篇文章中，我们将创建一个假的或自定义的鼠标指针，它可能看起来类似于默认系统的鼠标指针，然后我们将使用 JavaScript 将其位置移动到不同的位置。 这种将鼠标指针移动到特定位置的
JavaScript 异步 forEach
发布时间：2023/06/06 浏览次数：200 分类：JavaScript
-
在本篇文章中，我们将看看我们是否可以在 JavaScript 的 forEach 循环中使用异步。 有哪些选择？JavaScript 中的异步 forEach 异步编程不适用于 Array.prototype.forEach。
JavaScript 中 URL 解码
发布时间：2023/06/06 浏览次数：118 分类：JavaScript
-
本文着眼于 URL 解码以及如何使用 JavaScript 对编码的 URL 进行解码。需要URL编解码。JavaScript 中的 URL 解码。在 JavaScript 中，可以通过三种方法对编码的 URL 进行解码。
如何在 JavaScript 中生成 PDF
发布时间：2023/06/06 浏览次数：145 分类：JavaScript
-
在本文中，我们将学习用 JavaScript 创建 PDF 的有效方法。 在示例的帮助下，我们将了解 JavaScript 中有哪些可用的库来创建 PDF。
在 JavaScript 中使用种子生成随机数
发布时间：2023/06/06 浏览次数：182 分类：JavaScript
-
本文介绍如何使用种子在 JavaScript 中生成随机数。 我们实现这一点要归功于 PRNG，它接受一个种子并返回一个基于该种子的随机数。
JavaScript += 的效果
发布时间：2023/06/06 浏览次数：152 分类：JavaScript
-
本篇文章将介绍 JavaScript += 在以下情况下的效果。JavaScript 加上数字之间的相等 ；JavaScript 加上字符串之间相等 ；JavaScript 在数字和字符串之间加上相等
JavaScript 电话号码格式
发布时间：2023/06/06 浏览次数：181 分类：JavaScript
-
在本文中，我们将了解在 JavaScript 源代码中格式化电话号码的最佳方式，以及在我们的 JavaScript 代码中格式化数字的好处。JavaScript 中的电话号码格式 在 JavaScript 中，我们有多个选项可以有效地
JavaScript 中的图像加载事件
发布时间：2023/06/05 浏览次数：154 分类：JavaScript
-
本文将讨论如何在 JavaScript 中处理 .onload 事件。 我们将学习如何在上传图像后使用 JavaScript 创建警告框。我们还将了解如何通过创建警告框使用 JavaScript 检查图像是否已加载。JavaScript 中的 .
JavaScript 删除所有事件监听器
发布时间：2023/06/05 浏览次数：84 分类：JavaScript
-
本篇文章将介绍如何删除 JavaScript 中的所有事件侦听器。移除 JavaScript 中的所有事件监听器 EventTarget 接口的 addEventListener() 方法配置一个函数，只要指定的事件被传递到目标，就会调用该函数。
