如何设置JSONP?

时间:2012-03-01 15:44:52

标签: javascript json firefox-addon jsonp

我需要在服务器端允许某人使用JSONP从该服务器获取数据。我还需要在用户方面做些什么呢?我想使用JSONP作为XMLHttpRequest的替代。

由于源同源策略,我的Firefox扩展无效。所以,人们推荐使用JSON,但在互联网上搜索教程和指南之后我很失落。

感谢您的帮助!

3 个答案:

答案 0 :(得分:12)

假设您的服务器正在运行PHP,您只需要添加“回调”GET请求。

<?php header('content-type: application/json; charset=utf-8');
$data = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); 
echo $_GET['callback'] . '('.json_encode($data).')';

在客户端(使用jQuery):

$.ajax({url: 'http://site.com/data.php', dataType:'jsonp'});

上面的PHP代码仅用于演示,不要忘记sanitise $ _GET ['callback']

那就是说,如果你的问题只是同一个原始政策,你可能只需要从服务器端allow cross-origin,一切都应该有效。

答案 1 :(得分:7)

在服务器端,您需要设置的只是一个Web资源(例如,页面),它接受GET请求并使用JSON-P约定返回数据,即:

callback({"data": "here"});

...其中函数名称(在该示例中为“回调”)通常取自其中一个查询字符串参数(按照惯例,参数“callback”),数据为JSON text(虽然从技术上讲它可能是任何在JavaScript对象中有效的,但JSON-P的约定是将自己限制在JSON中有效的范围内。例如,假设请求看起来像这样:

http://example.com/foo.php?callback=bar

调用页面foo.php(不一定是PHP,可以是任何动态服务器端系统),告诉它我们希望它调用的函数是“酒吧”。我们的回答是:

bar({"data": "here"});

在客户端,您必须动态地向页面添加script元素,并添加将由JSON-P响应触发的回调函数。通常,您希望为该函数提供一些随机名称,并在完成后将其删除。

Here's a complete example作为Stack Overflow上另一个问题的答案。您可能需要稍微调整它以用于Firefox附加组件,但概念是相同的。

答案 2 :(得分:1)

jsonp是带有包装器的json,所以你可以通过动态插入新的<script>标签来伪造ajax请求到另一台服务器,src指向另一台服务器。包装器本质上使jsonp返回的东西是一个有效的javascript函数调用,可以执行该调用来提取其中的标准json数据。

一般来说,在一个不安全的“只是演示”版本中,你会有这样的东西:

function unwrap_jsonp(data) {
    eval(data);
}

远程服务器将返回以下文字文本:

unwrap_json("{'this':'is','sparta':'!'}");

请注意,这是文字Javascript纯文本代码,执行该代码并将嵌入式JSON字符串“解包”回原生javascript数据结构。

大多数JSONP服务允许通过查询字符串指定一个额外的参数来命名要包含响应的处理函数,例如

http://example.com/getjsonp.php?callback=unwrap_json