Ajax的温故而知新

一 前言

由于近半年开发基本都是使用vue结合axios来跟数据打交道，不得不说这种方式真的很无脑，所以逐渐的对原生的ajax和JQuery的ajax开始生疏。今天就想做一个复习跟总结。ajax是前端中至关重要的东西，如果你也读到了这篇文章，希望对你也有一定的帮助。

二 原生Ajax的步骤跟概念

其实这种方式在工作中根本不可能用到，但是这又是我们了解ajax本质的最佳方式，只有通过原生的概念，才能真正去理解ajax底层的原理。

//一、创建Ajax实例
let xhr = new XMLHttpRequest();//IE下为ActiveObject对象
//二、打开请求(open): 发送请求之前的一些配置项
//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([请求主体内容])

2.1 关于raadyState的状态码说明：

        0 => 刚开始创建xhr, 还没有发送

        1 => 已经执行了open这个操作

        2 => 已经发送Ajax，响应头已经被客户端接受

        3 => 响应主体内容正在返回（并没有下载完全）

        4 => 响应主体已经被客户端接收

附图希望可以更好地理解

 

2.2 关于XHR的属性和方法

属性：

        xhr.response 响应主体内容

        xhr.responseText 响应的内容是字符串(JSON或XML文档)

        xhr.responseXML 响应的内容是xml

        xhr.status 返回的HTTP状态码

        xhr.statusText 状态码的描述

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

方法：

        xhr.open() 打开url请求

        xhr.send() 发送Ajax请求,参数为请求主体对象

        xhr.setRequestHeader() 设置自定义请求头信息（不能出现中文），必须在open之后设置

2.3 关于HTTP的请求方式(只列举常见的)：

• GET: 从服务器获取数据
• POST: 向服务器推送数据
• DELETE: 删除服务器端的某些内容
• PUT: 向 服务器存放一些内容
• HEAD: 只想获取服务器返回的响应头信息，不要响应主体的内容
• OPTIONS: 一般使用它向服务器发送一个探测性请求，如果返回了信息，说明当前客户端和服务器端建立了连接，可以继续执行其他请求

2.4 列举一下GET和POST的区别：

参考文章：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会产生不可控制的缓存，POST不会产生缓存

④：GET在浏览器回退时是无害的，而POST会再次提交请求

⑤：GET请求在URL中传送的参数是有长度限制的，而POST没有

⑥：GET请求参数会被完整保留在浏览器历史记录中，而POST不会

⑦：GET请求只能进行url编码，而POST支持多种编码方式

三  jquery中的ajax

/**
 * DATA：
 *	如果是GET请求是基于问号传参过去的
 *	如果是POST请求是基于请求主体传递过去的
 *	data的值可以是对象也可以是字符串(一般常用对象)：
 *		如果是对象，jq会把对象转换为 xxx=xxx 的模式(x-www-form-urlencoded)
 * DATA-TYPE:预设置获取结果的数据格式 TEXT/JSON/JSONP/HTML/XML/SCRIPT(服务器返回给客户端的响应主体中的内容一般是字符串，
 *	而设置DATA-TYPE='json'，jq会内部把获取的字符串转化为JSON格式的对象 => 它不影响服务器返回的结果，只是二次处理结果)
 * ASYNC:设置是否异步
 * CACHE:设置是否缓存,当设置FALSE，并且get请求，JQ会在请求的url地址末尾加随机数
 * SUCCESS:回调函数，当Ajax请求成功执行，JQ执行回调函数时把响应主体中获取的结果(二次处理)当做参数
 * ERROR: 请求失败后执行的回调函数
 */
$.ajax({
	url: 'xxx',
	method: 'GET',
	data: null,
	dataType: 'json',
	async: true,
	cache: true,
	success: (result, textStatus, xhr) => {},
	error: () => {}
})

关于Ajax一点小小的总结，希望对大家有帮助！