目录
1.什么是ajax
Asynchronous JavaScript + XML（异步 JavaScript 和 XML），简称为AJAX。其本身不是一种新的技术，因为它本身不是一种编程语言，是一种标准的方法。用于前后端数据交互，客户端向服务端发送信息的工具，以及接受响应的工具。该技术可以在不需要重新加载整个页面的情况下，完成对页面上部分数据的交互刷新。、
ajax的请求分为异步请求（async == true）和同步请求（async == false）
异步请求是指在请求发出后，浏览器还可以进行其他操作，继续做其他的事，一般默认为true。异步请求可以完全不影响用户的体验效果，因为用户不需要去等待浏览器或长或短时间的才返回的响应，可以去操作页面的其他内容，不会出现等待的感觉。
同步请求是在请求发出后，浏览器什么都不能做，也就是说页面在加载到当前ajax的时候，就会处于伪卡死的状态。只有在ajax代码执行完毕页面才会进行刷新。打个比方，你去排队买东西，明明东西都是一家的，商家和你说一个队伍只能买一种商品，那你就需要在买完一个商品后重新排队购买。这一点就和异步不一样，异步是可以在买完一件商品后，接着去选购其他的商品而不需要去选择重新排队。
2.如何使用ajax
原生的js就可以使用ajax，用户体验比较好，不需要刷新页面就可以更新页面的数据。但缺点是浏览器引擎的支持度不够高。
ajax存在一个迷惑的点，如他的名字一样Asynchronous JavaScript + XML，这里显而易见的可以看到ajax是使用xml文件在做数据的传输，但将数据作为存文本或者json文件来进行传输也很正常。
ajax的使用可以分为如下的几个步骤，
1.首先用户在浏览器页面发生了一个事件。
2.然后创建了一个XMLHTTPRequest对象，并向服务器发送请求。
3.服务器在接收并处理请求后，将响应发送回浏览器。
4.js开始读取响应，并做出处理。
创建一个ajax对象
let xhr = new XMLHttpRequest() //IE8+
let xhr = new ActiveXObject('Mricosoft.XMLHTTP') //IE8及以下配置连接信息
//这里的open方法内一共有三个参数，
//第一个参数表示请求方式，包括GET、POST、PUT、DELETE
//其中POST请求在发送数据时，需要设置请求头
//第二个参数表示请求路径，可以是本地的一个json文件、xml文件、php文件等等，也可以是一个后端接口的地址。
//第三个参数是一个布尔值，默认为true，表示异步或同步请求。这个参数一般不写，系统默认将其设置为true
xhr.open("GET","./data.json",true)发送请求
//该方法内部其实存在一个可选参数，请求体。因为没有指定值，所以一般都是null，也就可以不写改参数。
xhr.send()处理请求
//处理请求前，说一下状态码的问题。这里的状态码有ajax的状态码，同样也有http的状态码
//先说ajax的状态码readyState,值可以是0、1、2、3、4
//0 代表初始化,代理被创建，但尚未调用open方法
//1 配置信息以完成，open方法已经被调用
//2 send方法已经完成调用，且头部和状态已可以获得
//3 信息下载中，此时的response已经包含部分数据
//4 下载操作已完成，客户端已拿到数据
//再说说http的状态码，值可以是1**、2**、3**、4**、5**
//1** 信息，服务器收到请求，需要请求者继续执行操作
//2** 请求成功，操作被成功接受并处理
//3** 重定向，需要进一步的操作来完成要求
//4** 客户端错误，请求包含语法错误、亦或是无法完成请求
//5** 服务器错误，服务器在处理请求的过程中发生了错误
xhr.onreadystatechange = function(){
//需要判断每次请求的ajax的状态码是否为4，并且http的状态码是否为200-299（一般设置200就可以了）
if(xhr.readyState == 4 && xhr.status == 200){
//验证通过后，就可以在这里处理数据，获取服务器给我们响应的内容了
console.log(xhr.response) //字符串格式
//如果需要对数据进行操作,那就将数据转换一下
let result = JSON.parse(xhr.response)
console.log(result) //对象格式
}
}请求头的配置
//最常见的 POST 提交数据的方式
//浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据
//Content-Type 被指定为 application/x-www-form-urlencoded
//提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 会进行了 URL 转码
//大部分服务端语言都对这种方式有很好的支持
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//消息主体是序列化后的 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json');