Kasan Blog

完整代码

简单来说,AJAX就是用JS来发请求和收响应

Ajax全称:Asynchronous Javascript And XML (异步JavaScript和XML)

背景:
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()
}

onreadystatechange

readyState

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
  };