AJAX

安装node-dev方便调试

yarn global add node-dev 安装

优点 当我们修改代码时会自动重启，方便开发

AJAX加载CSS

四个步骤

1. 创建一个HttpRequest对象

2. 调用open方法

3. 监听对象的onload&onerror事件

   –专业前端会改用onreadystatechange事件

   –在事件处理函数里操作CSS文件内容

4. 调用对象的send方法

   –具体代码请打开MDN用CRM（copy,run,my）大法搞定

具体代码如下：

getClass.onclik = ()=>{
    const request = new XMLHttpRequest()
    request.open("GET","/style.css")
    request.onload = ()=>{
        //创建一个style标签
        const style = document.createElement('style')
        //将获取到的内容放到style标签里面
        style.innerHTML= request.response
        //将style标签插入到head中
        document.head.appendChild(style)
    }
    request.onerror = ()=>{
        console.log('error!')
    }
    request.send()
}

同理，加载js和html也是一样的原理

但是这里有一个BUG当我们的页面加载失败时不会执行onerror里面的内容，这是因为onerror出现的时候还没有AJAX，当时的error只能监听图片加载失败等等事件。因此，专业的前端会使用onreadystatechange事件，这里我们简单的介绍一下一个请求的一生。

一个请求的一生：readyState

const req = new XMLHttpRequest() readyState=0

req.open() readyState=1

req.send() readyState=2

第一个字符出现 （下载中） readyState=3

最后一个字符下载结束 （下载完成） readyState=4

下面我们用onreadystatechange事件实现一下刚才的代码

getCss.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', "/style.css")
    request.onreadystatechange = () => {
        //下载完成，但是不知道成功还是失败
        if (request.readyState === 4) {
            //若是加载成功状态码为2开头
            if (request.status >= 200 && request.status < 300) {
                const style = document.createElement('style')
                style.innerHTML = request.response
                document.head.appendChild(style)
            }
            else {
                alert('加载失败！')
            }
       }
   }
    request.send()
}

加载JS和HTML同理

本文地址：https://blog.csdn.net/qq_45060976/article/details/109251607