AJAX代码地址：https://github.com/ShigureRain/Ajax-1
- AJAX就是用JS发请求和响应
- 浏览器可以发请求，收响应
- 浏览器在window上加了一个XMLHttpRequest函数
- 用这个构造函数可以构造出一个对象
- JS通过它实现发请求，收响应
使用方法
- 创建一个XMLHTTPRequest对象
let request = new XMLHttpRequest()
- 调用对象的open方法，设置请求参数
request.open('GET', '/style.css')
- 监听请求成功后的状态变化
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(request.response)
}
};
- 发送请求
request.send()
请求
关于onreadystatechange，请求在不同阶段会有不同的readyState
| 请求的不同阶段 | readyState |
|---|---|
| let request = new XMLHttpRequest() | 0 |
| request.open('GET', '/style.css') | 1 |
| request.send() | 2 |
| 第一个响应信息出现在浏览器 | 3 |
| 所有响应下载完成 | 4 |
加载CSS
getCSS.onclick = () => {
const request = new XMLHttpRequest(); //创建HttpRequest对象
request.open("GET", "/style.css"); //调用对象的open方法 // readyState = 1
request.onreadystatechange = () => {
console.log(request.readyState); // 下载完成，但不知道是成功 2xx 还是失败 4xx 5xx
if (request.readyState === 4) { //如果下载完成
if (request.status >= 200 && request.status < 300) { //如果状态号在200-300
const style = document.createElement("style"); // 创建 style 标签
style.innerHTML = request.response; // 填写 style 内容
document.head.appendChild(style); // 插到头里面
}
}
};
request.send(); // readyState = 2
};
加载JS
getJS.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/2.js");
request.onreadystatechange = () => {
if (request.readyState === 4) { //如果下载完成
if (request.status >= 200 && request.status < 300) { //如果状态号在200-300
const script = document.createElement("script"); // 创建 script 标签
script.innerHTML = request.response; // 填写 script 内容
document.body.appendChild(script); // 插到身体里
}
}
};
request.send();
}
加载HTML
getHTML.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/3.html");
request.onreadystatechange = () => {
if (request.readyState === 4) { //如果下载完成
if (request.status >= 200 && request.status < 300) { //如果状态号在200-300
const div = document.createElement("div"); // 创建 div 标签
div.innerHTML = request.response; // 填写 div 内容
document.body.appendChild(div); // 插入到身体里
}
}
};
request.send();
}
加载JSON
JSON：JS对象标记语言
getJSON.onclick = () => {
const request = new XMLHttpRequest();
request.open("get", "/5.json");
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const object = JSON.parse(request.response) //把json字符串变成对象
myName.textContent = object.name
}
};
request.send();
};
- JSON.parse 将符合JSON语法的字符串转换成JS对应类型的数据
- JSON.stringify 把JS数据变成JSON字符串
