今天来总结分享一下AJAX的相关知识以及基本原理，在学习AJAX之前，我们首先来了解两个概念，异步和线程。
异步
生活中，同步就是同时进行，异步就是依次执行。但是在程序中，这两个概念刚好相反，同步就是依次执行，JavaScript代码大部分是同步执行，比较代表性的就是alert()；如果有多条alert()语句，那么就是一条执行完，执行下一条，依次执行；异步在程序中指同时执行，JavaScript中的事件，还有计时器都属于异步执行。
线程
如果说一个功能是程序，执行一个功能的整个过程是进程，那么，执行一个功能的过程中的每一个分支就是线程。JavaScript一大特点就是单线程的语言，同一个时间只能做一个事件，那么有了异步，JavaScript就可以使用异步模拟了多线程的操作，来提高效率。
下面正式进入今天的分享主题：
什么是AJAX？
AJAX，全称Asynchronous JavaScript and XML，指异步的JavaScript和XML。AJAX是前后端交互的重要手段，目前IE5以上均兼容
AJAX的特点
可以异步加载数据，可以在不中断浏览器其他任务的情况下加载数据，无需重新加载整个网页的情况下，能够更新部分网页。
AJAX的使用环境
需要在服务器环境下运行。其实，ajax本身是不需要的，但在前后端交互过程中，后端是需要服务器是，所以ajax也需要在服务器环境下运行。
AJAX的使用
1、创建请求对象（载体对象）
var xhr = new XMLHttpRequest();
2、设置请求参数
xhr.open("method",url,是否异步);
- method：GET和POST
POST和GET的区别：
1.POST主要用来发送数据，GET主要用来接受数据；
2.PSOT发送数据的安全性较好，而GET较差；
3.POST发送数据不限制大小，而GET大小受限2~100k。
- url：要请求的接口地址
- 是否异步：接收一个布尔值，是否开启异步请求，不写的话，默认为true
1.为true时，服务器请求是异步进行的，也就是脚本执行send() 方法后不等待服务器的执行结果，而是继续执行脚本代码；
2. 为false时，服务器请求是同步进行的，也就是脚本执行send() 方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码。
3、通过onreadystatechange，监听响应状态
- onreadystatechange事件 ：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
-
readyState状态：ajax的执行阶段
0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了 -
HTTP 状态码 ajax.status
1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误语法或不能完成
5xx：服务器执行一个完全有效请求失败
比如： 200——成功； 404——没有找到文件 - responseText属性、responseXML属性：获取来自服务器的响应数据
4、发送：send(string)
只有post使用send()发送，get是通过url地址发送数据。
AJAX使用的封装——GET
function ajaxGet(url,cb,data){
// 0.处理默认值,保证data绝对是一个对象
data = data || {};
// 1.解析并拼接数据
var str = "";
for(var i in data){
str += i + "=" + data[i] + "&";
}
// 2.将拼接好的数据,再拼接到url上，并拼接时间戳，处理缓存问题
var d = new Date();
url += "?" + str + "__dd=" + d.getTime();
// 3.开启ajax的过程
var xhr = new XMLHttpRequest();
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
cb(xhr.responseText);
}
}
xhr.send();
}
AJAX使用的封装——POST
function ajaxPost(url,cb,data){
data = data || {};
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
str = str.slice(0,str.length-1);
var ajax = new XMLHttpRequest();
ajax.open("post",url,true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
cb(ajax.responseText);
}
}
//向请求添加 HTTP 头
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(str);
}
文中若有疑问，欢迎留言交流~~
