AJAX

AJAX基础

1.什么是AJAX？

async JavaScript and xml：异步的JS和XML
此处的异步指的是：局部刷新（对应的是全局刷新）

AJAX解决了网页异步刷新的问题

XML和JSON

XML：可扩展的标记语言，用自己自定义的标签来存储数据的（很早之前，基于AJAX和服务器进行交互的数据格式一般都以XML格式为主，因为它能清晰展示出对应的数据和结构层级；但是后面，流行了一种新的数据格式JSON，它不仅比XML更清晰展示数据的结构，而且同样的数据存储，JSON更加轻量，也方便解析和相关的操作，所有现在前后端的数据交互都以JSON格式为主）

//.json文件样式
[{
	"name":"张三",
	"age":"25",
	"score":{
		"english":"95"
	}
},{
	"name":"张三",
	"age":"25"
},{
	"name":"张三",
	"age":"25"
}]

2.AJAX的基础操作

核心四步

//1.创建AJAX实例
let xhr=new XMLHttpRequest;//IE低版本浏览器中用的是 newActiveXObject()
//2.打开URL（配置发送请求的信息）
//method：HTTP请求方式
//URL：请求地址（API接口地址）
//ASYNC：设置同步或者异步，默认是true异步，false同步
//USER-NAME:传递给服务器的用户名
//USER-PASS：传递给服务器对的密码
xhr.open('GET','./json/xxx.json',true);
//3.监听AJAX状态，在状态为X的时候，获取服务器响应的内容
xhr.onreadystatechange=function(){
	if(xhr.readyState===4 && /^(2/3)\d{2}$/.test(xhr.status)){
		let result = xhr.responseText;
	}
}
//4.发送请求
//send中放的是请求主体的内容
xhr.send(null);
=>AJAX任务（发送一个请求给服务器，从服务器获取到对应的内容）从send后开始，到xhr.readyState===4的时候算任务结束

HTTP请求方式

• get系列请求
  • get
  • delete 一般应用于告诉服务器，从服务器上删除点东西
  • head 只想获取响应头内容，告诉服务器响应主体内容不要了
  • options 试探性请求，发个请求给服务器，看看服务器能不能接收到，能不能返回
• post系列请求
  • post
  • put 和delete对应，一般是想让服务器把我传递的信息存储到服务器上（一般应用于文件和大型数据内容）

真实项目中对应的请求方式，会使请求变的更加明确（语义化），不遵循这些方式也可以，最起码浏览器在语法上市允许的；但是这些事开发者们相互间约定俗成的规范；

get系列一般用于从服务器获取信息，post系列一般用于给服务器推送信息，但是不论get和post都可以把信息传递给服务器，也能从服务器获取到结果，只不过是谁多谁少的问题

• get：给的少，拿的多
• post：给的多，拿的少

客户端怎么把信息传递给服务器？
问好传参 xhr.open(‘GET’,’/getdata?xxx=xxx&xxx=xxx’)
设置请求头 xhr.setRequestHeader([key],[value])
设置请求主体 xhr.send(请求主体信息)

服务器怎么把信息返回给客户端？
通过响应头
通过响应主体(大部分信息都是基于响应主体返回的)

get系列和post系列的本质区别：
get系列传递给服务器信息的方式一般采用：问号传参
post系列传递给服务器信息的方式一般采用：设置请求主体

1.get传递给服务器的内容比post少，因为URL有最长大小限制（IE浏览器一般限制2kb，谷歌浏览器一般限制4-8kb，超过长度的部分自动被浏览器截取了）

xhr.open('GET','/list?....')
xhr.send('...') 请求主体中传递的内容理论上没有大小限制，但是真实项目中，为了保证传输的速度，我们会自己限制一些

2.get会产生缓存（缓存不是自己可控制的）：因为请求的地址（尤其是问号传递的信息一样），浏览器有时候会认为你要和上次请求的数据一样，拿的是上一次信息；这种缓存我们不期望有，我们期望的缓存是自己可控制的；所以真实项目中，如果一个地址，get请求多次，我们要去除这个缓存；

//解决办法设置随机数
xhr.open('GET','/list?name=xxxx&_='+Math.random());
xhr.send('GET','/list?name=xxxx&_='+Math.random());

3.get相比较post来说不安全：get是基于问号传参递给服务器内容，有一种技术叫做URL劫持，这样别人可以获取或者篡改传递的信息；而post基于请求主体传递信息，不容易被劫持；

AJAX的状态码

xhr.readyState 获取状态码
-UNSEND 0 :未发送（创建一个XHR，初始状态是0）
-OPENED 1 :已经打开（执行了xhr.open）
-HEADERS_RECEIVED 2 :响应头信息已经返回给客户端（发送请求后，服务器会以此返回响应头和响应主体的信息）
-LOADING 3 ：等待服务器返回响应内容
-DONE 4 :响应主体信息已经返回给客户端

let xhr = new XMLHttpRequest;
//console.log(xhr.readyState); //0
xhr.open('GET','json/data.json');
//console.log(xhr.readyState); //1
xhr.onreadystatechange = function(){
	//console.log(xhr.readyState); //2 3 4
	if(/^(2|3)\d{2}$/.test(xhr.status)) return;
	if(xhr.readyState ====2){
		//获取响应头信息
		//获取的服务器时间是标准的日期格式对象（GMT格林尼治时间）
		//new Date（）能把格林尼治时间转换为背景时间
		let serverTime = xhr.getResponseHeader('Date');
		console.log(new Date(serverTime));
	}
	if(xhr.readyState ====4){
		//获取响应主体信息：一般用responseText，因为服务器返回的信息一般都是json格式的字符串，如果返回的是XML格式，用responseXML..
		//xhr.responseXML
		//xhr.response
		//xhr.responseType
		console.log(xhr.responseText);
	}
}
xhr.send(null);

在线创建API接口 Easy Mock
或者http://yapi.demo.qunar.com

汇总XHR的属性和方法及事件

• xhr.reponse/xhr.reponseText/xhr.reponseXML
• xhr.status/xhr.statusText
• xhr.timeout
• xhr.withCredentials
• xhr.abort()
• xhr.getAllResponseHeaders()
• xhr.getResponseHeaders([key])
• xhr.open()
• xhr.overrideMimeType()
• xhr.send()
• xhr.setRequestHeader()

let xhr = new XMLHttpRequest;
//xhr.timeout = 1000; //设置AJAX等待时间，超过这个时间算AJAX延迟
//xhr.ontimeout = function(){
//	console.log('请求超时');
//	xhr.abort(); //手动中断AJAX的请求
//}
//xhr.withCredentials=true; //在跨域请求中是否允许携带证书（携带COOKIE）
xhr.open('GET','json/data.json');
xhr.onreadystatechange = function(){
	if(/^(2|3)\d{2}$/.test(xhr.status)) return;
	if(xhr.readyState ====4){
		console.log(xhr.responseText);
	}
}
xhr.send(null);

AJAX中的同步和异步

//AJAX任务异步
let xhr = new XMLHttpRequest;
xhr.open('GET','json/data.json');
xhr.send(null);
setTimeout(function() {},5000);
xhr.onreadystatechange = function(){
	console.log(xhr.readyState); //2 3 4 
}

//AJAX的同步
let xhr = new XMLHttpRequest;
xhr.open('GET','json/data.json',false);
xhr.onreadystatechange = function(){
	console.log(xhr.readyState); //4 使用AJAX同步编程，不能再状态码为2的时候获取到响应头的信息，但是状态码4也是可以获取到头和主体信息
}
xhr.send(null);

let xhr = new XMLHttpRequest;
xhr.open('GET','json/data.json',false);
xhr.send(null); //执行后，只有状态码为4才会继续处理下面的代码
//状态码为4的时候绑定的，而状态不会在变了，所以方法不会执行
xhr.onreadystatechange = function(){
	console.log(xhr.readyState); 
}