原生JS之Ajax技术

1、Ajax原理

（摘自W3C）

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

通俗点说就是通过XmlHttpRequest（xhr）对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。

我们平时开发时使用最多的ajax当然是Jquery.ajax，下面先列出jquery封装的ajax

2、Jquery - Ajax

$.ajax({
	type: "",//POST or GET
	url : "",//请求的服务端地址，或者本地测试地址（以GET方式请求时在地址后加 ?id= % name = & ...）
	data: {},//POST请求时携带的参数
	async: "",//默认为true，即为经典的ajax异步请求
	cache: "",//默认为true，允许从浏览器缓存中加载请求信息
	dataType: "",//有xml、html、script、json、jsonp、text等类型，其中json较为常用，返回json数据
	success: function(data){
		//请求成功的操作逻辑
	},
	error: function(data){
		//请求失败的操作逻辑
	}
})

$.post(url,data,function(data,status){
	//操作
})
$.get(url,function(data,status){
	//操作
})

3、原生JS - Ajax

var Ajax = {
	//GET方法
	get: function(url){
		var xhr = new XMLHttpRequest(); //xhr对象在后台与服务器进行交换数据
		xhr.open('GET',url,false);//请求方式、请求路径、async方式
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 0){
				//请求未初始化（代理被创建，但尚未调用 open() 方法）
			}else if(xhr.readyState == 1){
				//服务器连接成功（open方法调用成功）------启动
			}else if(xhr.readyState == 2){
				//请求接受成功（send方法调用成功）--------发送
			}else if(xhr.readyState == 3){
				//请求处理中（数据传输中...）------------接收
			}else if(xhr.readyState == 4){
				//请求以完成，响应就绪（数据传输成功）-----完成
				if(xhr.status == 200 || xhr.status == 304){
					console.log(xhr)//所有数据都在xhr中携带返回
				}else{
					alert('错误+ 'xhr.status)	
				}
			}
		}
		xhr.send(); //请求方法。
	},
	//POST方法
	post: function(url,data){
		var xhr = new XMLHttpRequest();
		xhr.open('POST',data,false);
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
		//POST发起请求时，用来添加HTTP头部信息
		xhr.onreadystatechange = function(){
			if(xhr.readyStatus == 4){
				//if(0){}else if(1,2,3){}...
				if(xhr.status == 200 || xhr.status == 304){
					console.log(xhr)
				}
			}
		}
		xhr.send(data);
	}
}
//调用
Ajax.get(url);
let data = {};
Ajax.post(url,data);

4、常见请求服务器的状态码

序号	状态码	描述
1	100	客户必须继续发出请求
2	101	客户要求服务器根据请求转换HTTP协议版本
3	200	请求成功
4	201	提示知道新文件的URL
5	202	接受和处理、但处理未完成
6	203	返回信息不确定或不完整
7	204	请求收到，但返回信息为空
8	205	服务器完成了请求，用户代理必须复位当前已经浏览过的文件
9	206	服务器已经完成了部分用户的GET请求
10	300	请求的资源可在多处得到
11	301	删除请求数据
12	302	在其他地址发现了请求数据
13	303	建议客户访问其他URL或访问方式
14	304	客户端已经执行了GET，但文件未变化
15	305	请求的资源必须从服务器指定的地址得到
16	306	前一版本HTTP中使用的代码，现行版本中不再使用
17	307	申明请求的资源临时性删除
18	400	错误请求，如语法错误
19	401	请求授权失败
20	402	保留有效ChargeTo头响应
21	403	请求不允许
22	404	没有发现文件、查询或URl
23	405	用户在Request-Line字段定义的方法不允许
24	406	根据用户发送的Accept拖，请求资源不可访问
25	407	类似401，用户必须首先在代理服务器上得到授权
26	408	客户端没有在用户指定的时间内完成请求
27	409	对当前资源状态，请求不能完成
28	410	服务器上不再有此资源且无进一步的参考地址
29	411	服务器拒绝用户定义的Content-Length属性请求
30	412	一个或多个请求头字段在当前请求中错误
31	413	请求的资源大于服务器允许的大小
32	414	请求的资源URL长于服务器允许的长度
33	415	请求的资源不支持请求项目格式
34	416	在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
35	417	服务器不满足请求Expect头字段指定的期望值
36	500	服务器产生内部错误
37	501	服务器不支持请求的函数
38	502	服务器暂时不可用，有时是为了防止发生系统过载
39	503	服务器过载或暂停维修
40	504	关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
41	505	服务器不支持或拒绝支请求头中指定的HTTP版本