AJAX - 发送请求

AJAX 应用程序使用 XMLHttpRequest 对象来启动或管理发送到 Web 服务器的数据请求，并以非常有效的方式处理或监视 Web 服务器发送的数据。AJAX 支持以下类型的请求 -

GET 请求
POST 请求
PUT 请求
DELETE 请求

要创建连接并向 Web 服务器 XMLHttpRequest 对象发送请求，请提供以下两种方法：

open（） − 用于在 Web 浏览器和 Web 服务器之间创建连接。
send（） − 用于向 Web 服务器发送请求。

open（）方法

open（）方法用于建立与 Web 服务器的异步连接。建立安全连接后，您就可以使用 XMLHttpRequest 的各种属性了，也可以发送请求或处理响应。

语法


 open(method, url, async)

其中，open（） 方法采用三个参数 -

method − 它表示用于与 Web 服务器建立连接的 HTTP 方法（GET 或 POST）。
url − 它表示将在 Web 服务器上打开的文件 URL。或者我们可以说 server（file） location。
async − 对于异步连接，请将值设置为 true。或者，对于同步连接，将值设置为 false。此参数的默认值为 true。

要使用 open（）方法，我们首先创建 XMLHttpRequest 对象的实例。然后我们调用 open（）方法，使用 HTTP GET 或 POST 方法和服务器的 URL 初始化请求。

GET 选项用于从 Web 服务器检索适量的信息，而 POST 选项用于检索大量信息。因此，GET 和 POST 选项都可以配置 XMLHttpRequest 对象以处理给定的文件。

在 open（）方法中，可以使用绝对路径或相对路径来指定 AJAX 应用程序的文件名、位置或路径。其中 absolute path 是指定文件确切位置的路径，例如 -


 Myrequest.open("GET", "http://www.qikepu.com/source.txt")

这里 “source.txt” 是文件的名称，“http://www.qikepu.com” 是存储source.txt文件的位置。

相对路径用于根据 Web 服务器上相对于 Web 应用程序文件的位置指定文件的位置，例如 -


 Myrequest.open("GET", "my file.txt")

语法


 Myrequest.send()

send（）方法

send（）方法用于将请求发送到服务器。您还可以将参数传递给 send（）方法。

发送请求

要向服务器发送请求，首先我们需要创建一个 XMLHttpRequest 对象的实例，然后我们创建一个回调函数，该函数将在从 Web 服务器获得响应后开始操作。然后我们使用 open（）方法在 Web 浏览器和 Web 服务器之间建立异步连接，然后使用 send（）函数将请求发送到服务器。

例子

在下面的代码中，我们从服务器获取指定的记录。要从服务器获取数据，我们单击 “点击这里” 按钮。因此，当我们单击 “Click Here” 按钮时，将调用 showDoc（）函数。在 displayDoc（）函数中，首先创建一个 XMLHttpRequest 对象。然后，我们创建一个回调函数来处理服务器响应。然后我们调用 XHR 对象的 open（）方法，使用 HTTP GET 方法和服务器的 URL 初始化请求，该 URL 为 “https://jsonplaceholder.typicode.com/todos/3” 从 JSONPlaceholder API 获取 id = 3 的单个待办事项列表。然后我们调用 send（）函数来发送请求。


<!DOCTYPE html>
<html>
<body>
<script>
	 	function ShowDoc() {
	 	// Creating XMLHttpRequest object
	 	var myhttp = new XMLHttpRequest();
	 	// Creating call back function
	 	myhttp.onreadystatechange = function() {
	 	 	 if (this.readyState == 4 && this.status == 200) {
	 	 	 	 	document.getElementById("example").innerHTML = this.responseText;
	 	 	 }
	 	};
	 // Open the given file
	 myhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/3", true);
	 // Sending the request to the server
	 myhttp.send();
}
</script>

<div id="example">
	 <p>Please click on the button to fetch data</p>
	 <button type="button" onclick="ShowDoc()">Click Here</button>
</div>
</body>
</html>

输出

点击“点击这里”按钮后，我们将从服务器获得以下记录。

因此，当服务器响应请求时，“onreadystatechange”属性会使用 XMLHttpRequest 对象的当前状态调用回调函数。如果 “ready state” 属性设置为 4 （表示请求已完成），并且 “status” 属性设置为 200 （表示响应成功），则从 “responseText” 属性中提取响应数据，并在示例元素的 “innerHTML” 属性的帮助下显示 HTML 文档。

结论

这就是我们如何使用 XMLHttpRequest 发送请求。在所有这些请求中，GET 和 POST 是向服务器获取和发送数据的最常用的请求。现在在下一篇文章中，我们将看到 AJAX 支持的请求类型。

打印本页

AJAX - 发送请求

open（） 方法

语法

语法

send（） 方法

发送请求

例子

结论

open（）方法

send（）方法