聊一聊 JSONP

JSONP

说到 JSONP 就要说到同源策略（Same Origin Policy), 同源策略是浏览器最核心的也是最基本的安全功能。

浏览器的同源策略，限制了来自不同源的 “document” 或脚本，对当前 “document” 读写或设置某些属性。

通俗的说法就是外来的脚本无法碰到自家的文档。

影响 “源” 的因素有四个： 主机名 host，子域名、端口、协议。

JSONP(JSON with padding). 这是一种从远端服务器抓取数据的方式。原理是通过创建一个 script 标签，所辖的外部文件包含一段 JSON 数据，数据是由服务器返回的，作为参数包装在一个函数调用中。script 标签获取脚本文件不受跨域的限制（同样具有跨域加载数据能力的标签还有：img、iframe、link等标签，均不受同源策略的限制），所有的浏览器都支持这种技术。

首先，在 head 里添加 script 标签

<script src="http://example.com/data.json"></script>

预先定义全局函数，等待返回数据中的方法调用

window.jsonCallback = function(result) {
    // 处理返回结果的相关逻辑
}

请求的文件里的数据是,一个方法还有作为参数的数据，数据加载到浏览器后，脚本会被执行，随之方法会被调用（方法已经定义好）

jsonCallback({"data":"foo"});

好在，jQ 已经把它包了起来

jQuery.getJSON("http://example.com/data.json", function() {
    // 处理返回结果的相关逻辑
})