AJAX - XMLHttpRequest 对象
AJAX 的核心是 XMLHttpRequest 对象。
- 创建 XMLHttpRequest 对象
- 定义回调函数
- 打开 XMLHttpRequest 对象
- 发送请求到服务器
XMLHttpRequest 对象
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象可用于在幕后与 Web 服务器交换数据。这意味着可以更新网页的一部分，而无需重新加载整个网页。
创建 XMLHttpRequest 对象
所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都内置了 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法
变量 = 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(方法, url, 异步, 用户, 密码) | 指定请求 方法: 请求类型 GET 或 POST url: 文件位置 异步: true (异步) 或 false (同步) 用户: 可选用户名 密码: 可选密码 |
| send() | 将请求发送到服务器 用于 GET 请求 |
| send(字符串) | 将请求发送到服务器。 用于 POST 请求 |
| setRequestHeader() | 在要发送的标题中添加标签/值对 |
XMLHttpRequest 对象属性
| 属性 | 描述 |
|---|---|
| onload | 定义在收到请求（加载）时要调用的函数 |
| onreadystatechange | 定义在 readyState 属性更改时要调用的函数 |
| readyState | 保存 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成，响应已准备就绪 |
| responseText | 以字符串形式返回响应数据 |
| responseXML | 以 XML 数据形式返回响应数据 |
| status | 返回请求的状态编号 200: "OK" 403: "禁止" 404: "未找到" 有关完整列表，请访问 Http 消息参考 |
| statusText | 返回状态文本（例如，“OK”或“未找到”） |
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: "禁止" 404: "页面未找到" 有关完整列表，请访问 Http 消息参考 |
| statusText | 返回状态文本（例如，“OK”或“未找到”） |
每次 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 发生变化时触发一次。
