一、原生JS Ajax请求
1.传统方法的缺点？
A：传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
2.什么是Ajax？
A：Ajax的出现,刚好解决了传统方法的缺陷。
- 发送http请求与后台进行异步通讯的技术，请求后台数据，依靠接口（返回数据）；
- 用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，实现网页的异步更新（可以在不重新加载整个网页的情况下，对网页进行局部更新）；
- Ajax只能进行同源跨域：解决Ajax跨域问题就是通过JSONP或CORS解决
- Ajax设置同步会造成线程锁死，onreadystatechange无法进入
3.Ajax的原理？
实例化XMLHTTPRequest对象，使用此对象与后台通讯
二、XMLHttpRequest 对象
1.解释
XMLHttpRequest 对象是Ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支XMLHttpRequest
2.用法
abort() | 停止当前请求 |
getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader(“header”) | 返回指定首部的串值 |
open(“method”,“URL”,[asyncFlag],[“userName”],[“password”]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码 |
send(content) | 向服务器发送请求 |
setRequestHeader(“header”, “value”) | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (**‘post’**方法一定要 ) |
3.五步使用法
（1）创建XMLHTTPRequest对象；
（2）使用open方法设置和服务器的交互信息；
（3）设置发送的数据，开始和服务器端交互；
（4）注册事件；
（5）更新界面
4.Ajax创建异步对象XMLHttpRequest
操作XMLHttpRequest 对象：
- 设置请求参数（请求方式，请求页面的相对路径，是否异步）
- 设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange
- 获取异步对象的readyState 属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
- 判断响应报文的状态，若为200说明服务器正常运行并返回响应数据。
- 通过 responseText获得字符串形式的响应数据。
get请求：
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange= function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步骤五 如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}post请求：
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};封装Ajax及使用：
function ajax(method, url, data, success) {
var http = new XMLHttpRequest();
if (method == "get") {
if (data) {
url += "?";
url += data;
}
http.open(method, url);
http.send();
}
else {
http.open(method, url);
if (data) {
http.send(data);
}
else {
http.send();
}
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
success(http.response);
}
}
}
//使用Ajax
ajax("post", "./data/stu.txt", null, showinfo);
function showinfo(data) {
var stu = JSON.parse(data);
var ul = document.createElement("ul");
for (var i = 0; i < stu.length; i++) {
var li = document.createElement("li");
li.innerHTML = "姓名：" + stu[i].name + "/年龄：" + stu[i].age + "/性别：" + stu[i].sex + "/地址：" + stu[i].add;
ul.appendChild(li);
}
document.body.appendChild(ul);
}5.Ajax返回的状态：
0 － （请求未初始化）尚未调用open()方法
1 － （服务器连接已建立）已调用send()方法，正在发送请求
2 － （请求已接收）send()方法执行完成，已接收到全部响应内容
3 － （请求处理中）正在解析响应内容
4 － （请求已完成）响应内容解析完成，可以在客户端调用了
6.若想发出两个有顺序的Ajax需如何做？
可以用回调函数，也可以使用Promise.then或者async等
