困惑于如何JSONP请求作品 [英] Confused on how a JSONP request works

问题描述

我无法理解如何JSONP请求的工作原理的细节。我看了几个来源，包括对JSONP维基和我仍然对如何回调实际上得到了保持从服务器返回的功能，当JSONP调用时非常困惑。例如，在维基，请求的源被设定为：

I am having trouble understanding the details of how a jsonp request works. I have read several sources including the wiki on jsonp and am still very confused on how the callback actually gets a hold of the function returned from the server when a jsonp call is made. For example, in the wiki, the source of the request is set as:

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

究竟做JSONP = parseResponse居然/意思？然后，他们去上说，有效载荷为：

What exactly does jsonp = parseResponse actually do/mean?? Then they go on to say that the payload is:

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

这是如何工作的？我很困惑总体上回调功能。函数名parseResponse被传递给服务器，并以某种方式返回的数据变得参数为此功能？是否有人可以解释清楚究竟是如何检索数据/从JSONP请求中使用？

How does this work? I am confused on the whole callback functionality. The function name parseResponse is passed to the server and somehow the data returned becomes parameters to this function? Can someone please clearly explain exactly how data is retrieved/used from a jsonp request?

推荐答案

回调是你在自己的code定义的函数。该JSONP服务器将包装与函数调用名为同你指定的回调函数的响应。

The callback is a function YOU'VE defined in your own code. The jsonp server will wrap its response with a function call named the same as your specified callback function.

会发生什么事是这样的：

What happens it this:

1）你的code创建JSONP请求，这将导致一个新的＆LT;脚本＆GT; 块看起来是这样的：

1) Your code creates the JSONP request, which results in a new <script> block that looks like this:

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

2）这个新的脚本是由浏览器执行，导致请求JSONP服务器。它响应

2) That new script tag is executed by your browser, resulting in a request to the JSONP server. It responds with

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

3）由于这个请求来自一个脚本标记，它是pretty的多少完全一样的，如果你从字面上放在

3) Since this request came from a script tag, it's pretty much EXACTLY the same as if you'd literally placed

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

到您的网页。

into your page.

4）现在，这个新的脚本已经加载从远程服务器，现在将执行，唯一会做的就是一个函数调用 parseResponse（），传递JSON数据作为函数调用的唯一的参数。

4) Now that this new script has been loaded from the remote server, it will now be executed, and the only thing it will do is a function call, parseResponse(), passing in the JSON data as the function call's only parameter.

所以，在其他的code的地方，你就必须：

So somewhere else in your code, you'd have:

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

基本上，JSONP是绕过浏览器的同源脚本的安全策略，通过让第三方服务器直接到您的网页注入一个函数调用的方式。请注意，这是设计非常不安全的。你根据远程服务是光荣的，没有恶意。从没有回一些JS code，它偷了你的银行/ Facebook的/任何凭据停止一个糟糕的服务。例如....的JSONP响应可以一直

Basically, JSONP is a way of bypassing the browser's same-origin script security policy, by having a 3rd party server inject a function call directly into your page. Note that this is by design highly insecure. You're depending that the remote service is honorable and doesn't have malicious intent. Nothing stops a bad service from returning some JS code that steals your banking/facebook/whatever credentials. e.g.... the JSONP response could've been

 internalUseOnlyFunction('deleteHarddrive');

而非parseReponse（...）。如果远程站点知道你的code中的结构，它可以与code执行任意的操作，因为你打开你的前门敞开的，以允许该网站做任何事情就是了。

rather than parseReponse(...). If the remote site knows the structure of your code, it can perform arbitrary operations with that code, because you've opened your front door wide-open to allow that site to do anything it wants.

这篇关于困惑于如何JSONP请求作品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！