AJAX之封装+跨域

AJAX封装与跨域实践：JSONP深入解析

最新推荐文章于 2022-08-23 20:09:40 发布

原创最新推荐文章于 2022-08-23 20:09:40 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

日报同时被 3 个专栏收录

13 篇文章

订阅专栏

ajax跨域

2 篇文章

订阅专栏

ajax封装

1 篇文章

订阅专栏

本文详细介绍了AJAX的基本步骤，包括创建XMLHttpRequest对象、设置回调函数、open()、send()及处理响应。接着，讨论了AJAX的封装，提供了get和post请求的封装示例，以简化开发流程。接着，探讨了AJAX的跨域问题，重点讲解了JSONP的原理和实现，通过实例展示了如何利用JSONP进行跨域请求。最后，简要提到了CORS跨域方案，并总结了JSONP跨域的实践应用。

AJAX5步法

先简单回顾下之前所说的5步法
1、创建异步对象XMLHttpRequest

/*（1）创建XMLHttpRequest异步对象*/
			var xhr;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			} else {
				xhr = new ActiveXObject("Microsoft.XMLHTTP")
			}

2、设置回调函数

/* 2.设置回调函数*/
   xhr.onreadystatechange = callback;

3、open()方法连接服务器

xhr.open('get', 'student.text')

**4、send()方法发送数据至服务器 **

xhr.send()

5、回调函数中针对不同响应状态进行处理，局部更新界面

xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
	
	}
}

完整代码如下所示

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
 * {
    margin: 0;
    padding: 0;
   }

   div {
    border: 1px solid red;
    margin: 50px;
   }

   p {
    border: 1px solid blue;
   }
  </style>
 </head>
 <body>
  <button name="ajax">ajax</button>
 </body>
 <script type="text/javascript">
  var btn = document.querySelector("button[name='ajax']");
  console.log(btn)
  btn.addEventListener('click', callback, false) /* false是事件冒泡，true是事件捕获，不写的话默认是false。 */
  function callback() {
   /* 1.创建 XMLHttpRequest一步对象*/
   var xhr;
   if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); /* 主流浏览器 */
   } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* 兼容IE写法 */
   }
   console.log(xhr)
   /* 2.设置回调函数*/
   xhr.onreadystatechange = callback;

   /* 3.使用open方法与服务器建立连接 */
   xhr.open("get", "naonao.text", true)
   /* 4.注册事件，设置和服务器的交互信息，向服务器发送数据 */
   xhr.send()
   /* 5.回调函数处理---响应---针对不同的响应状态进行处理 */
   function callback() {
    if (xhr.readyState == 4 && xhr.status == 200) {
     var responseText = xhr.responseText;
     console.log(responseText)
     var xhrObject = JSON.parse(responseText)
     console.log(xhrObject)
     var new_div = document.createElement('div');
     document.body.appendChild(new_div);
     for (var i = 0; i < xhrObject.length; i++) {
      var new_p = document.createElement('p');
      var new_string = "";
      new_string += "姓名:" + xhrObject[i].name;
      new_string += " &nbsp 年龄:" + xhrObject[i].age;
      new_p.innerHTML = new_string;
      new_div.appendChild(new_p)
     }
    }
   }
  }
 </script>
</html>

接下来测试下get请求类型，将open连接服务器步骤里的请求类型设置为get，如下所示
利用HBuilder编辑器打开(启动时自带本地服务器)如下所示
接下来转换JSON数据为普通JS对象型，如下所示

AJAX封装

【前言】
目前为止，已经实现基本功能，但AJAX的调用还十分麻烦，步骤比较繁琐，在日常开发一般会将其进行封装，所以接下来封装下AJAX功能相关步骤函数，以后使用直接调用即可，同时大大提高了开发效率。
为了使用方便，接下来封装AJAX的get和post
封装：基本模板与传参
此时调用模板时，如下所示
封装1：建立异步对象
封装2：判断请求类型

在这里插入图片描述

get请求类型传值方式是将数据拼接到路由后进行传值，所以接下来需要判断是否传值(对比post请求)，回顾之前所讲
1、get请求类型传值方式是将数据拼接到路由后进行传值
2、post请求类型判断是否有传值，如果有则send发送至服务器，没有则不发
封装3：注册事件，针对不同状态进行响应，获取返回数据
开发中，也可以将响应，即注册事件步骤，直接移至第一步创建异步对象下，以便更好地监听到状态变化。
封装调用：
接下来外部传参调用下封装的AJAX函数
此时控制台测试，便可以输出打印JSON格式数据，所以如果想用JS进一步操作，需要进行反序列化解析即JSON.parse()，然后操作其对页面进行局部更新。

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跨域：
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改为百度搜索接口，如下所示
接下来使用JSONP实现跨域，本质利用src属性的跨域请求资源特性，同理<script></script>脚本标签也是通过src引入资源，所以可以进行封装处理，实现AJAX的跨域访问远程资源。
接下来做下测试，script标签引入接口文件，并在接口加入回调函数，然后在页面定义调用
测试结果如下
此时虽然有报错，但是已经没有报跨域错误，接下来将调用位置做下调整，先定义声明函数，然后再进行传值，如下所示

在这里插入图片描述

修改后测试结果如下

在这里插入图片描述

除了通过JSONP解决跨域外，常见的方法还包含CROS方法
【前言】
CROS需要在后台进行配置→允许所有域名访问
1、PHP后台仅仅需要添加一句代码即可表示允许所有域名访问。
2、JAVA后台需要下载CROS包，然后进一步配置

header(' Access-Control-Allow-Origin : * ');

小结

目前为止，讲解了JSONP跨域原理和CROS跨域方案

下节利用前端JSONP实现“百度关键词”跨域案例。

完毕，如有疑问请随时联系小编