Ajax

Ajax优势

不需要插件的支持，原生js就可以使用
用户体验好（不需要刷新页面就可以更新数据）
减轻服务端和带宽负担

1.运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，引擎会提交请求到服务器端，在这段时间内，客户端可以进行任意操作，直到服务器端将数据返回给Ajax引擎后，触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能；

2.js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据

//1.创建ajax对象
const xhr = new XMLHttpRequest();

//2.配置信息
//xhr对象中的open方法是来配置请求信息的
//第一个参数是本次请求的请求方式get/post/put/...
//第二个参数是本次请求的url
//第三个参数是本次请求是否异步，默认true表示异步，false表示同步
//xhr.open('请求方式','请求地址'，是否异步)
//
xhr.open('get','./data.php')
const xhr = new XMLHttpRequest()

//3.发送请求
//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()

//状态码
 readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
 readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
 readyState === 2 : 表示 send 方法已经执行完成
 readyState === 3 : 表示正在解析响应内容
 readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了
​

监听 ajax 对象的 readyState 值改变的的行为
 const xhr = new XMLHttpRequest() xhr.open('get', './data.php')
    xhr.send()
    xhr.onreadyStateChange = function () {
    // 每次 readyState 改变的时候都会触发该事件
    // 我们就在这里判断 readyState 的值是不是到 4
    // 并且 http 的状态码是不是 200 ~ 299
    if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
    // 这里表示验证通过
    // 我们就可以获取服务端给我们响应的内容了 }
}

5.ajax与axios的区别

axios是通过promise实现对ajax技术的一种封装
 ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。