AJAX - XMLHttpRequest 对象
AJAX 的基石是 XMLHttpRequest 对象。
- 创建一个 XMLHttpRequest 对象
- 定义回调函数
- 打开 XMLHttpRequest 对象
- 向服务器发送请求
XMLHttpRequest 对象
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以在不重新加载整个页面的情况下更新网页的部分内容。
创建 XMLHttpRequest 对象
所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都内置了 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法
variable = new XMLHttpRequest();
定义回调函数
回调函数是将函数作为参数传递给另一个函数的函数。
在这种情况下，回调函数应包含在响应准备好时要执行的代码。
xhttp.onload = function() {
// 响应准备好时要执行的操作
}
发送请求
要向服务器发送请求，可以使用 XMLHttpRequest 对象的 open() 和 send() 方法。
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
示例
// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();
// 定义回调函数
xhttp.onload = function() {
// 在这里可以使用数据
}
// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
自己动手试一试 »
跨域访问
出于安全原因，现代浏览器不允许跨域访问。
这意味着网页和它尝试加载的 XML 文件必须位于同一服务器上。
W3Schools 上的示例都打开位于 W3Schools 域上的 XML 文件。
如果您想在你自己的网页上使用上面的示例，您加载的 XML 文件必须位于您自己的服务器上。
XMLHttpRequest 对象的方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建一个新的 XMLHttpRequest 对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头信息 |
| getResponseHeader() | 返回特定的头信息 |
| open(method, url, async, user, psw) | 指定请求 method: 请求类型 GET 或 POST url: 文件位置 async: true (异步) 或 false (同步) user: 可选的用户名 psw: 可选的密码 |
| send() | 将请求发送到服务器 用于 GET 请求 |
| send(string) | 将请求发送到服务器。 用于 POST 请求 |
| setRequestHeader() | 向要发送的头信息添加一个标签/值对 |
XMLHttpRequest 对象属性
| 属性 | 描述 |
|---|---|
| onload | 定义当请求被接收（加载）时要调用的函数 |
| onreadystatechange | 定义当 readyState 属性更改时要调用的函数 |
| readyState | 保存 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成，响应已准备好 |
| responseText | 将响应数据作为字符串返回 |
| responseXML | 将响应数据作为 XML 数据返回 |
| status | 返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 完整列表请参见 HTTP 消息参考 |
| statusText | 返回状态文本（例如，“OK”或“Not Found”） |
onload 属性
使用 XMLHttpRequest 对象，您可以定义一个回调函数，在请求收到答复时执行。
该函数定义在 XMLHttpRequest 对象的 onload 属性中。
示例
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
自己动手试一试 »
多个回调函数
如果您在一个网站上有多个 AJAX 任务，您应该为执行 XMLHttpRequest 对象创建一个函数，并为每个 AJAX 任务创建一个回调函数。
函数调用应包含 URL 以及响应准备好时要调用的函数。
示例
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// 操作在此处进行
}
function myFunction2(xhttp) {
// 操作在此处进行
}
onreadystatechange 属性
readyState 属性保存 XMLHttpRequest 的状态。
onreadystatechange 属性定义一个在 readyState 更改时执行的回调函数。
status 属性和 statusText 属性保存 XMLHttpRequest 对象的\}, 状态。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义当 readyState 属性更改时要调用的函数 |
| readyState | 保存 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成，响应已准备好 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" 完整列表请参见 HTTP 消息参考 |
| statusText | 返回状态文本（例如，“OK”或“Not Found”） |
每次 readyState 更改时，都会调用 onreadystatechange 函数。
当 readyState 为 4 且 status 为 200 时，响应已准备好
示例
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
自己动手试一试 »
onreadystatechange 事件被触发四次（1-4），每次 readyState 更改一次。
