如何在javascript 中使用 xmlHttpRequest 发送 POST 请求

更新时间：2023年07月06日 09:36:03 作者：迹忆客

本文将通过不同的示例解释如何使用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 中使用 xmlHttpRequest 发送 POST 请求的文章就介绍到这了,更多相关javascript 发送 POST 请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript清空数组元素的两种方法简单比较
这篇文章主要介绍了JavaScript清空数组元素的两种方法简单比较,罗列了几种常见的情况javascript数组的方法,并且比较了其中的两种常见方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
求得1-1000所有出现1的数字，并计算出现1的个数，以下是采用枚举的实现方法，但是若从1-N就不管用了，因为N不一定会是多少
2013-09-09
一款JavaScript压缩工具：X2JSCompactor
一款JavaScript压缩工具：X2JSCompactor...
2007-06-06
为指定元素增加样式的js代码
从此例子中发现，js对"" 与 " " ，注意中间还有一空格，解析是非常严格的。在java与net中还有待于研究。
2009-12-12
原生JS实现H5转盘游戏的示例代码
这篇文章主要介绍了如何利用原生JS实现转盘游戏，可以自由调整概率。文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的可以参考一下
2022-03-03
JS实现简单面向对象的颜色选择器实例
这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下
2016-04-04
基于JS制作一个网页版的猜数字小游戏
这篇文章主要为大家详细介绍了如何利用HTML+CSS+JavaScript实现一个简单的网页版的猜数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript 冒泡排序和选择排序的实现代码
本文通过实例代码给大家介绍了js冒泡排序和选择排序的实现代码，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-09-09
javascript制作的简单注册模块表单验证
通常在我们的HTML页面表单中有大量的数据验证工作，免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一段JavaScript代码提供给大家使用。使用起来很简单，大家拿回去自由扩展吧
2015-04-04
微信小程序实现Canvas画板源代码
微信小程序中的画布是非常重要的展示控件,其相当于HTML中的canvas控件,下面这篇文章主要给大家介绍了关于微信小程序实现Canvas画板的相关资料,需要的朋友可以参考下
2024-08-08