27

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リクエストからデータを取得/使用する方法を正確に説明できますか？

4

3 に答える 3

51

コールバックは、独自のコードで定義した関数です。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は、サードパーティのサーバーに関数呼び出しをページに直接挿入させることにより、ブラウザーの同一生成元スクリプトのセキュリティポリシーをバイパスする方法です。これは設計上非常に安全ではないことに注意してください。あなたは、リモートサービスが立派であり、悪意を持っていないことに依存しています。悪いサービスがあなたの銀行/Facebook/その他の資格情報を盗むJSコードを返すのを止めるものは何もありません。例...JSONPの応答は

 internalUseOnlyFunction('deleteHarddrive');

parseReponse（...）ではなく。リモートサイトがコードの構造を知っている場合、そのサイトが望むことを何でもできるように正面玄関を全開にしたので、リモートサイトはそのコードで任意の操作を実行できます。

于 2012-04-17T14:31:11.817 に答える
1

編集：ジョンが言ったように、ここでそれについてより良い説明があります。

JSONPは、スクリプトタグを使用してクロスオリジンリクエストを作成します。スクリプトタグはスクリプトを含めるために使用されるため、サーバーは有効なJavaScriptを返す必要があります。JavaScriptをクライアントに提供する方法は、関数呼び出しを使用することです。スクリプトで呼び出す関数をサーバーに指示してから、その関数をローカルで作成します。スクリプトの読み込みが完了すると、データをパラメーターとして関数が呼び出されます。

したがって、指定したURLでJSONPリクエストを実行し、指定したペイロードが返された場合は、次のようにしてデータにアクセスします。

function parseResponse(data) {
    console.log("JSONP request complete", data);
}
于 2012-04-17T14:29:07.847 に答える
0

関数名parseResponseがサーバーに渡され、返されるデータがこの関数のパラメーターになります。

自分で説明したように見えますjsonp=parseResponseが、このアプリはコールバック関数を設定する方法なので、jsonデータを含む関数を返します。

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

これは、ロードされたときに呼び出され、JSの次のような関数によって処理されます。

function parseResponse(data){
    console.log(data);
}
于 2012-04-17T14:29:19.300 に答える