首页 > 代码库 > 聊一聊 JSONP

聊一聊 JSONP

JSONP

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

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

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

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

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

首先,在 head 里添加 script 标签

</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() {    // 处理返回结果的相关逻辑})