小编典典

对JSONP请求的工作方式感到困惑

ajax

我在理解jsonp请求如何工作的细节方面遇到麻烦。我已经阅读了包括jsonp上的wiki在内的多个资源,并且对于在进行jsonp调用时回调实际上如何保留从服务器返回的函数仍然很困惑。例如,在Wiki中,请求的源设置为:

src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"

jsonp = parseResponse究竟实际在做什么/意味着什么?然后他们继续说有效负载是:

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

这是如何运作的?我对整个回调功能感到困惑。函数名称parseResponse被传递到服务器,以某种方式返回的数据成为该函数的参数?有人可以清楚地解释一下如何从jsonp请求中检索/使用数据吗?


阅读 338

收藏
2020-07-26

共1个答案

小编典典

回调是您在自己的代码中定义的函数。jsonp服务器将使用与您指定的回调函数相同的函数调用包装其响应。

这会发生什么:

1)您的代码创建JSONP请求,这将导致一个新的<script>块,如下所示:

<script src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"></script>

2)该新脚本标记由您的浏览器执行,从而导致对JSONP服务器的请求。它以

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

3)由于此请求来自脚本标签,因此与您原本放置的位置几乎完全相同

<script>
    parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});
</script>

进入您的页面。

4)现在已经从远程服务器加载了此新脚本,现在将执行该脚本,并且唯一要做的就是函数调用,parseResponse()将JSON数据作为函数调用的唯一参数传入。

因此,在代码的其他地方,您将拥有:

function parseResponse(data) {
     alert(data.Name); // outputs 'Foo'
}

基本上,JSONP是一种让第三方服务器直接将函数调用注入您的页面的方式,从而绕过浏览器的同源脚本安全策略。请注意,这是设计使然不安全的。您依赖于远程服务是否值得接受并且没有恶意。没有什么能阻止不良服务返回一些JS代码来窃取您的银行/
Facebook /任何凭证。例如… JSONP响应本来可以

 internalUseOnlyFunction('deleteHarddrive');

而不是parseReponse(…)。如果远程站点知道您的代码结构,则可以使用该代码执行任意操作,因为您已将您的前门完全打开以允许该站点执行其所需的任何操作。

2020-07-26