Ajax详解(手写jq和axios部分实现)

含义：
async javascript and xml 异步的js和xml

Ajax原生JS操作

//一、创建Ajax实例
let xhr = new XMLHttpRequest();//IE下为ActiveObject对象
//二、打开请求: 发送请求之前的一些配置项
//1.HTTP METHOD:GET/POST/PUT/DELETE/HEAD/OPTIONS/TRACE/CONNECT/
//2.url:接口地址
//3.async：设置Ajax的同步异步，默认是异步
//4.user-name/user-pass用户名和密码，一般不用
xhr.open(method, url, async, [user-name], [user-pass])
//三、事件监听：一般监听的都是readystatechange事件(Ajax状态改变事件)，基于这个事件可以获取服务器返回的响应头响应主体
xhr.onreadystatechange = () => {
   
	if(xhr.readyState === 4 && xhr.status === 200){
   
		console.log(xhr.responseText);
	}
};
//四、发送Ajax请求：从这步开始，当前Ajax任务开始，如果Ajax是同步的，后续代码不会执行，要等到Ajax状态成功后再执行
xhr.send([请求主体内容])

关于HTTP请求方式：

GET 从服务器获取数据
POST: 向服务器推送数据
DELETE: 删除服务器端的某些内容
PUT: 向 服务器存放一些内容
HEAD: 只想获取服务器返回的响应头信息，不要响应主体的内容
OPTIONS: 一般使用它向服务器发送一个探测性请求，如果返回了信息，说明当前客户端和服务器端建立了连接，可以继续执行其他请求
TRACE: axios这个Ajax类库基于cross domain进行跨域请求的时候，就是先发送OPTIONS进行探测尝试。如果能连通服务器，才会继续发送其它的请求。

GET 和 POST的区别：
【传递给服务器信息的方式不一样】
GET通过url字符串传参，POST通过请求主体

[GET]
xhr.open('GET', '/tmp/list?xxx=xxx&xxx=xxx')

[POST]
xhr.send('xxx=xxx')
(一般是url-encode格式)

【GET不安全 POST相对安全】
因为 GET是基于”问号传参“把信息传递给服务器的，容易被hack进行url劫持，post是基于请求主体传递的。

【GET会产生不可控制的缓存，POST不会】
不可控：是浏览器的自主记忆，无法通过JS控制。
解决方案

xhr.open('GET', `/temp/list?lx=1000&_=${
     Math.random()}`);

其他区别：

• GET在浏览器回退时是无害的，而POST会再次提交请求
• GET请求会被浏览器主动缓存，而POST不会，除非手动设置
• GET请求参数会被完整保留在浏览器历史记录中，而POST不会
• GET请求只能进行url编码，而POST支持多种编码方式

Ajax状态 ready–state

0 => UNSENT 刚开始创建xhr, 还没有发送
1 => OPENED 已经执行了open这个操作
2 => HEADERS_RESERVED 已经发送Ajax，响应头已经被客户端接受
3 => LOADING 响应主体内容正在返回
4 => DONE 响应主体已经被客户端接收

HTTP网络状态码 status

根据状态码能够清楚的反映出当前交互的结果和原因
1XX ：指示信息-表示请求已接受、继续处理
2XX ：成功 - 表示请求已被成功接收
3XX ：成功，但是已经重定向
4XX : 客户端错误
5XX : 服务端错误

200 OK： 客户端请求成功
206 Partial Content: 客户发送了一个带有Range头的GET请求，服务器完成了它

301 Moved Permamently: 已经永久转至新的url
302 Found: 临时转至新的url，当一台服务器达到最大并发数，会转移服务器处理
304 Not Modified: 服务器告诉客户，原来的缓存可以继续使用，如CSS/JS/HTML/IMG,Ctrl+F5 304缓存失效

400 Bad Request: 客户端有语法错误，服务器不能理解
401 Unauthorized: 请求未经授权
403 Forbidden: 对被请求页面的访问被禁止
404 Not Found: 请求资源不存在
413 Request Entity Too Large 和服务器交互的内容资源超过最大大小

500 Interval Server Error 服务器错误，原来的缓存还能使用
503 Service Unavailable

关于XHR的属性和方法

xhr.response 响应主体内容
xhr.responseText 响应的内容是字符串(JSON或XML文档)
xhr.responseXML 响应的内容是xml

xhr.status 返回的HTTP状态码
xhr.statusText 状态码的描述

xhr.timeout 设置请求超时的时间

xhr.timeout = 1000
xhr.ontimeout = () => {
   
	console.log(‘请求超时’)
}

xhr.withCredentials 是否允许跨域（false）

xhr.abort() 强制中断Ajax请求

xhr.abort();
xhr.onabort = () => {
   }

xhr.getAllResponseHeaders() 获取所有响应头信息
xhr.getResponseHeader([key])例如：xhr.getResponseHeader(‘date’)就是获取响应头中的服务器时间
xhr.open() 打开url请求
xhr.overrideMimeType() 重写MIME类型
xhr.send()发送Ajax请求
xhr.setRequestHeader() 设置自定义请求头信息（不能出现中文），必须在open之后设置

xhr.onreadystatechange = () => {
   
	if(!/^(2|3)\d{2}$/.test(xhr.status))return;//证明服务器已经返回内容了
	if(xhr.readyState === 2){
   
		let time = xhr.getResponseHeader('date');
	}
	if(xhr.readyState === 4 && xhr.status === 200){
   
		JSON.parse(xhr.responseText);
	}
}

异步和同步的区别

异步：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx', true);
xhr.onreadystatechange = () => {
   
	if(xhr.readyState === 2) {
   
		console