AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
Ajax请求有两种 get请求和post请求。
get / post 不是对立的，他俩是可以共存的。
很多人都喜欢说 post请求比get 请求更安全。但是在前端根本没有安全性可言，get，post请求转化后都是?ie=utf-8&f=8&的形式。get请求我们看见我们请求的信息出现在地址栏中，觉得很不安全。post请求虽然没显示在页面中但是也可以在前端获取到。只是用户体验不同而已。对于前端来说是用户体验是第1位。
下面我们来封装ajax
ajax5步执行：
0 初始化 -- 刚创建这个对象 new ()下面
1 已连接 open 下面
2 已送达 我们发的东西送过去了
3 已接收 header 认为 3就可以结束 也是OK的
4 已接收 body
2、状态码的含义：
（1）1xx (消息)不需要反馈 websocket
（2）2xx 成功
（3）3xx 重定向 。什么是重定向呢？例如， 儿时朋友 你去他家找他， 他家人住的人变了(你不认识了) 他告诉你 他搬到那那那了，你去那个地方找他。
（4）301 永久重定向 ( 基本不会这么用 )
比如 浏览器已经记住了 你就应该访问 https://www.baidu.com
（5）302 临时重定向 (99%使用)
http://baidu.com ====> https://www.baidu.com
（6）304 缓存（服务器 和 客户端之间的关系）
告诉你本地缓存已经有了数据，服务端就不会再发一次，让你去本地获取
（7）4xx 客户端报错 404没找到
（8）5xx 服务端的错误 =====>(503) 服务器过载了 服务器不可用
（9）6xx 扩展( 自己可以去添加 )
为什么状态码都是数字呢？因为只有数字才是世界通用的呀！
function ajax(options){
options=options||{};
options.type=options.type||'get';
options.data=options.data||{};
options.dataType=options.dataType||'text';
//不兼容IE6
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
//xhr=new ActiveXObject("Microsoft.XMLHTTP");
// 1.初始化
let xhr=new XMLHttpRequest();
//数据组装
let arr=[];
for(let name in options.data){
arr.push(`${encodeURIComponent(name)}=${enc odeURIComponent(options.data[name])}`);
}
let strData=arr.join('&');
// 判断是post请求还是get请求
if(options.type=='post'){
//2.连接 open的参数1：发送请求的类型 参数2：路径
// 参数3：同步还是异步（true）(版本高的浏览器禁止同步)
xhr.open('POST', options.url, true);
// 设置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// 3.发送请求
xhr.send(strData);
}else{
// get请求参数2需要拼接？
xhr.open('GET', options.url+'?'+strData, true);
// 发送请求
xhr.send();
}
//接收
xhr.onreadystatechange=function (){
//4--执行到第4步了 已经接受到请求
if(xhr.readyState==4){
//成功——2xx、304
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
let data=xhr.responseText;
switch(options.dataType){
case 'json':
// 兼容问题
if(window.JSON && JSON.parse){
//字符串转json
data=JSON.parse(data);
}else{
// 浏览器版本低 eval
// 不安全 ==> ( 语法要求 )
data=eval('('+str+')');
}
break;
case 'xml':
data=xhr.responseXML;
break;
}
options.success && options.success(data);
}else{
options.error && options.error();
}
}
};
}
