javascript - JSONP是什么?

  显示原文与译文双语对照的内容

我理解 JSON,但不是 JSONP 。 于jsonp,相关文档 JSON 是( 是) 顶部上的维基百科搜索 result. 上面写着:

JSONP或者"带填充的JSON"是一个JSON扩展,其中前缀被指定为调用本身的输入参数。

嗯什么叫这对我没有意义。 JSON是一种数据格式。 没有电话。

第二个搜索结果来自一个名为 Remy的人,他写了关于JSONP的文章:

JSONP是脚本标记注入,将响应从服务器传递到用户指定的函数。

我可以理解,但它还是没有意义。


那么JSONP是什么为什么它被创建为( 它有什么问题)? 我为什么要使用它?


为 JSONP 增编: 我刚创建新页百科,它现在有一个清楚和深入JSONP的说明,基于上jvenema 回答的。

时间:

其实并不是太复杂。。

大部分说你所在域中的域 example.net. example.com, 和你想提出请求来这样做,你需要跨越域边界,一个

绕过这里限制的一个项目是 <脚本> 标记。 当你使用脚本标记时,域限制被忽略,但是在正常情况下,你不能真正地对结果做任何事情,脚本只是被评估。

输入 JSONP 。当你对一个启用了JSONP的服务器发出请求时,你会传递一个特殊参数,告诉服务器你的页面。 这样,服务器就可以很好地将响应包装到页面可以处理的方式。

例如假设服务器需要一个名为"回拨"的参数来启用它的JSONP功能。 那么你的请求看起来就像:


http://www.example.net/sample.aspx?callback=mycallback

没有 JSONP,这可能会返回一些基本的JavaScript对象,比如:


{ foo: 'bar' }

但是,使用JSONP时,当服务器接收到"回拨"参数时,它将结果包装起来有点不同,返回类似这样的结果:


mycallback({ foo: 'bar' });

如你所见,它现在将调用你指定的方法。 因此,在你的页面中,你定义了回调函数:


mycallback = function(data){
 alert(data.foo);
};

现在,当脚本加载时,它将被评估,你的函数将被执行。 瞧,cross-domain请求 !

值得注意的是JSONP的一个主要问题: 你失去了对请求的大量控制。 例如没有"nice"方法来获得正确的失败代码。 结果,你最终使用计时器来监视请求,这总是有点可疑。 JSONRequest的命题是一个很好的解决方案,它允许跨域脚本scripting维护安全性,并允许适当控制请求。

编辑:最近,CORS 是recommeded方法 vs JSONRequest 。 对于旧的浏览器支持,JSONP仍然是有用的,但是考虑到安全问题,除非你没有选择CORS是更好的选择。

因为你可以要求服务器向返回的JSON对象附加前缀。 E.g

function_prefix(json_object);

为了使浏览器以 eval"行内"该JSON字符串作为表达式的值。 以绕过"同源"restrictions,这个技巧使得它可能对服务器以"注入"javascript代码在客户端浏览器中直接和 this.

换句话说,你可以让 cross-domain资料交换


通常情况下,XMLHttpRequest 不允许直接使用 cross-domain data-exchange,而是:

<script src="some_other_domain/some_data.js&prefix=function_prefix > ` 可以访问来自域的数据,而不是来自原始域的数据。


值得注意的是,尽管服务器应该被认为是"信任的",但在尝试这种"戏法"之前,可能会包含对象格式 等等的副作用。 如果一个 function_prefix ( 例如 。一个适当的js函数) 被用来接收JSON对象,那么这个函数可以在接受/进一步处理返回的数据之前执行检查。

使用JSONP的一个简单示例。

client.html


 <html>
 <head>
 </head>
 body>


 <input type="button" id="001" onclick=gO("getCompany") value="Company"/>
 <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
 <h3>
 <div id="101">

 </div>
 </h3>

 <script type="text/javascript">

 var elem=document.getElementById("101");

 function gO(callback){

 script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'http://localhost/test/server.php?callback='+callback;
 elem.appendChild(script);
 elem.removeChild(script);


 }

 function getCompany(data){

 var message="The company you work for is"+data.company +"<img src='"+data.image+"'/>";
 elem.innerHTML=message;
}

 function getPosition(data){
 var message="The position you are offered is"+data.position;
 elem.innerHTML=message;
 }
 </script>
 </body>
 </html>

server.php


 <?php

 $callback=$_GET["callback"];
 echo $callback;

 if($callback=='getCompany')
 $response="({"company":"Google","image":"xyz.jpg"})";

 else
 $response="({"position":"Development Intern"})";
 echo $response;

?> 

...