Javascript基础知识体系化学习总结（八）Ajax
一、XMLHttpRequset
1.这个是ajax中最核心的API，不过一般不需要我们去手写，学习阶段倒是可以。
2.它是一个对象，使用时需要new创建。
3.该对象包含open方法、onreadystatechange方法、send方法。
4.open方法有三个参数，第一个是选择请求方式（get/post等等），第二个是请求的地址，第三个是是否异步（写布尔值，一般采用true即异步）。
5.onreadystatechange方法可以监听请求的状态码state和是否接受到的码readystate，可以利用这个方法对请求过程进行判断。
6.send方法是把我们请求需要的参数发送出去，如果是get方法则写null即可，如果是其它需要发送参数的请求则写上参数，注意必须写有get方法才能真正发生请求！
7.手写一个简单的ajax请求函数（带promise）：
<!DOCTYPE html>
<html>
<head>
<title>手写Ajax</title>
</head>
<body>
<script type="text/javascript">
function ajax(url) {
const p = new Promise((resolve, reject) =>{
const xhr = new XMLHttpRequest() // 该对象需要先实例化
xhr.open('GET', url, true) // 确定请求的方式、地址、是否异步等
xhr.onreadystatechange = function () { // 监听发送过程中码的变化
if(xhr.readyState === 4){ // 代表已经请求回来数据并且可以使用
if(xhr.status === 200) { // 代表请求成功
resolve(Json.parse(xhr.responseText))
}
}else {
reject(new Error('请求失败'))
}
}
xhr.send(null) // 发送请求！！必须写！
})
return p // 最后把promise返回即可！
}
</script>
</body>
</html>
二、状态码
1.首先是readyState：
0代表未发送
1代表已经调用send方法，正在发生
2代表已经发送成功，请求回来数据
3代表正在解析请求回来的数据
4代表数据已经请求回来且解析成功可以使用
2.接下来是state，这个比较多且复杂，具体可以百度自行查看，我们简略的说一下：
以2xx开头的是成功请求
以3xx开头的是需要重定向，浏览器自动跳转
以4开头的是客户端错误
以5开头的是服务端错误
三、跨域
1.首先是为什么要跨域，因为同源策略，在客户端才有，为了安全，浏览器要求必须是保证域名、协议、端口三者一致（当前网页与服务器端比较）才能发生ajax请求。而所有的跨域都需要经过服务端的配合，否则就是改浏览器自身存在问题，不安全！
2.谁可以不用跨域？包括img、link和script三个标签可以无视同源策略。
3.跨域的方法有两种jsonp（客户端）和cors（服务器端）。
4.客户端如何实现一个简单的jsonp跨域请求：
<script>
window.abc = function (data) { // 回调函数是由我们发送跨域请求时定义的名字
console.log(data)
}
</script>
<script src="https://localhost:8080?name=DD&callback=abc"></script>
5.实现ajax的插件，因为一般情况是不会自己手写请求的，我们了解一下一些请求的插件：
jquery：比较适合简单的场景，无异步
fetch：存在兼容性问题
axios：应用较为广泛，比较推荐！
好了，javascript的第八个模块大概就是这些内容了，我会将它分为11个模块然后13篇文章左右把它讲完（有的模块内容多会范围上下期大概。。。），学完这些模块相信大家对基础的js会有一个比较体系化的认识，那么大家加油，我是O5,我们下次见！