背景:
AJAX 是浏览器的功能
浏览器这window上加了一个XMLHttpRequest函数
用这个构造函数(类)可以构造出一个对象
JS用它来实现发请求,收响应
四个步骤:
1. 创建XMLHttpRequest对象
2. 调用对象的open方法
3. 监听onload & onerror 事件
----专业前端会改用onreadystatechange事件来处理函数里操作文件的内容
4. 调用对象的send方法(发送请求)
比如我们来请求一个CSS文件
//示例
//先写好路由
else if(path === '/style.css'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/css;charset=utf-8')
let string = fs.readFileSync('public/style.css').toString()
response.write(string)
response.end()
}
getCSS.onclick = () => {
const request = new XMLHttpRequest();//readyState = 0
request.open("GET", "/style.css"); // readyState = 1
request.onreadystatechange = () => {
console.log(request.readyState)
if (request.readyState === 4) { //当readyState===4时,证明请求的东西已经下载完成,就可以开始操作请求的东西了
//但是因为即使是下载失败,也是下载完成了,只是下载失败了,所以需要在放一道保险,当状态码是200-299时,证明下载是成功的,否则是失败的
if (request.status >= 200 && request.status < 300) {
// 创建 style 标签
const style = document.createElement("style"); //请求成功了就创建一个style标签,把请求的css内容填入style标签,再放入head标签里就可以在HTML执行了
// 填写 style 内容
style.innerHTML = request.response;
// 插到head里面
document.head.appendChild(style);
} else {
alert("加载 CSS 失败");
}
}
};
request.send(); // readyState = 2
};