（五）AJAX之封装+跨域

回顾AJAX五步法

<script type="text/javascript">
			// 1.创建XMLHttpRequest异步对象
			var xhr;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
				// 主流浏览器
				console.dir(xhr)
			} else {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
				// 兼容IE写法
			}
			// 2.监听状态改变--设置回调函数
			xhr.onreadystatechange = callback;
			// 3.使用open(method,url,asyn)方法与服务器建立连接
			xhr.open("get", "new_file.txt");
			// 4.想服务器发送数据--注册事件,设置和服务器的交互信息,向服务器发送数据
			xhr.send();
			// 5.在回调函数中针对不同的响应状态进行处理,响应---接收服务器返回数据
			function callback() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					// 判断交互是否成功 && 服务器返回数据是否成功
					var responseText = xhr.responseText;
					// 将JSON数据解析/反序列化成普通的JS数组对象
					var xhrObject = JSON.parse(responseText);
					console.log(responseText);
					console.log(xhrObject);
					// 创建一个新的ul
					// var new_ul = document.createElement("ul");
					// // 将ul添加到body下面
					// document.body.appendChild(new_ul);
					// // 遍历数据并局部页面
					// xhrObject.forEach((item, index, self) => {
					// 	var new_li = document.createElement("li");
					// 	new_li.innerHTML = index + 1 + "---name:" + item.name + "---age:" + item.age + "---sex:" + item.sex;
					// 	new_ul.appendChild(new_li);
					// })
				}
			}
		</script>

AJAX封装

封装：基本模板与传参

/* url路径,data是否携带参数,method请求类型,success成功后返回值 */
			function ajax(url,data,method,success){
				
			}

此时调用模板时，如下所示

ajax('index.text',null,'get',function(){
				/* 回调函数 */
})
/* 注意：因为get方法没有参数，所以这里第二个参数设置为null */

ajax封装（完整版）

为了使用方便，接下来封装AJAX的get和post

<script type="text/javascript">
			function ajax(url,data,method,success){
				/* 1.建立异步对象 */
				var xhr;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject('Microsoft.XMLHTTP');
				}
				/* 2.判断请求类型 */
				if(method == 'get'){
					/* get请求类型
					get请求类型传值方式是将数据拼接到路由后进行传值*/
					if(data){
						url += '?';
						url += data;
					}
					xhr.open(method,url);
					xhr.send();
				}else{
					/* post请求类型
					post请求类型判断是否有传值，如果有则send发送至服务器，没有则不发 */
					xhr.open(method,url);
					if(data){
						xhr.send(data);
					}else{
						xhr.send();
					}
				}
				/* 3.注册事件，针对不同状态进行响应，获取返回数据
				 开发中，也可以将响应，即注册事件步骤，直接移至第一步创建异步对象下，以便更好地监听到状态变化。*/
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						/* 4.成功后执行回调函数
						 获取返回数据，reponseText表示以字符串形式接收服务器端返回信息
						 然后将其传参到调用处*/
						 success(xhr.responseText);
					}
				}
			}
		</script>

ajax封装调用

/* 封装调用
			接下来外部传参调用下封装的AJAX函数 */
			ajax('new_file.txt',null,'get',function(option){
				/* 回调函数 
				最后的匿名函数对应AJAX函数中封装的success成功回调，
				success里传参reponseText表示以字符串形式接收服务器端返回信息*/
				console.log(option);/* JSON格式 */
				console.log(JSON.parse(option))/* 普通JS对象数组格式，然后操作其对页面进行局部更新 */
			})

AJAX跨域

AJAX跨域指的是JS在不同的域之间进行数据传输或通信。

跨域方案：
1、jsonp跨域(重点)----前端处理方法
2、cros跨域-----后台处理

常见跨域场景

所谓的同源是指，域名、协议、端口均为相同。

http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域
http://www.nealyang.cn/index.html 调用 http://www.neal.cn/server.php 跨域,主域不同
http://abc.nealyang.cn/index.html 调用 http://abc.neal.cn/server.php 跨域,子域名不同
http://www.nealyang.cn:8080/index.html 调用 http://www.nealyang.cn/server.php 跨域,端口不同
https://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 跨域,协议不同
localhost 调用 127.0.0.1 跨域

AJAX跨域-JSONP

jsonp跨域原理：借助网页标签中src属性的跨域特性实现

src简介

src是source的缩写，资源的意思，在html中src表示资源地址，是js文件和图片文件的引入方式，经常引用外部资源，可以实现跨域访问，如下所示

接下来调用下百度搜索接口，如下所示

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=

解析：

wd为搜索关键词，百度搜索功能发送请求类型为get，因为所搜的关键词可以在url中可见。这里先不用回调

将之前代码做下调整，将url改为百度搜索接口，如下所示

注意：
因为是get方式，所以关键词传值需要拼接到url里，即通过data传参，且参数为想要的关键词，然后之前封装好的AJAX会将其进行封装，也就是说最后send对应的接口url为经过封装的AJAX函数拼接后的地址

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=海贼王

将之前代码做下调整，将url改为百度搜索接口，如下所示

译为：
通过CORS策略已阻止从来源“ http://127.0.0.1:8020”访问“ 接口”处的XMLHttpRequest：无“ Access-Control-Allow-Origin(访问控制允许来源)” 标头出现在请求的资源上。

1、协议不同https与http；2、域名不同；3、端口号不同，百度默认为80端口

接下来使用JSONP实现跨域，本质利用src属性的跨域请求资源特性，同理脚本标签也是通过src引入资源，所以可以进行封装处理，实现AJAX的跨域访问远程资源。
接下来做下测试，script标签引入接口文件，并在接口加入回调函数，然后在页面定义调用

测试结果如下

此时虽然有报错，但是已经没有报跨域错误，接下来将调用位置做下调整，先定义声明函数，然后再进行传值，如下所示

修改后测试结果如下

由此分析出，可以通过src属性实现跨域调取资源。但JSONP为动态插入，所以接下来还需要进行调整，之后介绍。

AJAX跨域-CROS

【前言】
CROS需要在后台进行配置→允许所有域名访问

1. PHP后台仅仅需要添加一句代码即可header(' Access-Control-Allow-Origin : * ');表示允许所有域名访问。
2. JAVA后台需要下载CROS包，然后进一步配置