AJAX

1. 什么是 AJAX ？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。用 JS 发请求和收响应，就是 AJAX ( Async JavaScript And XML)。

• AJAX 是浏览器上的功能
• 浏览器可以发请求，收响应
• 浏览器在 window 上加了一个全局函数 XMLHttpRequest 函数
• 用这个构造函数可以构造出一个对象
• JS 通过它来发请求和收响应

2. 使用 AJAX 的四个步骤

AJAX 可以加载（请求和响应）：html,css,js,xml,json

1. 创建 XMLHttpRequest 对象
2. 调用 XMLHttpRequest 对象的 open 方法
3. 监听对象的 onreadystatechange 事件 （实质是回调函数）
4. 在事件处理函数里面操作文件内容
5. 调用对象的 send 方法

举例：

// ajax 加载（请求和响应） css
getCSS.onclick = () => { // 在点击事件里面，做请求
    const request = new XMLHttpRequest()
        // 第一步：创建 XMLHttpRequest 对象，此时 readyState = 0
    request.open('GET', '/style.css')
        // 第二步：调用对象的 open 方法：request.open(method,url)，此时 readyState = 1
    request.onreadystatechange = () => {  // 该函数其实是回调函数，在 send 函数执行以后再调用该函数
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) // 如果 readyState 在200到300之间，说明路径正确
            {
                const style = document.createElement('style')
                    // 创建一个新的 css 标签
                style.innerHTML = request.response
                    // 将获取到的 css 内容写入到新的 css 标签里面
                document.head.appendChild(style)
                    // 最后将写入了内容的 css 标签插入到 html 的 head 里面
            } else {
                alert('加载 css 失败')
            }
        }
    }
    request.send(); // 
    // 调用对象的 send 方法（发送请求），此时 readyState = 2
}

一个请求的一生：

ready State （一个请求的一生）
- const request = new XMLHttpRequest()     // ready state：0
- request.open()                           // ready state：1
- request.send()                          // ready state：2
- 第一个信息出现在浏览器的时候              // ready state：3
- 信息下载完成                            // ready state：4

3. JSON 的两个方法

1. JSON.parse

• 将符合 JSON 语法的字符串装换成 JS 对应类型的数据
• JSON 字符串 => JS 数据
• 由于 JSON 只有六种数据类型，所以转换成 JS 对应的数据类型也只有六种
• 如果不符合 JSON 语法，则会抛出一个 Error 对象
• 一般会用 try catch 来捕获错误

2. JSON.stringify

• 是 JSON.parse 的逆运算
• JS 数据 => JSON 字符串
• 由于 JS 的数据类型比 JSON 多，所以不一定能成功

4. demo 代码

具体 demo 案例可以访问 我的 gitHub 查看代码。