什么是Ajax？
定义
Ajax ( Asynchronous JavaScript and XML ，异步 JavaScript 与 XML 技术）是一种有效利用 JavaScript 和 DOM ( Document Object Model ，文档对象模型）的操作，以达到局部 Web 页面替换加载的异步通信手段。和以前的同步通信相比，由于它只更新一部分页面，响应中传输的数据量会因此而减少，这一优点显而易见。
Ajax 的核心技术是名为 XMLHttpRequest 的 API ，通过 JavaScript 脚本语言的调用就能和服务器进行 HTTP 通信。借由这种手段，就能从已加载完毕的 Web 负面上发起请求，只更新局部页间。
同步和异步请求
什么是同步请求？
同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
什么是异步请求？
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
Ajax工作原理
客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：
XMLHttpRequest对象介绍
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
首先我们在控制台打印一下，看看XMLHttpRequest 对象上有什么属性和方法,如图：
XMLHttpRequest 对象方法：
- new XMLHttpRequest()：创建新的 XMLHttpRequest 对象
- abort()：取消当前请求
- getAllResponseHeaders()：返回头部信息
- getResponseHeader()：返回特定的头部信息
- open(method, url, async, user, psw)：
method：请求类型 GET或POST
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码
- overrideMimeType() ：重写response的content-type
- send()：将请求发送到服务器，用于 GET 请求
- send(string)：将请求发送到服务器，用于 POST 请求
- setRequestHeader()：向要发送的报头添加标签/值对
XMLHttpRequest 对象属性：
- onreadystatechange：定义当 readyState 属性发生变化时被调用的函数
- readyState 只读：保存 XMLHttpRequest 的状态。
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4： 请求已完成且响应已就绪
- response 只读：返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 responseType 的值。其中包含整个响应实体（response entity body）。
- responseText 只读：以字符串返回响应数据，返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
- responseXML 只读：以 XML 数据返回响应数据，返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。
- responseType：一个用于定义响应类型的枚举值（enumerated value）。
- status 只读：返回请求的状态号
200: “OK”
403: “Forbidden”
404: “Not Found”
- statusText 只读：返回状态文本（比如 “OK” 或 “Not Found”）
- timeout：一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。与之配套的还有一个timeout事件，用来指定回调函数。
- ontimeout ：当请求超时调用的 event handler。
- upload 只读：代表上传进度。
- withCredentials：一个布尔值 (en-US)，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。
XMLHttpRequest 对象事件
- onreadystatechange：每当 readyState 改变时，就会触发 onreadystatechange 事件。
- abort：当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。也可以使用 onabort 属性。
- error：当 request 遭遇错误时触发。也可以使用 onerror 属性
- load：XMLHttpRequest请求成功完成时触发。也可以使用 onload 属性.
- loadend：当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。也可以使用 onloadend 属性。
- loadstart：传输开始。也可以使用 onloadstart 属性。
- progress：当请求接收到更多数据时，周期性地触发。也可以使用 onprogress 属性。
- ontimeout：在预设时间内没有接收到响应时触发。
Ajax的使用步骤
- 创建 Ajax 核心对象（XMLHttpRequest）
- 通过 Ajax 核心对象的
open()方法建立与服务端的链接 - 构建请求的数据内容，通过核心对象的
send()方法发送给服务端 - 通过核心对象提供的
onreadystatechange事件，监听服务端的通信状态，接受处理服务端响应的结果
步骤详细说明：
创建 Ajax 核心对象（XMLHttpRequest）
var xhr = new XMLHttpRequest()通过 Ajax 核心对象的 open() 方法建立与服务端的链接
参数详细说明见上XMLHttpRequest 对象方法
xhr.open('get', 'http://localhost:8888/test/first', true)构建请求的数据内容，通过核心对象的 send() 方法发送给服务端
xhr.send()//GET方法一般不带参数，POST方法要带参数，参数为一段字符串，该字符串是发送给服务器处理的通过核心对象提供的 onreadystatechange 事件，监听服务端的通信状态，接受处理服务端响应的结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
//判断这次请求是否成功 - 是否是2开头的
//请求状态 -http状态：
/*
1开头：正在进行中
2开头：各种成功
3开头：重定向 - 缓存
4开头: 客户端错误
5开头: 服务端错误
*/
if(xhr.status >= 200 && xhr.status < 300){
//表示这次请求是成功，已经完成了
//接收对方的数据
var res = xhr.responseText
console.log(res)
}
}
}完整版：
var xhr = new XMLHttpRequest()
xhr.open('get','http://'请求路径'') //第三个参数为可选项，默认true - 异步
xhr.send()
xhr.onreadystatechange = function(){
//判断是否结束
if(xhr.readyState === 4) {
//判断请求是否成功
if(parseInt(xhr.status/100) == 2) {
//接收数据
var res = xhr.responseText
console.log(res)//返回的数据是json格式的
// json字符串转换成js对象 - JSON.parse(json字符串) - 返回js对象
res = JSON.parse(res)
console.log(res);
console.log(res.age);
}
}
}结尾
虽然现在用的比较多的是fetch和基于Ajax封装的axios，但是万变不离其宗，还是有必要学一下Ajax，后期也可能会写关于axios和fetch的使用说明，大家可以关注一下。最后，创作不易，求点赞！