解析 -AJAX 及 -jQuery中ajax的应用

什么是 AJAX

async javascript and xml： 异步的 JS 和 XML

• 此处的异步指的是：局部刷新（对应的是全局刷新）
• XML：可扩展的标记语言，用本身自定义的标签来存储数据的（在很早之前，咱们基于 AJAX 和服务器进行交互的数据格式通常都已 XML 格式为主，由于它能清晰展现出对应的数据和结构层级；可是到后面，流行了一种新的数据格式 JSON，它不只比 XML 更清晰展现数据的结构，并且一样的数据存储，JSON 更加轻量，也方便解析和相关的操做，因此如今先后端的数据交互都已 JSON 格式为主）

<?xml version="1.0" encoding="UTF-8"?>
<root> <student> <name>张三</name> <age>25</age> <score> <english>95</english> </score> </student> <student> <name>张三</name> <age>25</age> </student> <student> <name>张三</name> <age>25</age> </student> </root>
-------------------------
[{
"name": "张三",
"age": 25,
"score": {
"english": 95
}
}, {
"name": "张三",
"age": 25
}, {
"name": "张三",
"age": 25
}]
复制代码

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

AJAX的基础操做

//1.建立AJAX实例
let xhr=new XMLHttpRequest; //=>IE低版本浏览器中用的是 new ActiveXObject() 高程三中JS惰性编程思想，关于XHR的兼容处理

//2.打开URL（配置发送请求的信息）
//METHOD:HTTP请求方式
//URL:请求地址（API接口地址）
//ASYNC:设置同步或者异步，默认是TRUE异步，FALSE同步
//USER-NAME:传递给服务器的用户名
//USER-PASS:传递给服务器的密码
xhr.open('GET','./json/xxx.json',true);

//3.监听AJAX状态，在状态为X的时候，获取服务器响应的内容
//AJAX状态码：0 1 2 3 4
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均可以把信息传递给服务器，也能从服务器获取到结果，只不过是谁多谁少的问题

• 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?name=zhufeng&year=10&xxx=xxx...')
xhr.send('....')  请求主体中传递的内容理论上没有大小限制，可是真实项目中，为了保证传输的速度，咱们会本身限制一些
复制代码

2. GET会产生缓存（缓存不是本身可控制的）：由于请求的地址（尤为是问号传递的信息同样），浏览器有时候会认为你要和上次请求的数据同样，拿的是上一次信息；这种缓存咱们不指望有，咱们指望的缓存是本身可控制的；因此真实项目中，若是一个地址，GET请求屡次，咱们要去除这个缓存；

//=>解决办法设置随机数
xhr.open('GET','/list?name=zhufeng&_='+Math.random());
...
xhr.open('GET','/list?name=zhufeng&_='+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 : 响应主体信息已经返回给客户端

<script>
		 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); 
	</script>
复制代码

同步异步

<script>
   //=>AJAX任务的异步
    let xhr = new XMLHttpRequest;
   xhr.open('GET', 'json/data.json');
   //=>设置事件绑定以前状态1
   xhr.onreadystatechange = function () {
      console.log(xhr.readyState); //=>2 3 4
   }
   xhr.send(null);

    let xhr = new XMLHttpRequest;
   xhr.open('GET', 'json/data.json');
   xhr.send(null);
   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);
   }

   // API：Application Programming Interface 凡是可被别人调用，而且给予反馈结果的均可以被称之为API接口
</script>
复制代码

<script>
		 let xhr = new XMLHttpRequest;
		// xhr.timeout = 10; //=>设置AJAX等待时间，超过这个时间算AJAX延迟
		// xhr.ontimeout = function () {
		// console.log('请求超时~~');
		// xhr.abort(); //=>手动中断AJAX的请求
		// }
		// xhr.withCredentials = true; //=>在跨域请求中是否容许携带证书（携带COOKIE）
		xhr.open('GET', 'json/data.json');
		//=>设置请求头信息
		// xhr.setRequestHeader('AAA', encodeURIComponent('珠峰培训'));
		// Uncaught TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString. 设置的请求头信息值不能是中文
		xhr.onreadystatechange = function () {
			if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
			if (xhr.readyState === 4) {
				console.log(xhr.responseText);//-> {"code":63732359.6050773,"data":[{"name":"laborum velit reprehenderit et adipisicing"},{"name":"sed occaecat dolore"}]}
			}
		}
		xhr.send(null);
	</script>
复制代码

AJAX 的同步问题

阻塞代码加

延迟加载时间，性能低

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

【属性】

• xhr.response 响应主体内容

• xhr.responseText 响应主体的内容是字符串（JSON或者XML格式字符串均可以）

• xhr.responseXML 响应主体的内容是XML文档

• xhr.status 返回的HTTP状态码

• xhr.statusText 状态码的描述

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

• xhr.withCredentials 在跨域请求中是否容许携带证书（携带COOKIE）

【方法】

• xhr.abort() 强制中断AJAX请求
• xhr.getAllResponseHeaders() 获取全部响应头的信息
• xhr.getResponseHeader([key]) 获取KEY对应的响应头信息
  • 例如：xhr.getResponseHeader( 'date') 就是在获取响应中的服务器时间
• xhr.open() 打开URL请求
• xhr.overrideMimeType() 重写MIME类型
• xhr.send() 发送AJAX请求
• xhr.setRequestHeader() 设置请求头

JQUERY中 ajax 的应用

<script src="js/jquery.min.js"></script>
	<script>
		/* * $.ajax() 基于原生JS的AJAX四步操做进行封装 * $.ajax([URL],[OPTIONS]) * $.ajax([OPTIONS]) URL在配置项中（推荐） * $.get/post/getJSON/getScript() * ...... * 配置项信息 * url:请求的API接口地址 * method:HTTP请求方式，默认GET * data:传递给服务器的信息，默认null（能够是字符串，能够是对象，并且若是GET系列请求，JQ会自动把信息拼接到URL的末尾，基于问号传参传递给服务器；若是是POST请求，JQ会基于请求主体，把信息传递给服务器） * dataType:预设服务器返回的结果格式（服务器返回的通常都是JSON格式的字符串，若是咱们设置了DATA-TYPE，JQ会根据设置的类型，把服务器返回的结果处理为对应的格式），支持的内容text / json / xml / html / script / jsonp(跨域) =>不影响服务器返回的结果，只是把服务器返回的结果进行二次处理 * async:是否为异步操做，默认是TRUE，表明异步操做 * cache:缓存处理，只对GET系列请求有做用，默认是TRUE不处理缓存，当咱们设置FALSE后，JQ帮咱们在URL的末尾设置一个随机数 * contentType:设置传递给服务器内容的格式类型 默认是"application/x-www-form-urlencoded" * 客户端传递给服务器信息的格式（类型通常都是字符串），经常使用的： * form-data表单数据：JSON格式 '{"name":"xxx","lx":1}' * x-www-form-urlencoded：name=xxx&lx=1 * raw：纯文本格式 * headers:设置请求头信息，他是一个对象 * timeout:设置超时的时间 * success:回调函数，当数据请求成功执行，方法中的参数就是从服务器获取的结果 * error:回调函数，数据请求失败执行，方法中的参数是错误信息 */
		$.ajax({
			url: 'http://yapi.demo.qunar.com/mock/95100/project/list',
			method: 'POST',
			data: {
				name: 'zhufeng',
				lx: 'teacher'
			},
			dataType: 'json',
			async: true,
			cache: false,
			headers: {},
			success: (result, status, xhr) => {
				//=>xhr:是JQ帮咱们处理过的AJAX实例
				console.log(result, status, xhr);
			}
		});
	</script>
复制代码