浅析 JS 中的跨域请求 - 图解加实例(JSONP篇)
本文创建时间较早,已长时间未更新信息可能不准确,文章内容仅供参考。
何为跨域
简单来说就是 js 与异源页面进行通信,正常情况不允许 js 进行跨域通信的原因是其同源策略。
JSONP
党我们使用 XHR 去获得异源的数据时,就会造成跨域请求。JSONP(JSON Padding)即填充式 JSON 可以来解决这样的问题。
实现原理:虽然我们不能直接请求异源上的资源,但是在 js 中如 img,script 标签却是可以得到其他服务器上的资源的,那么我们就可以通过这样的方式将一段 js 代码间接地从外部引入。通过 script 标签向目标源发起一个 GET 请求,服务器根据请求的参数返回包含 js 的代码,请看下图:
//本地代码
<script>
function getData(obj) {
var data = JSON.parse(obj);
console.log(data.name);//jiavan
console.log(data.age);//20
}
</script>
<script src="http://cv.jiavan.com/test/data.php?callback=getData"></script>
//服务器上的代码
<?php
$func = $_GET['callback'];
$data = '{"name": "jiavan", "age": 20}';
echo $func."(".$data.");";
?>
先在本地定义了一个函数,这是用来处理来自服务器上数据的函数,下面用一个 script 标签,并且向服务器发起了一个 GET 请求,并且指定了处理数据的回调函数,即上方的 getData,服务器收到请求后返回了getData('{"name": "jiavan", "age": 20}');
,即使一段 js 代码,将数据传入到回调函数中处理,这样便完成了跨域。
总结:JSONP 是很常见的处理跨域的方法,但是这种方式只能是 GET 类型的请求并且需要服务器配合,这样才能完成跨域,但是它的优点就是实现比较简单并且对低版本浏览器支持都很好。