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

AJAX - XMLHttpRequest

在AJAX中，XMLHttpRequest 扮演着非常重要的角色。 XMLHttpRequest 用于在后台与 Web 服务器交换数据，而用户/客户端在前台工作，然后使用接收到的数据更新网页的一部分，而无需重新加载整个页面。

我们还可以说 XMLHttpRequest (XHR) 可以被各种 Web 浏览器脚本语言（如 JavaScript、JScript、VBScript 等）使用，通过 HTTP 与 Web 服务器交换 XML 数据。 除了XML之外，XMLHttpRequest还可以获取JSON等各种格式的数据。它在客户端和服务器端之间创建异步连接。

语法

variableName = new XMLHttpRequest()

使用 new 关键字和 XMLHttpRequest() 构造函数，我们可以创建一个新的 XMLHttpRequest 对象。 该对象必须在调用 open() 函数之前创建，并在调用 send() 函数将请求发送到 Web 服务器之前对其进行初始化。

XMLHttpRequest 对象方法

XMLHttpRequest对象有以下方法 −

Sr.No. 方法及说明
1

new XMLHttpRequest()

用于创建 XMLHttpRequest() 对象
2

abort()

用于取消当前请求。
3

getAllResponseHeaders()

用于获取头部信息
4

getResponseHeader()

用于获取具体的头信息
5

open(method, url, async, user, psw)

open(method, url, async, user, psw) 用于初始化 请求参数。

这里，

method：请求类型GET或POST或其他类型

url：文件位置

async：对于异步设置为 true 或对于同步设置为 false

user：可选的用户名

psw：可选密码
6

send()

它用于向网络服务器发送请求。 一般用于GET请求。
7

send(string)

用于向服务器发送请求。 一般用于POST请求。
8

setRequestHeader()

用于向标头添加键/值对。

XMLHttpRequest 对象属性

XMLHttpRequest 对象具有以下属性 −

Sr.No. 属性和描述
1

onreadystatechange

设置处理请求状态变化的回调函数。
2

readyState

用于保存XMLHttpRequest的状态。 它具有以下值 −

  • 代表请求未初始化

  • 代表服务器连接建立

  • 代表收到的请求

  • 表示请求正在处理中

  • 表示请求已完成，响应已就绪
3

responseText

用于以字符串形式返回响应数据。
4

responseXML

用于将响应数据作为XML数据返回
5

Status

用于返回请求的状态号。 例如 −

200：表示确定

403：禁止

404：未找到
6

StatusText

用于返回状态文本。 例如，确定、未找到等。

XMLHttpRequest 的使用

在了解了 XMLHttpRequest 的基本语法、方法和属性之后，现在我们学习如何在现实生活中使用 XMLHttpRequest。 因此，要首先在程序中使用 XMLHttpRequest，我们需要遵循以下主要步骤 −

步骤 1 − 创建 XMLHttpRequest 对象。

var variableName = new XMLHttpRequest()

步骤 2 − 创建 XMLHttpRequest 对象后，我们现在必须定义一个回调函数，该函数将在收到 Web 服务器的响应后触发。

XMLHttpRequestObjectName.onreadystatechange = function(){
   // Callback function body
}

XMLHttpRequestObjectName.open(method, url, async)
XMLHttpRequestObjectName.send()

步骤 3 − 现在我们使用 open() 和 send() 函数向 Web 服务器发送请求。

现在让我们借助以下示例了解 XMLHttpRequest 的工作原理：

示例

在下面的示例中，我们将从服务器获取数据。 要从服务器获取数据，我们将单击"Click Me"按钮。 因此，当我们单击"Click Me"按钮时，将调用 displayDoc() 函数。在 displayDoc() 函数内，我们创建一个 XMLHttpRequest 对象。 然后我们创建一个回调函数来处理服务器响应。 然后我们调用 XHR 对象的 open() 方法来使用 HTTP GET 方法和服务器 URL "https://jsonplaceholder.typicode.com/todos" 初始化请求。 然后我们调用send()函数发送请求。

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

如果我们在请求期间发现错误，则回调函数中存在的 else 语句将执行。 这就是我们从服务器获取数据的方式。

<!DOCTYPE html>
<html>
<body>
<script>
function displayDoc() {
   // 创建 XMLHttpRequest 对象
   var myObj = new XMLHttpRequest();

   // 创建回调函数
   myObj.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("sample").innerHTML = this.responseText;
      } else {
         console.log("Error Found")
      }
   };
   // 打开给定的文件
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // 发送请求到服务器
   myObj.send();
}
</script>
<div id="sample">
   <h2>Getting Data</h2>
   <p>Please click on the button to fetch data</p>
   <button type="button" onclick="displayDoc()">Click Me</button>
</div>
</body>
</html>

Output

xmlhttprequest

Conclusion

XMLHttpRequest 是 AJAX 的主要对象，AJAX 通过它在 Web 浏览器和 Web 服务器之间创建异步通信。 因此，在下一篇文章中，我们将学习如何使用 XMLHttpRequest 对象发送请求。

❮ 上一节 下一节 ❯