以前通过书本和网上看到 JSON,知道它是一种数据传输格式,数据接口。但对于跨域问题和 JSONP 总是一知半解,这次通过项目和大家的指导也对这些搞清楚了,这里就分享下我的心得吧

JSON

首先说说 JSON 这种数据格式,因为格式规范,和 JavaScript 亲缘比较近的缘故,比较受欢迎。关于 JSON 这种数据的格式介绍也很多。自己也使用 Ajax 请求 JSON 格式的数据,渲染到页面。但是受到同源问题的限制,只能请求本源的数据。要想请求别的数据就需要跨域。

同源问题

因为安全问题,所以对 JavaScript 做了同源限制,至于这个什么安全问题,网上也是看的云里雾里的。我的理解是别的网站上的数据后,就存在执行别的网站上的脚本,而达到读取存储的 Cookie 等敏感信息,所以做了同源限制。同源的限制必须是同域名,同端口,同协议。Cookie 对不同协议的请求也认为是同源。

跨域

对于同源限制,现在越来越多的应用需要读取别的网站的接口数据,又遇到同源的限制,所以必须跨域,要实现跨域 Ajax 是不行的 (同源限制),页面上面有 "src" 属性的标签都不受同源策略的影响,这个很好理解,图片外链,调公共的 JavaScript 库都是这种方式。下面就是通过 JSONP 来跨域

JSONP

要想通过 "src" 属性来传输数据,首先想到的是 <script> 标签,JSON 格式的数据直接放进 <script> 标签肯定无法得到,但是函数是可以执行的,所以通过函数执行,将 JSON 数据当做参数传回来,当然你也可以传其他格式的数据

// JSONP 格式数据 - 放置于 http://alpha.com/jsonp.js
alpha({"name":"alphatr","type":"json"})

这其实就是 alpha 函数的执行,参数是一个 JSON 数据{"name':"alphatr","type":"json"},具体函数怎么执行就是在调用它的域名脚本来定义的。JSON with Padding 就形象的描述了这种数据格式。现在看看如何跨域调用这种数据格式

// 跨域调用 JSONP - http://beta.com/
<script type="text/javascript">
var alpha = function(data) {
    alert(data.name+data.type);
}
</script>
<script src="http://alpha.com/jsonp.js"></script>

这样,就在 beta 这个域定义了 alpha 函数然后在 alpha 域执行函数,数据相应的就被取出来了。从而达到跨域。

JSONP 这种数据格式前面的前缀(函数名),并不是写死的,现在一般的 JSONP 数据都是动态生成的,通过callback参数传入前缀,例如这样的 URL:

http://api.alpha.com/jsonp.php?jsoncallback=alpha

这样 PHP 通过 $_GET['callback'] . '(' . $json . ')' 这样的格式生成 JSONP 数据。

jQuery 通过一种匿名函数的形式封装了跨域获取 JSON 数据的方式,原理还是通过 JSONP 格式,具体谷歌君吧。

这些都是我自己的一些理解,如果有什么不对的地方请帮我指正出来。同时分享出来也是让更多的人来理解。