一、什么是AJAX？
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。
AJAX是浏览器上的功能，
使用两个特性做如下的两件事：
- 在不重新加载页面的情况下发送请求给服务器。
- 接受并使用从服务器发来的数据。
二、如何使用AJAX？
四个步骤：
- 创建
XMLHttpRequest对象 - 调用对象的open方法
- 监听对象的onreadystatechange事件，在事件处理函数里面操作相关文件内容
- 调用对象的send方法（发送请求）
代码示例：
const request = new XMLHttpRequest()
request.open("GET","/index.html")
request.onreadystatechange = () => {
if(request.readyState === 4 && request.status === 200) {
console.log(request.response)
}
}
request.send()
readyState的数值含义
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
HTTP的请求方式
- GET系列请求
- GET
- DELETE 一般应用于告诉服务器，从服务器上删除点东西
- HEAD 只想获取响应头内容，告诉服务器响应主体内容不要了
- OPTIONS 试探性请求，发个请求给服务器，看看服务器能不能接收到，能不能返回
- POST系列请求
- POST
- PUT 和DELETE对应，一般是想让服务器把我传递的信息存储到服务器上（一般应用于文件和大型数据内容）
get 和 post 区别？
GET系列一般用于从服务器获取信息，POST系列一般用于给服务器推送信息，但是不论GET和POST都可以把信息传递给服务器，也能从服务器获取到结果，只不过是谁多谁少的问题
GET - 从指定的资源请求数据。
- 查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
- GET 请求可被缓存
- GET 请求保留在浏览器历史记录中
- GET 请求可被收藏为书签
- GET 请求不应在处理敏感数据时使用
- GET 请求有长度限制
- GET 请求只应当用于取回数据
POST - 向指定的资源提交要被处理的数据
- 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
- POST 请求不会被缓存
- POST 请求不会保留在浏览器历史记录中
- POST 不能被收藏为书签
- POST 请求对数据长度没有要求
客户端怎么把信息传递给服务器?
- 问号传参
request.open('GET','/getdata?xxx=xxx&xxx=xxx') - 设置请求头
request.setRequestHeader([key],[value]) - 设置请求主体
request.send(请求主体信息)
服务器怎么把信息返回给客户端？
- 通过响应头
- 通过响应主体（大部分信息都是基于响应主体返回的）
GET系列和POST系列的本质区别
- GET传递给服务器的内容比POST少，因为URL有最长大小限制（IE浏览器一般限制2KB，谷歌浏览器一般限制4~8KB，超过长度的部分自动被浏览器截取了）
- GET会产生缓存（缓存不是自己可控制的）：因为请求的地址（尤其是问号传递的信息一样），浏览器有时候会认为你要和上次请求的数据一样，拿的是上一次信息；这种缓存我们不期望有，我们期望的缓存是自己可控制的；所以真实项目中，如果一个地址，GET请求多次，我们要去除这个缓存；
- GET相比较POST来说不安全：GET是基于问号传参传递给服务器内容，有一种技术叫做URL劫持，这样别人可以获取或者篡改传递的信息；而POST基于请求主体传递信息，不容易被劫持；
三、jQuery.ajax与axios
行内人都知道，初级工程师学习API的使用，中级程序员学习封装，高级程序员学习造轮子，为了能够更加方便的使用ajax，有一群前端工程师封装了两个库。
其一，是使用最为广泛的jQuery库里的jQuery.ajax,其二则是最新的更加好用的axios库。
jQuery.ajax这个库已经非常的完美了，支持更多形式的参数，支持Promise，支持的功能超多。但是这个目前专业的前端都在用axios了。
四、jQuery.ajax
<script src="js/jquery.min.js"></script>
<script>
/*
* $.ajax() 基于原生JS的AJAX四步操作进行封装
* $.ajax([URL],[OPTIONS])
* $.ajax([OPTIONS]) URL在配置项中（推荐）
* $.get/post/getJSON/getScript()
* ......
* 配置项信息
* url:请求的API接口地址
* method:HTTP请求方式，默认GET
* data:传递给服务器的信息，默认null（可以是字符串，可以是对象，而且如果GET系列请求，JQ会自动把信息拼接到URL的末尾，基于问号传参传递给服务器；如果是POST请求，JQ会基于请求主体，把信息传递给服务器）
* dataType:预设服务器返回的结果格式（服务器返回的一般都是JSON格式的字符串，如果我们设置了DATA-TYPE，JQ会根据设置的类型，把服务器返回的结果处理为对应的格式），支持的内容text / json / xml / html / script / jsonp(跨域) =>不影响服务器返回的结果，只是把服务器返回的结果进行二次处理
* async:是否为异步操作，默认是TRUE，代表异步操作,同步操作太傻了
* cache:缓存处理，只对GET系列请求有作用，默认是TRUE不处理缓存，当我们设置FALSE后，JQ帮我们在URL的末尾设置一个随机数
* contentType:设置传递给服务器内容的格式类型 默认是"application/x-www-form-urlencoded"
* 客户端传递给服务器信息的格式（类型一般都是字符串），常用的：
* form-data表单数据：JSON格式 '{"name":"xxx","lx":1}'
* x-www-form-urlencoded：name=xxx&lx=1
* raw：纯文本格式
* headers:设置请求头信息，他是一个对象
* timeout:设置超时的时间
* success:回调函数，当数据请求成功执行，方法中的参数就是从服务器获取的结果
* error:回调函数，数据请求失败执行，方法中的参数是错误信息
* complete: Function( jqXHR jqXHR, String textStatus )请求完成后回调函数 (请求success 和 error之后均调用)。这个回调函数得到2个参数： jqXHR (XMLHTTPRequest) 对象和一个描述请求状态的字符串("success", "notmodified", "error", "timeout", "abort", 或者 "parsererror") 。从jQuery 1.5开始， complete设置可以接受一个函数的数组。每个函数将被依次调用。这是一个Ajax事件
*/
$.ajax({
url: 'http://example.com/login_in.php',
method: 'POST',
data: {
name: 'zhufeng',
lx: 'teacher'
},
dataType: 'json',
async: true,
cache: false,
headers: {},
success: (result, status, xhr) => {
//=>xhr:是JQ帮我们处理过的AJAX实例
console.log(result, status, xhr);
}
});
</script>
/*
* jqXHR.done(function(data, textStatus, jqXHR) {});
* 一个可供选择的 success 回调选项的构造函数，.done()方法取代了的过时的jqXHR.success()方法
*
* jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});
* 一种可供选择的 error 回调选项的构造函数，.fail()方法取代了的过时
* 的.error()方法。
*
* jqXHR.always(function(data|jqXHR, textStatus,jqXHR|errorThrown) { });
* 一种可供选择的 complete 回调选项的构造函数，.always()方法取代了的* 过时的.complete()方法。
*
* 在响应一个成功的请求后，该函数的参数和.done()的参数是相同的：data, *textStatus, 和 jqXHR 对象.对于失败的请求，参数和.fail()的参数是相同*的：jqXHR 对象, textStatus, 和 errorThrown。
*
* jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, *textStatus, errorThrown) {});
* 包含了 .done() 和 .fail()方法的功能，
*
*/
<script>
//JQ支持了Promise
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
// perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() { alert("second complete"); });
var xhr=$.ajax('example.php',{[options]}).then(()=>{},()=>{})
</script>
五、axios
axios作为专业前端目前最受欢迎的库，想必大家都是知晓的。 基于promise，用于浏览器和node.js的http客户端
特点
- 支持浏览器和 node.js
- 支持 promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求（但是取消的不是Promise，Promise是不可以被取消的，能被取消还承什么诺呢？）
- 自动转换 JSON 数据
- 浏览器端支持防止 CSRF (跨站请求伪造)
具体使用方法，参见我的另一篇博客
以上内容是个人的一些浅见，如有错误欢迎评论区指正补充。谢谢大家！
