关于跨域这个问题也是大家工作中经常遇到的问题,之前给大家讲解了跨域的基本知识以及如何使用iframe跨域,如果想具体了解iframe跨域可以点击:深入剖析iframe跨域问题。本文主要讲解JSONP的原理,以及JSONP的实际应用。
2.1 JSONP跨域流程
2.2 相关提示
3.1 JSONP跨域实例 - 前端的JS代码
3.2 JSONP跨域实例 - 后台的PHP代码
3.3 代码的注意事项
4.1 功能需求与效果
4.2 提供的接口(API)说明
4.3 接口返回示例
4.4 实例开发
5.1 JSONP跨域的优点
5.2 JSONP跨域的缺点
5.3 注意事项
JSONP,是解决跨域的一种解决方案,在这种解决方式当中通过JavaScript类型的数据(多数为对象)进行传递,和JSON的格式很相似,因此我们把这种解决跨域的方案命名为JSONP。
JSONP,可以拆成JSON和P。其中,JSON是一种轻量级的数据格式,可以理解为前端与后台之间协定的一种数据交互格式;换言之,前端识别一些语言,后台识别一些语言,JSON,既能够被前端识别,又能够被后台识别。P表示package(打包、包装)的意思,那么JSONP可以简单的理解为“包装”JSON。
一图胜千言(为了让大家尽可能看清楚,我们调整成了“纵向”图),如果您想要下载“高清版”,可以发送“图”到我们的公众号。
如下流程即为上图流程的“描述”。我们再回顾一下吧~
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,但是这也就意味着参数值会被定死。通常我们都是需要向后退申请某些数据,这些数据有可能是需要用户来定义的,此时,用动态的方式进行创建,可以满足“参数值不确定”的功能需求。
看完理论层面的流程之后,我们再借助一个简单的实例来理解一下。注意:HTML5学堂小编将第一步到第十步的功能分别对应其命令,标注在了注释当中。(对于第四步,本身属于便于理解的层面,并没有对应代码)
该JSONP实例的功能需求:希望在A域中访问http://localhost/h5course中的h5course.php文件,并且获取这个文件返回的内容。A域与http://localhost/h5course处于不同域。
// 对应于第一步
var newScript = document.createElement('script');
// 对应于第二步和第三步,第三步为?后面的内容“name=HTML5&callback=callFn”
newScript.src = 'http://localhost/h5course/h5course.php?name=HTML5&callback=callFn';
// 对应于第一步
document.body.appendChild(newScript);
// 对应于第十步
function callFn(data) {
console.log(data);
}
<?php
// 对应于第五步
$id = $_GET['name'];
$callback = $_GET['callback'];
// 对应于第六七步,在此定义一个变量,用于存储JSON数据。为$json赋值的数据,为第六步(当前的第六步为模拟实现,真实的第六步需要申请后台数据库)
$json = '';
if ($id == 'HTML5') {
$json = '{
"name": "HTML5学堂:http://www.h5course.com/"
}';
} else {
$json = '{
"name": "iOS"
}';
}
// 第八步 将JSON格式的数据作为“参数”放置在函数中
if ($callback) {
$result = $callback . '(' . $json . ')';
}
// 第九步 将数据传送回去
echo $result;
?>
运行结果:{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,启动服务器)
百度,相信大家都使用过,当我们在百度当中输入一个汉字/字母时,在搜索框部分会出现以这个汉字/字母开头的相关词语。百度这个功能让我们的搜索变得更快捷。而在百度的数据库中存储着这些词的基本数据。我们这次,就通过JSONP跨域,去申请百度的这个PHP文件,实现“相关搜索关键词”(如下图)的功能。
提供的接口(API)说明
接口名称:获取相关关键词
URL:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
支持格式:JSON
HTTP请求方式:GET/POST
请求参数:
wd | 必选 | 字符串类型 | 根据指定的wd,返回其对应的相关词
cb | 必选 | 字符串类型 | 指定浏览器客户端的回调函数名
接口返回示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course-HTML5学堂 | 刘国利、陈能堡</title>
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div class="wrap"></div>
<script>
// 动态创建script标签
var newScript = document.createElement("script");
// 请求是URL路径赋值给script标签的src属性
newScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=HTML5学堂&cb=show";
// 将script标签添加到页面当中
document.body.appendChild(newScript);
// 回调函数
function show(data) {
// 根据接口返回示例,来获取服务器端返回的数据
var len = data.s.length;
for (var i = 0; i < len; i++) {
console.log(data.s[i]);
};
}
</script>
</body>
</html>
1 JSONP能够比较简单的实现跨域功能,并且在请求完毕后可以通过调用[回调]函数的方式获取服务端的数据;
2 JSONP的兼容性非常好,在低端的浏览器中都可以正常运行,不需要XMLHttpRequest或ActiveX的支持;
1 JSONP只支持GET请求而不支持POST等其它类型的HTTP请求;
2 JSONP需要服务器端的配合,无法独立完成跨域。
JSONP既能够解决子域的跨域问题,也能够解决不同域的跨域问题。但是不能够在A域中使用JSONP的方式访问B域中的JS文件(请不要陷入这个误区)
HTML5学堂 小编-利利&堡堡 耗时10h