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 对象具有以下方法：

序号	方法及描述
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() 用于向 Web 服务器发送请求。通常用于 GET 请求。
7	send(string) 用于向服务器发送请求。通常用于 POST 请求。
8	setRequestHeader() 用于向头信息添加键/值对。

XMLHttpRequest 对象属性

XMLHttpRequest 对象具有以下属性：

序号	属性及描述
1	onreadystatechange 设置处理请求状态更改的回调函数。
2	readyState 用于保存 XMLHttpRequest 的状态。它具有以下值：表示请求未初始化表示服务器连接已建立表示请求已接收表示请求正在处理中表示请求已完成，响应已准备就绪
3	responseText 用于将响应数据作为字符串返回。
4	responseXML 用于将响应数据作为 XML 数据返回
5	Status 用于返回请求的状态编号。例如： 200：表示 OK 403：表示禁止 404：表示未找到
6	StatusText 用于返回状态文本。例如，OK、未找到等。

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 的工作原理

示例

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

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

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

<!DOCTYPE html>
<html>
<body>
<script>
function displayDoc() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating a callback function
   myObj.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("sample").innerHTML = this.responseText;
      } else {
         console.log("Error Found")
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   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>

输出

结论

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

打印页面