HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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", "http://www.tutorialspoint.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 "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();
   // 创建回调函数
   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>

输出

点击"Click Here"按钮后，我们将从服务器获取以下记录。

发送请求 2

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

结论

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

❮ 上一节 下一节 ❯