Ajax 简明教程
AJAX - XMLHttpRequest
在 AJAX 中，XMLHttpRequest 扮演着非常重要的角色。XMLHttpRequest 用于在后台与 Web 服务器交换数据，而用户/客户端在前台工作，然后使用收到的数据更新网页部分，而无需重新加载整个页面。
我们还可以说，XMLHttpRequest (XHR) 可以由各种 Web 浏览器脚本语言（如 JavaScript、JScript、VBScript 等）使用，通过 HTTP 与 Web 服务器交换 XML 数据。除了 XML 外，XMLHttpRequest 还可以获取各种格式的数据，如 JSON 等。它会在客户端和服务器端之间创建异步连接。
Syntax
variableName = new XMLHttpRequest()当使用新关键字和 XMLHttpRequest() 构造函数时，我们可以创建一个新的 XMLHttpRequest 对象。必须先创建此对象，然后才能调用 open() 函数对其进行初始化，然后再调用 send() 函数将请求发送到 Web 服务器。
XMLHttpRequest Object Methods
XMLHttpRequest 对象具有以下方法：
Sr.No. |
Method Name & Description |
1 |
new XMLHttpRequest() 用于创建 XMLHttpRequest() 对象 |
2 |
getAllResponseHeaders() 用于获取标头信息 |
3 |
getResponseHeader() 用于获取特定标头信息 |
4 |
open(method, url, async, user, psw) 用于初始化请求参数。此处method：请求类型 GET 或 POST 或其他类型url：文件位置async：异步设置为 true，同步设置为 falseuser：用于可选用户名psw：用于可选密码 |
5 |
send() 用于向 Web 服务器发送请求。它通常用于 GET 请求。 |
6 |
send(string) 用于向服务器发送请求。它通常用于 POST 请求。 |
7 |
setRequestHeader() 用于向标头添加键/值对 |
XMLHttpRequest Object Properties
XMLHttpRequest 对象具有以下属性：
Sr.No. |
Property Name & Description |
1 |
onreadystatechange 设置处理请求状态更改的回调函数。 |
2 |
readyState 用于保存 XMLHttpRequest 的状态。它具有以下值：- 它表示未初始化请求- 它表示已建立服务器连接- 它表示已收到请求- 它表示正在处理请求- 它表示请求已完成且响应已准备就绪 |
3 |
responseText 用于以字符串形式返回响应数据 |
4 |
responseXML 用于将响应数据作为 XML 数据返回 |
5 |
Status 用于返回请求的状态号。例如：- 200：确定- 403：禁止- 404：未找到 |
6 |
StatusText 它用于返回状态文本。例如，OK、未找到等。 |
Usage of XMLHttpRequest
在了解了 XMLHttpRequest 的基本语法、方法和属性之后，现在我们学习如何实际使用 XMLHttpRequest。因此，要在您的程序中使用 XMLHttpRequest，首先我们需要遵循以下主要步骤 −
Step 1 − 创建 XMLHttpRequest 对象
var variableName = new XMLHttpRequest()Step 2 − 在创建 XMLHttpRequest 对象后，我们现在必须定义一个回调函数，该函数将在从 Web 服务器获取响应后触发。
XMLHttpRequestObjectName.onreadystatechange = function(){
// Callback function body
}
XMLHttpRequestObjectName.open(method, url, async)
XMLHttpRequestObjectName.send()Step 3 − 现在我们使用 open() 和 send() 函数向 Web 服务器发送请求。
现在让我们在以下示例的帮助下了解 XMLHttpRequest 的工作原理 −
Example
在下面的示例中，我们将从服务器获取数据。要从服务器获取数据，我们将单击“单击我”按钮。因此，当我们单击“单击我”按钮时，将调用 displayDoc() 函数。在 displayDoc() 函数中，我们创建一个 XMLHttpRequest 对象。然后，我们创建一个回调函数来处理服务器响应。然后，我们调用 XHR 对象的 open() 方法，使用 HTTP GET 方法和服务器 URL 来初始化请求，网址为 "https://jsonplaceholder.typicode.com/todos" 。然后我们调用 send() 函数来发送请求。
因此，当服务器响应请求时，“onreadystatechange”属性会使用 XMLHttpRequest 对象的当前状态调用回调函数。如果“就绪状态”属性设置为 4（意味着请求已完成），并且“状态”属性设置为 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>