Ajax原理是什么，怎么实现？

Ajax是在不需要重新加载整个网页的情况下，与服务器交换数据并且更新部分网页的技术。

Ajax的原理就是通过XMLHttpRequest对象来向服务器发起异步请求，从服务器获取数据，然后用JavaScript来操作DOM实现更新页面。

实现Ajax异步交互，前端需要完成这个步骤：

创建Ajax的核心对象XMLHttpRequest对象
通过XMLHttpRequest对象的open方法与服务器建立连接
构建请求所需的数据内容，并且通过XMLHttpRequest对象的send函数发送数据给服务器
通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器的通信状态
接受并且处理服务器返回的数据结果
将处理结果更新到页面上

创建XMLHttpRequest对象

通过XMLHttpRequest构造函数初始化一个XMLHttpRequest实例对象：

const xml = new XMLHttpRequest();

和服务器连接

通过XMLHttpRequest对象的open方法，与服务器建立连接：

xhr.open(method,url,async,user,password)

method：请求方法
url：服务器地址
async：布尔值，表示是否异步执行，默认是true
user：可选的用户用于认证用途，默认null
password：可选的密码用于认证用途，默认为null

给服务器发送数据

通过XMLHttpRequest对象的send方法，把客户端页面的数据发送给服务器：

xhr.send([body])

body：在请求中要发送的数据体，如果不传递则为null。

如果使用GET请求方式发送数据的时候，需要注意：

将请求的数据添加到open()中的url部分，
发送的数据的send()方法中的参数设置为null

绑定onreadystatechange事件

onreadystatechange事件用于监听服务器的通信状态，主要监听的属性为XMLHttpRequest.readyState。

XMLHttpRequest.readyState有几个状态：

UNSENT，未打开
OPENED，未发送
HEADER_RECEIVED，获取响应头
LOADING，正在下载响应体
DONE请求完成

只要readyState发生改变，就会触发onreadystatechange事件，XMLHttpRequest.responseText属性用于接收服务器的响应结果。

const request = new XMLHttpRequest()
request.onreadystatechange = function (e) {if (request.readyState === 4) { // if (request.status >= 200 && request.status <= 300) {console.log(request.responseText) // } else if (request.status >= 400) {console.log(" " + request.status)}}
}
request.open('POST', 'http://xxxx')
request.send()

封装一个Ajax函数

function ajax(options) {// XMLHttpRequestconst xhr = new XMLHttpRequest()//options = options || {}options.type = (options.type || 'GET').toUpperCase()options.dataType = options.dataType || 'json'const params = options.data//if (options.type === 'GET') {xhr.open('GET', options.url + '?' + params, true)xhr.send(null)} else if (options.type === 'POST') {xhr.open('POST', options.url, true)xhr.send(params)//xhr.onreadystatechange = function () {if (xhr.readyState === 4) {let status = xhr.statusif (status >= 200 && status < 300) {options.success && options.success(xhr.responseText, xhr.responseXML)} else {options.fail && options.fail(status)}}}}
}

使用：

ajax({type: 'post',dataType: 'json',data: {},url: 'https://xxxx',success: function (text, xml) {//console.log(text)},fail: function (status) {console.log(status)}
})