一、什么是Ajax？
AJAX全称(Async Javascript and XML)，即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术。
特点：异步发送请求；无需重新刷新当前页面，采用部分刷新。
二、Ajax的原理是什么？
相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化，并不是所有的用户请求都提交给服务器，像一些数据处理可以交给Ajax引擎来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为服务器提交请求。
三、Ajax是怎样实现的？
（1）创建 Ajax的核心对象 XMLHttpRequest对象
通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象
const xhr = new XMLHttpRequest();
（2）通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
xhr.open(method, url, [async][, user][, password]) //method：表示当前的请求方式，常见的有GET、POST //url：服务端地址 //async：布尔值，表示是否异步执行操作，默认为true //user: 可选的用户名用于认证用途；默认为null //password: 可选的密码用于认证用途，默认为null
(3) 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
xhr.send([body]) //body: 在 xhr 请求中要发送的数据体，如果不传递数据则为 null 如果使用GET请求发送数据的时候，需要注意如下： //将请求数据添加到open()方法中的url地址中 //发送请求数据中的send()方法中参数设置为null1.
(4) 绑定onreadystatechange事件，XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
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) } } } //readyState 属性一共有5个值，分别表示不同的请求响应阶段： //0： 还未创建请求，即未调用 open() 方法 //1： 已调用 open() 方法，但未发送 send() 方法 //2： 已调用 send() 方法，但未接收到响应 //3： 已接收到部分响应 //4： 已接收到全部的响应
四、原生整体流程
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()
五、jquery插件封装的ajax请求
（1）如果是自己进行封装
function ajax(options) { //创建XMLHttpRequest对象 const 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.status if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML) } else { options.fail && options.fail(status) } } } }
(2) 如果是使用jQuery插件，首先需要引入插件，然后调用Ajax方法
形式：$.ajax({name:val, name:val,...});
可选字段：
1）url：链接地址，字符串表示
2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: '...', B: '...'}
3）type："POST" 或 "GET"，请求类型
4）timeout：请求超时时间，单位为毫秒，数值表示
5）cache：是否缓存请求结果，bool表示
6）contentType：内容类型，默认为"application/x-www-form-urlencoded"
7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
8）success：请求成功后，服务器回调的函数
9）error：请求失败后，服务器回调的函数
10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
$.ajax({ url: "/greet", data: {name: 'jenny'}, type: "POST", dataType: "json", success: function(data) { // data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型，故不需要再反序列化 ... } });
最后还有什么疑问之处请指出！
