AJAX 是 Asynchronous JavaScript And XML 的缩写,即异步 JavaScript 和 XML 技术,并不是一门新的语言或技术,可以在无需重新加载整个网页的情况下,实现更新部分网页。
一、创建 XMLHttpRequest 对象
// 创建自定义变量,用于存储 XMLHttpRequest 对象的实例
let xmlhttp;
// 避免浏览器不兼容
if (window.XMLHttpRequest) {
// IE7+、Firefox、Chrome、Safari 以及 Opera
xmlhttp = new XMLHttpRequest();
} else {
// IE5、IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
二、请求
// 打开请求
xmlhttp.open("GET", "./data/data.txt", true);
// xmlhttp.open(method, url, async);
// method 请求的类型,如常用的 get 和 post
// url 处理响应文件的路径
// async 是否使用异步处理,布尔数据类型
// 发送请求
xmlhttp.send();
三、响应
// 字符串形式的响应数据
xmlhttp.responseText;
// XML形式的响应数据
xmlhttp.responseXML;
四、onreadystatechange 事件
-
onreadystatechange:监测 XMLHTTP 请求的状态(readyState)信息事件,一旦 readyState 发生改变即调用该事件。
-
readyState 请求状态表如下:
状态 | 含义 |
---|---|
0 | 请求未初始化 |
1 | 服务器连接已建立 |
2 | 请求已接收 |
3 | 请求处理中 |
4 | 请求已完成,且响应已就绪 |
- status 状态码:
状态码 | 含义 |
---|---|
200 | “OK” |
304 | 未修改 |
403 | 禁止 |
404 | 未找到页面 |
500 | 内部服务器错误 |
需要了解更多的状态码信息不妨观看: HTTP_请求信息与响应信息
- 结合使用
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 这里是异步之后的执行的内容
}
};
五、小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<script src="js/index.js"></script>
<!-- <script type="module" src="js/mian.js"></script> -->
</head>
<body></body>
<script>
"use strict";
/*
读取本地 json 文件的数据
1.读取 data.txt 中的内容
2.打印在 body 节点上
*/
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// 这里的 url 是需要读取的文件路径
xhr.open("GET", "./data/data.json", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.status == 200) {
// 把响应的内容打印在 body 上
document.body.innerHTML = xhr.responseText;
}
}
};
</script>
</html>
注: 运行 AJAX 的时候需要在服务器环境上才可以运行,不然会报错,这里可以在 vscode 添加 live server 插件,并使用该插件运行代码即可。