一、AJAX的原理

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

二、使用方法

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

创建一个XMLHTTPRequest对象

const 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()
}

JSON支持的数据类型：

string-只支持双引号，不支持单引号和无引号
number-支持科学记数法
bool - true和 false
null-没有undefined
object
array

就这六种，注意跟JS的七种数据类型区别开来不支持函数,不支持变量(所以也不支持引用)

JSON.parse

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

let object
try {
object=JSON.parse('{`name`:`liyue`}')
} catch (error) {
console.log(`出错啦`);
console.log(error);
object={'name':'no name'}
}
console.log(object);

JSON.stringify

是JSON.parse的逆运算
JS数据=> JSON字符串
由于JS的数据类型比 JSON多，所以不一定能成功
如果失败,就抛出一个Error对象

浅析AJAX