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