前端技术分享-码匠 极客编程技术分享

您当前位于：AJAX数据交互 ——> AJAX | JSONP跨域详解
上一篇：AJAX | iframe跨域的案例实战 - 使用iframe提交表单 下一篇：AJAX | postMessage与postMessage跨域

AJAX | JSONP跨域详解

2016/05/09 18:49:08 | 作者：HTML5学堂（码匠） | 分类：AJAX数据交互 | 关键词：JSONP,跨域,Ajax

详析JSONP跨域

HTML5学堂：本文主要涉及什么是JSONP，JSONP的原理与实现流程，利用JSONP实现百度搜索的关键词获取，JSONP跨域的优劣势。

JSONP的详析流程：

1 什么是JSONP

2 JSONP的原理与实现流程

2.1 JSONP跨域流程

2.2 相关提示

3 JSONP的实例 - 辅助理解JSONP流程

3.1 JSONP跨域实例 - 前端的JS代码

3.2 JSONP跨域实例 - 后台的PHP代码

3.3 代码的注意事项

4 利用JSONP实现百度搜索的关键词获取

4.1 功能需求与效果

4.2 提供的接口（API）说明

4.3 接口返回示例

4.4 实例开发

5 JSONP跨域的优劣势

5.1 JSONP跨域的优点

5.2 JSONP跨域的缺点

5.3 注意事项

1 什么是JSONP

JSONP，是解决跨域的一种解决方案，在这种解决方式当中通过JavaScript类型的数据（多数为对象）进行传递，和JSON的格式很相似，因此我们把这种解决跨域的方案命名为JSONP。

JSONP，可以拆成JSON和P。其中，JSON是一种轻量级的数据格式，可以理解为前端与后台之间协定的一种数据交互格式；换言之，前端识别一些语言，后台识别一些语言，JSON，既能够被前端识别，又能够被后台识别。P表示package（打包、包装）的意思，那么JSONP可以简单的理解为“包装”JSON。

2 JSONP的原理与实现流程

JSONP跨域流程

一图胜千言，如果您想要下载“高清版”，可以关注我们的微信号，并发送“图”到我们的公众号。

JSONP跨域流程

如下流程即为上图流程的“描述”。我们再回顾一下吧~

1 前端通过JS，动态创建一个script标签

2 前端利用script的src，实现不同域后台文件的申请（简言之就是将src的属性值设置为B域中的XX.php等路径）

3、4 前端将需要给后台传递的数据放置在URL串中，还需要将“申请到数据后”想要运行的功能函数“作为参数”传递给后台

5 后台接收到前端传递的数据

6 后台语言根据需求，从数据库中获取数据

7 后台将从数据库中得到的数据以JSON格式存储

8 后台将JSON格式的数据作为“参数”放置在函数中（形成一段JS代码，JS代码的功能就是运行“前端此前定义的功能函数”）

9 后台将JS代码返回前端并运行JS函数

10 在前端中定义的函数被运行，后台传递的数据存在于参数当中（此时我们可以再书写要执行的DOM操作等功能）

相关提示

您在查看JSONP的流程时，可能会产生如下问题：

1 后台需要的参数名，可以随便定义吗？

答案是：不可以，后台是需要根据字段在数据库中进行数据查找的，因此此处不能随便定义。而在开发当中，后台会为前端提供API接口文档，前端只需要查看文档，就能够了解需要使用什么参数名。

2 为何要动态设置JavaScript？

答案是：可以静态设置src，但是这也就意味着参数值会被定死。通常我们都是需要向后退申请某些数据，这些数据有可能是需要用户来定义的，此时，用动态的方式进行创建，可以满足“参数值不确定”的功能需求。

3 JSONP的实例 - 辅助理解JSONP流程

看完理论层面的流程之后，我们再借助一个简单的实例来理解一下。注意：HTML5学堂小编将第一步到第十步的功能分别对应其命令，标注在了注释当中。（对于第四步，本身属于便于理解的层面，并没有对应代码）

该JSONP实例的功能需求：希望在A域中访问http://localhost/h5course中的h5course.php文件，并且获取这个文件返回的内容。A域与http://localhost/h5course处于不同域。

JSONP跨域实例 - 前端的JS代码

  1. // 对应于第一步
  2. var newScript = document.createElement('script');
  3. // 对应于第二步和第三步，第三步为?后面的内容“name=HTML5&callback=callFn”
  4. newScript.src = 'http://localhost/h5course/h5course.php?name=HTML5&callback=callFn';
  5. // 对应于第一步
  6. document.body.appendChild(newScript);
  7. // 对应于第十步
  8. function callFn(data) {
  9.     console.log(data);
  10. }

JSONP跨域实例 - 后台的PHP代码

  1. <?php
  2.     // 对应于第五步
  3.     $id = $_GET['name'];
  4.     $callback = $_GET['callback'];
  5.     // 对应于第六七步，在此定义一个变量，用于存储JSON数据。为$json赋值的数据，为第六步（当前的第六步为模拟实现，真实的第六步需要申请后台数据库）
  6.     $json = '';
  7.     if ($id == 'HTML5') {
  8.         $json = '{
  9.             "name": "HTML5学堂：http://www.h5course.com/"
  10.         }';
  11.     } else {
  12.         $json = '{
  13.             "name": "iOS"
  14.         }';
  15.     }
  16.     // 第八步 将JSON格式的数据作为“参数”放置在函数中
  17.     if ($callback) {
  18.     $result = $callback . '(' . $json . ')';
  19.     }
  20.     // 第九步 将数据传送回去
  21.     echo $result;
  22. ?>

运行结果：{name: "HTML5学堂：http://www.h5course.com/"}

代码的注意事项

1 在http://localhost/h5course/h5course.php?name=HTML5&callback=callFn;请求路径中，name是浏览器客户端给服务端发送的一个参数，根据这个参数返回相应的JSON数据；callback是给服务端发送回调函数的名字；

2 服务端代码：实例当中服务端的代码使用的是PHP语言。正常来说服务端（PHP）的代码不需要前端工程师来书写，后台人员会给前端工程师提供请求接口以及接口文档，HTML5学堂小编只是为了让大家理解服务端是如何配合JSONP完成跨域，所以加上了服务端的代码实例。

2.1 $_GET['name'];和$_GET['callback'];获取浏览器客户端传过来的参数，接收到的值分别是HTML5学堂和callFn

2.2 $callback . '(' . $result . ')'; 等价于callFn({"name": "iOS"});或callFn({"name": "HTML5学堂：http://www.h5course.com/"});

3 请保证在服务器环境下运行（自己电脑可以使用wamp，启动服务器）

4 利用JSONP实现百度搜索的关键词获取

功能需求与效果

百度，相信大家都使用过，当我们在百度当中输入一个汉字/字母时，在搜索框部分会出现以这个汉字/字母开头的相关词语。百度这个功能让我们的搜索变得更快捷。而在百度的数据库中存储着这些词的基本数据。我们这次，就通过JSONP跨域，去申请百度的这个PHP文件，实现“相关搜索关键词”（如下图）的功能。

利用JSONP实现百度搜索的关键词获取-效果图

提供的接口（API）说明

接口名称：获取相关关键词

URL：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su

支持格式：JSON

HTTP请求方式：GET/POST

请求参数：

wd | 必选 | 字符串类型 | 根据指定的wd，返回其对应的相关词

cb | 必选 | 字符串类型 | 指定浏览器客户端的回调函数名

接口返回示例

接口返回

实例开发

  1. <!doctype  html>
  2. <html>
  3. <head>
  4.   <meta  charset="UTF-8">
  5.   <title>H5course-HTML5学堂  |  刘国利、陈能堡</title>
  6.   <link  rel="stylesheet"  href="css/reset.css">
  7. </head>
  8. <body>
  9.   <div  class="wrap"></div>
  10.   <script>
  11.     //  动态创建script标签
  12.     var  newScript  =  document.createElement("script");
  13.  
  14.     //  请求是URL路径赋值给script标签的src属性
  15.     newScript.src  =  "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=HTML5学堂&cb=show";
  16.     //  将script标签添加到页面当中
  17.     document.body.appendChild(newScript);
  18.  
  19.     //  回调函数
  20.     function  show(data)  {
  21.       //  根据接口返回示例，来获取服务器端返回的数据
  22.       var  len  =  data.s.length;
  23.  
  24.       for  (var  i  =  0;  i  <  len;  i++)  {
  25.         console.log(data.s[i]);        
  26.       };
  27.     }
  28.   </script>
  29. </body>
  30. </html>

5 JSONP跨域的优劣势

JSONP跨域的优点

1 JSONP能够比较简单的实现跨域功能，并且在请求完毕后可以通过调用[回调]函数的方式获取服务端的数据；

2 JSONP的兼容性非常好，在低端的浏览器中都可以正常运行，不需要XMLHttpRequest或ActiveX的支持；

JSONP跨域的缺点

1 JSONP只支持GET请求而不支持POST等其它类型的HTTP请求；

2 JSONP需要服务器端的配合，无法独立完成跨域。

注意事项

JSONP既能够解决子域的跨域问题，也能够解决不同域的跨域问题。但是不能够在A域中使用JSONP的方式访问B域中的JS文件（请不要陷入这个误区）

HTML5学堂 小编-利利&堡堡 耗时10h

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：AJAX | iframe跨域的案例实战 - 使用iframe提交表单 下一篇：AJAX | postMessage与postMessage跨域