欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

聊一聊 JSONP

程序员文章站 2022-07-14 21:29:42
...

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