（五）AJAX之封装+跨域

布满荆棘的人生 2023-06-13 09:58 100阅读 0赞

# 回顾AJAX五步法 #

# AJAX封装 #

封装：基本模板与传参

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

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

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

### ajax封装（完整版） ###

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

##### 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文件和图片文件的引入方式，经常引用外部资源，可以实现跨域访问，如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

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

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

###### 解析： ######

wd为搜索关键词，百度搜索功能发送请求类型为get，因为所搜的关键词可以在url中可见。这里先不用回调  
![在这里插入图片描述][20191120100054207.png]  
将之前代码做下调整，将url改为百度搜索接口，如下所示  
![在这里插入图片描述][20191120100108163.png]

> 注意：  
> 因为是get方式，所以关键词传值需要拼接到url里，即通过data传参，且参数为想要的关键词，然后之前封装好的AJAX会将其进行封装，也就是说最后send对应的接口url为经过封装的AJAX函数拼接后的地址
> 
>     https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=海贼王

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

![在这里插入图片描述][20191120100319219.png]

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

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

接下来使用JSONP实现跨域，本质利用src属性的跨域请求资源特性，同理脚本标签也是通过src引入资源，所以可以进行封装处理，实现AJAX的跨域访问远程资源。  
接下来做下测试，script标签引入接口文件，并在接口加入回调函数，然后在页面定义调用  
![在这里插入图片描述][20191120100457750.png]  
测试结果如下  
![在这里插入图片描述][20191120100512745.png]  
此时虽然有报错，但是已经没有报跨域错误，接下来将调用位置做下调整，先定义声明函数，然后再进行传值，如下所示  
![在这里插入图片描述][20191120100520516.png]  
修改后测试结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]  
由此分析出，可以通过src属性实现跨域调取资源。但JSONP为动态插入，所以接下来还需要进行调整，之后介绍。

### AJAX跨域-CROS ###

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191116152410852.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191120100054207.png]: https://img-blog.csdnimg.cn/20191120100054207.png
[20191120100108163.png]: https://img-blog.csdnimg.cn/20191120100108163.png
[20191120100319219.png]: https://img-blog.csdnimg.cn/20191120100319219.png
[20191120100457750.png]: https://img-blog.csdnimg.cn/20191120100457750.png
[20191120100512745.png]: https://img-blog.csdnimg.cn/20191120100512745.png
[20191120100520516.png]: https://img-blog.csdnimg.cn/20191120100520516.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191120100535803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70