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

方法名称 描述
new XMLHttpRequest()

用于创建 XMLHttpRequest（） 对象
getAllResponseHeaders()

用于获取 header 信息
getResponseHeader()

用于获取特定的 header 信息
open(method, url, async, user, psw) 用于初始化请求参数。
这里
method：请求类型 GET 或 POST 或其他类型
url：文件位置
async：对于异步设置为 true，对于同步设置为 false，则为 false
user：用于可选用户名
psw：用于可选密码
send()

用于向 Web 服务器发送请求。它通常用于 GET 请求。
send(string)

用于向服务器发送请求。它通常用于 POST 请求。
setRequestHeader()

用于将键/值对添加到 header 中

XMLHttpRequest 对象属性

XMLHttpRequest 对象具有以下属性 -

属性名称 描述
onreadystatechange

设置处理请求状态更改的回调函数。
readyState

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

  • 表示请求未初始化
  • 表示已建立的服务器连接
  • 表示收到的请求
  • 表示请求正在处理中
  • 表示请求已完成且响应已准备就绪
responseText

用于将响应数据作为字符串返回
responseXML

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

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

  • 200：表示正常
  • 403：代表 Forbidden
  • 404：代表 Not Found
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() {
	 	 	 // 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>

输出

Ajax XML http 请求

结论

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

本页
上一页
下一页