一. 跨域和同源策略
- 为什么会跨域？因为不同源。
- 什么是"源(origin)"直接看一张图
1.png
很明显看到三部分:
- http:// 协议
- localhost 域名
- 8080 端口
所以可以总结为协议、域名、端口如果有任意一项不相同则视为跨域
二. 什么是JSONP?
JSONP(JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。摘自【百度百科】
三. JSON和JSONP有什么什么区别?
JSON虽然和JSONP仅有一个字母的差别，但他们完全不是一回事；JSON是一种交换格式，而JSONP是一种非官方的数据交互协议
四. JSONP的背景
- 受同源策略的影响，ajax请求的文件如果存在跨域就无权限访问
- 不过我们发现凡是有src的标签都可以跨域访问，例如
- iframe
- script
- img
- 恰巧JSON可以用字符数据格式描述复杂的数据，而且JSON被JS原生支持。
- 于是JSONP的核心是动态添加script标签来调用服务器提供的js脚本
- 而客户端对JSON文件调用成功后，就可以按照自己的需求进行处理了。
- 所以JSONP仅仅只是一种非官方协议，而不是数据格式
- 尽管强大的JQuery把JSONP加到了dataType的选项中，也不能说明JSONP就是一种数据格式。(下面会有详细介绍)
五. JSONP应用
下面请求的api采用的是菜鸟教程当中的。
首先看一下前端ajax请求会如何
- 前端代码在localhost域下，访问域https://www.runoob.com
<script src="./jquery.js"></script>
<script type="text/javascript">
window.onload = function () {
$.ajax({
type: "GET",
url: 'https://www.runoob.com/try/ajax/jsonp.php'
})
}
</script>
浏览器会抛出这样的错误
2.png
上面已经说过，JSONP的核心就是动态的添加script标签。现在稍微改造一下请求:
<script src="./jquery.js"></script>
<script type="text/javascript">
function JsonHandle(data) {
console.log(data)
}
window.onload = function () {
var url = "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=JsonHandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
}
</script>
现在看下浏览器的控制台，log出来了我们想要的结果
3.png
5.png
同样的，上面也提到就算强大的JQuery把JSONP放到了dataType的选项，也不能改变这样的实现方式。现在再换一种写法
<script src="./jquery.js"></script>
<script type="text/javascript">
function JsonHandle(data) {
console.log(data)
}
window.onload = function () {
$.ajax({
type: "GET",
url: 'https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=JsonHandle',
dataType: "JSONP",
json: 'jsoncallback',
jsonpCallback: "JsonHandle"
})
}
</script>
现在再看一下请求
4.png
说到这里我们直接把这个示例的后端代码也贴出来
// 代码源于菜鸟教程
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
从这里可以看的出尽管这种方式可以实现跨域访问，但是也需要和后端共同约定一个回调函数(该示例约定的回调函数为jsoncallback)
六. 总结
- 同源策略指的是协议、域名、端口都要一致
- JSONP就是和后端约定回调函数，并且动态添加script标签
- JSONP仅仅用于get请求中
- JSONP尽管被Jquery定义到dataType中，但JSONP不是数据格式
- 欢迎关注公众号：前端小卡
