Ajax笔记

---

Ajax（Asynchronous JavaScript and XML )：

JavaScript通过异步的方式发送请求，局部刷新页面。

---

简易的发送请求的方式

1. 地址栏回车
2. <img src=/xxx> //Accept：image/webp,image/*
3. <script src =/xxx> //Accept：text/JavaScript,*/*
4. <link rel=stylesheet href=/xxx>
5. <form action='/xxx' method=GET> //Accept：*/*

以上五种方式的缺点：

1. 会替换当前内容
2. 只能请求特定资源

---

原生JS发送Ajax

button.onclick = function(){
           var req = new XMLHttpRequest();
           req.open('POST','xxx?ud=s')

           //在请求行头里加了一个自己设置的Key&Keyvalue
           req.setRequestHeader('x-chiang','2222') 

           //onreadystateschange()：返回状态变化
           //每次readStates变化浏览器都会调用onreadystateschange()
           req.onreadystateschange = function(){ 
                  if(req.readyStates === 4){
                  if(req.states > 200 && req.states < 300){
                      console.log('成功')
}else{
                       console.log('失败')
}
}          
}
}

---

关于readyStates()

readyStates()返回一个 XMLHttpRequest 代理当前所处的状态。

返回下列状态值：
0：open没调用
1：send()没调用
2：已获取响应头，send(）被调用
3：正在下载响应体
4：请求完成（也意味着响应下载完毕）

对比以前的onload()方法，onreadystateschange()增加了我们处理请求响应的可控性，我们可以知道当前处于什么状态，也可在某个状态做一些事。