一、AJAX的原理

AJAX 就是异步的 JS 和 XML 的缩写，目前我们一般用 JSON 代替 XML。
AJAX 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面。
该技术最核心概念是 XMLHttpRequest 对象，该对象可发起 HTTP 请求，我们可以监听其 readystate 的变化获得响应。
具体代码在第二部分分析
优点是不刷新就可以发起请求并接受响应。
缺点是被浏览器限制不能跨域。

二、使用方法

想要用 JS 发起一个AJAX请求很简单，一共 4 步。

创建一个XMLHTTPRequest对象

let request = new XMLHttpRequest()

设置请求参数

request.open('GET', '/style.css')

监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.response)
  }
};

发送请求

request.send()

一个请求的一生

请求在不同阶段会有不同的readyState，了解这个更能理解第三步onreadyStateChange事件

请求的不同阶段	readyState
let request = new XMLHttpRequest()	0
request.open('GET', '/style.css')	1
request.send()	2
第一个响应信息出现在浏览器	3
所有响应下载完成	4

三、加载CSS

getCSS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {
        // 如果请求成功
        // 下载完成，但是不知道是200的完成还是404的完成
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                //请求发送成功
                // 把css内容写入style标签然后插入head
                const style = document.createElement('style')
                // 怎么获取相应内容？ request.response
                style.innerHTML = request.response
                document.head.appendChild(style)
            } else {
                // 请求失败
                alert("加载 CSS 失败");
            }
        }

    }
    request.send()
}

重点在怎么处理拿到的响应：生成style标签

四、加载JS

重点在怎么处理拿到的响应：生成script标签

getJS.onclick = () => {
    console.log('111')
    const request = new XMLHttpRequest()
    request.open('GET', '/2.js')
    request.onreadystatechange = () => {
        // 下载完成，但是不知道是200的完成还是404的完成
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                //请求发送成功
                // 把js内容写入script标签然后插入head
                const script = document.createElement('script')
                // 怎么获取相应内容？ request.response
                script.innerHTML = request.response
                document.body.appendChild(script)
            } else {
                // 请求失败
                alert("加载 JS 失败");
            }
        }
    }
    request.send()
}

五、加载HTML

重点在怎么处理拿到的响应：先创建一个新的div, 让div.innerHTML = 响应，再appendChild到相应位置

getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/3.html')
    request.onload = () => {
        const div = document.createElement('div')
        div.innerHTML = request.response
        document.body.appendChild(div)
    }
    request.onerror = () => {
    }
    request.send()

}

六、加载JSON

JSON.parse 将符合JSON语法的字符串转换成JS对应类型的数据

JSON.stringify 把JS数据变成JSON字符串

getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status === 200) {
                // 请求成功
                // 怎么解析JSON? JSON.parse: string -> JS对象
               
                const obj = JSON.parse(request.response);
            

            }
        }
    }

    request.send()
}

练习AJAX代码地址：github.com/dandanloveJ…

《浅析AJAX》