AJAX的起源：
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范。Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML。
AJAX具体包括以下步骤：
1.创建XMLHttpRequest实例；
2.发出http请求
3.接收服务器传回的数据
4.更新网页数据
概括起来就是一句话：AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
现在服务器返回的都是JSON格式的数据了，XML格式已经过时了，但是AJAX这个名字已经成了一个通用名词，字面含义已经消失了。
XMLHttpRequest对象是AJAX的主要接口，用于浏览器与服务器之间的通信，尽管名字里面有XML和http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）
XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例，它没有任何参数，一旦建成实例，就可以使用open()方法发出HTTP请求：
myButton.addEventListener('click',(e) => {
let Aa = new XMLHttpRequest() //创建
Aa.open('GET','xxx.com') //初始化
Aa.send() //发送
})
Aa.open('接收一个method','接受一个url','询问是否异步，一般都是默认true')
// 三步操作，创建一个对象，初始化它，然后发送它
在AJAX出现以前，人们发请求可以通过form，a，img，link，script，但是这几种方式都有各自的缺陷，form会刷新或者新开页面，a只能发get请求，并且也会刷新或者新开页面，img可以发送get请求，但是只能以图片的形式展示，link可以发get请求，但是只能以CSS，favicon的形式展示，script可以发get请求，但是只能以脚本的形式运行。
AJAX问世以后，通过open()方法，就可以发get，post，put，delete请求
readyState 请求的五种状态
当值为0的时候，表示未打开，open()方法还未被调用
当值为1的时候，表示未发送，send()方法还未被调用
当值为2的时候，表示已获取响应头，send()方法已经被调用，响应头和相应状态已返回
当值为3的时候，表示正在下载响应体，响应体下载中，responseText中已经获取部分数据
当值为4的时候，表示请求完成，整个请求过程已经完毕。
ps：如果XML很长，浏览器不可能一下子就下载完，所以浏览器有个优化方式就是下载多少告诉你多少，所以有可能2的过程很长。
pss：0，1，2，3，4这五个过程必须是依次逐个经过的，
psss：如果状态是4，表示已经把响应下载完毕了
onreadystatechange
onreadystatechange可以捕获所有readyState状态码的改变
例：
mybutton.addEventListener('click',(e) => {
let request = new XMLHttpRequest() //创建对象
//监听这个对象的readyState变化
request.onreadystatechange = () => {
if(request.readyState === 4){ //状态码为4表示请求完成
if(request.status >= 200){
let string = request.responseText
//把符合JSON语法的字符串转换成JS对应的值
let object = window.JSON.parse(string)
}else if(request.status >= 400){
console.log('请求失败')
}
}
}
request.open('get','/xxx') //初始化对象
request.send() //发送他
})
以上代码整个过程就是请求，响应，然后解析，parse就是解析字符串是什么意思，然后把它变成一个JS的对应的值。
AJAX其实只有四行代码：
1.创建对象 let xx = new XMLHttpRequest()
2.配置对象 xx.open('get','http://xxx.com:80')
3.发送 xx.send()
4.监听这个对象的readystate状态码，判断readystate和status
xx.onreadystatechange = () => {
if(xx.readyState === 4){
if(xx.status >= 200){}else if(xx.status >=400){}
}
}
通过AJAX我们可以任意设置请求的四部分中的所有东西，也可以获取响应中四个部分的所有内容，这就是AJAX的厉害之处。
JS设置任意请求header：
设置第一部分： xxx.open('get','/xxx')
设置第二部分：xxx.setHeader('content-Type','x-www-form-urlencoded')
第三部分不用设置，因为它就是一个回车
设置第四部分：xxx.send('a=1&b=2')
JS获取任意响应header
获取第一部分：状态码可以通过 xxx.status获取；ok以及no可以通过 xxx.statusText获取
获取第二部分：xxx.getResponseHeader()或者xxx.getAllResponseHeader()
获取第四部分：xxx.responseText
网友评论