Dojo JSONPリクエストの後、応答はどこに保存されますか?
質問
JavaScript
たとえば、次のJavaScriptコードがあります(Dojo 1.6はすでにロードされています):
dojo.require("dojo.io.script")
// PART I
var jsonpArgs = {
url: "http://myapp.appspot.com/query",
content: {
id: "1234",
name: "Juan",
start_date: "2000-01-01",
callback: "recover"
}
};
// PART II
dojo.io.script.get(jsonpArgs).then(function(data) {
console.log(data);
});
// PART III
function recover(data) {
console.log(data);
}
ブラウザからの直接クエリ
私のサーバーは、以下をアドレスバーに入力したかのようにクエリを受け取ることを理解しています。
http://myapp.appspot.com/query?id=1234&name=Juan&start_date=2000-01-01&callback=recover
予想される応答
ブラウザアドレスバーを使用してサーバーを直接クエリした場合、MIMEタイプで受け取ります application/json
ブラウザでレンダリングされたプレーンテキスト、次のようなもの:
recover(
{
id: 1234,
name: Juan,
data: [
["2000-01-01", 1234],
["2000-01-02", 5678]
]
}
);
問題
さて、JavaScriptのパートIIを振り返って、JSONPリクエストを実行します dojo.io.script.get(jsonpArgs)
. 。これはaを返します Deferred
チェーンで利用できるオブジェクト .then
その後。ハンドラーを定義したことに注意してください .then
キャプチャされた出力へのイベント data
コンソールへ。
しかし、私がコンソールに入るのは Event
. 。データツリーを検索しようとしましたが、期待したデータが見つかりませんでした。
質問
- JSONPリクエストの応答はどこに保存されますか?どうすれば見つけますか?
- 私のサーバー(私が制御する)は、要求されたデータのプレーンテキストレンダリングのみを出力します。
callback
関数(ここで指定されていますrecover
)、およびaを指定しますapplication/json
MIMEタイプ。応答データがキャプチャされるように、サーバーにセットアップする必要がある他のものはありますかDeferred
物体?
試行されたソリューション
コールバック関数を定義することにより、実際に応答を回復できます(この場合 recover
JavaScriptのパートIII)。ただし、Dojoチュートリアルでは、 Deferred
(と .then
) フレームワーク。 Dojoを使用してどうすればよいですか Deferred
s?
更新(Dojo TutorialのTwitterの例を使用)
たとえば、Dojo Tutorialのこのスクリプトを考えてみましょう。 JSONPでジギーを取得します. 。コンソールにデータを記録するために編集しました。
dojo.require("dojo.io.script");
dojo.io.script.get({
url: "http://search.twitter.com/search.json",
callbackParamName: "callback",
content: {q: "#dojo"}
}).then(function(data){
//we're only interested in data.results, so strip it off and return it
console.log(data); // I get an Object, not an Event, but no Twitter data when browsing the results property
console.log(data.results) // I get an array of Objects
return data.results;
});
為に console.log(data)
, 、私は得ます Object
, 、ではありません Event
私のケースで示されているように。この例は、データが存在することを意味するためです data.results
, 、また、このツリーを閲覧しようとしますが、Twitterからの予想データは表示されません。私は途方に暮れています。
為に console.log(data.results)
, 、私はの配列を取得します Object
s。 Twitterを直接照会した場合、これは私がプレーンテキストで得るものです。各 Object
ユーザー名、時間、ユーザーポートレート、ツイート自体など、通常のツイートメタデータが含まれています。簡単です。
これは私を頭の上にぶつけます。のハンドラー .then
匿名関数であるチェーンは、1つの引数のみを受け取ります data
. 。しかし、なぜそれは results
プロパティ console.log(data)
と 私が得る返されたオブジェクト console.log(data.results)
それは 違う?
解決
わかった。
マニュアルコールバック実装
function recover(data) {
console.log(data);
}
var jsonpArgs = {
url: "http://myapp.appspot.com/query",
content: {
id: "1234",
name: "Juan",
start_date: "2000-01-01",
callback: "recover"
};
dojo.io.script.get(jsonpArgs);
これは、サーバーが受信するリクエストです。
http://myapp.appspot.com/query?id=1234&name=Juan&start_date=2000-01-01&callback=recover
この場合、サーバーからの次の出力が期待されます。
recover({
id: 1234,
name: Juan,
data: [
["2000-01-01", 1234],
["2000-01-02", 5678]
]
});
注意すべき3つのこと:
- サーバーが期待します
callback
クエリURL文字列で。callback
のプロパティとして実装されていますjsonpArgs
. - 指定したからです
callback=recover
, 、私のサーバーが添付されますrecover(
+the_data_I_need
+)
, 、文字列全体をブラウザに戻すと、ブラウザが実行されますrecover(the_data_I_need)
. 。これの意味は... - たとえば、私が定義する必要があること
function recover(one_argument_only) {doAnythingYouWantWith(one_argument_only)}
このアプローチの問題は、私が利用できないことです Deferred
使用してチェーン .then
. 。例えば:
dojo.io.script.get(jsonpArgs).then(function(response_from_server) {
console.log(response_from_server);
})
これは私に与えます Event
, 、予想される応答の痕跡はまったくありません。
DojoのJSONPリクエストの実装を活用します
var jsonpArgs = {
url: "http://myapp.appspot.com/query",
callbackParamName: "callback",
content: {
id: "1234",
name: "Juan",
start_date: "2000-01-01"
};
dojo.io.script.get(jsonpArgs);
これは、サーバーが受信するリクエストです。
http://myapp.appspot.com/query?id=1234&name=Juan&start_date=2000-01-01&callback=some_function_name_generated_by_dojo
この場合、サーバーからの次の出力が期待されます。
some_function_name_generated_by_dojo({
id: 1234,
name: Juan,
data: [
["2000-01-01", 1234],
["2000-01-02", 5678]
]
});
注意すべきこと:
のプロパティに注意してください
jsonpArgs
,callbackParamName
. 。このプロパティの値は、サーバーが期待する変数(クエリURL文字列内)の名前でなければなりません。私のサーバーが期待している場合callbackfoo
, 、 それからcallbackParamName: "callbackfoo"
. 。私の場合、私のサーバーは名前を期待していますcallback
, 、 したがってcallbackParamName: "callback"
.前の例では、クエリURLで指定しました
callback=recover
実装に進みましたfunction recover(...) {...}
. 。今回は、心配する必要はありません。 Dojoは独自の優先関数を挿入しますcallback=some_function_name_generated_by_dojo
.私は想像する
some_function_name_generated_by_dojo
定義される:
意味:
function some_function_name_generated_by_dojo(response_from_server) {
return response_from_server;
}
もちろん、定義はそれほど単純ではありませんが、このアプローチの利点は、Dojoの延期されたフレームワークを利用できることです。以下のコードを参照してください。これは前の例と同じです。
dojo.io.script.get(jsonpArgs).then(function(response_from_server) {
console.log(response_from_server);
})
これにより、必要な正確なデータが得られます。
{
id: 1234,
name: Juan,
data: [
["2000-01-01", 1234],
["2000-01-02", 5678]
]
}