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。或者我们可以说服务器（文件）位置。
async - 对于异步连接，将值设置为 true。或者对于同步连接，将值设置为 false。此参数的默认值为 true。

要使用 open() 方法，首先我们创建 XMLHttpRequest 对象的一个实例。然后我们调用 open() 方法来初始化请求，使用 HTTP GET 或 POST 方法以及服务器的 URL。

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

在 open() 方法中，可以通过使用绝对路径或相对路径来指定 AJAX 应用程序的文件名或位置或路径。其中绝对路径是指定文件确切位置的路径，例如：

Myrequest.open("GET", "https://tutorialspoint.com/source.txt")

这里“source.txt”是文件名，"https://tutorialspoint.com" 是存储 source.txt 文件的位置。

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

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

语法

Myrequest.send()

send() 方法

send() 方法用于将请求发送到服务器。您还可以向 send() 方法传递参数。

发送请求

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

示例

在以下代码中，我们从服务器获取指定记录。要从服务器获取数据，我们点击“点击此处”按钮。因此，当我们点击“点击此处”按钮时，将调用 showDoc() 函数。在 displayDoc() 函数内部，首先创建 XMLHttpRequest 的一个对象。然后我们创建一个回调函数来处理服务器响应。然后我们调用 XHR 对象的 open() 方法来初始化请求，使用 HTTP GET 方法以及服务器的 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 支持的请求类型。

打印页面