当前位置:首页 » JavaScript技术

聊一聊 JSONP

2014-08-10 17:11 本站整理 浏览(4)

JSONP

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

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

通俗的说法就是外来的脚本无法碰到自家的文档。
影响 “源” 的因素有四个: 主机名 host,子域名、端口、协议。
JSONP(JSON with padding). 这是一种从远端服务器抓取数据的方式。原理是通过创建一个 script 标签,所辖的外部文件包含一段 JSON 数据,数据是由服务器返回的,作为参数包装在一个函数调用中。script 标签获取脚本文件不受跨域的限制(同样具有跨域加载数据能力的标签还有:img、iframe、link等标签,均不受同源策略的限制),所有的浏览器都支持这种技术。
首先,在 head 里添加 script 标签
[code]<script src="http://example.com/data.json"></script>

预先定义全局函数,等待返回数据中的方法调用
[code]window.jsonCallback = function(result) {
    // 处理返回结果的相关逻辑
}

请求的文件里的数据是,一个方法还有作为参数的数据,数据加载到浏览器后,脚本会被执行,随之方法会被调用(方法已经定义好)
[code]jsonCallback({"data":"foo"});

好在,jQ 已经把它包了起来
[code]jQuery.getJSON("http://example.com/data.json", function() {
    // 处理返回结果的相关逻辑
})