質問

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. 。データツリーを検索しようとしましたが、期待したデータが見つかりませんでした。

質問

  1. JSONPリクエストの応答はどこに保存されますか?どうすれば見つけますか?
  2. 私のサーバー(私が制御する)は、要求されたデータのプレーンテキストレンダリングのみを出力します。 callback 関数(ここで指定されています recover)、およびaを指定します application/json MIMEタイプ。応答データがキャプチャされるように、サーバーにセットアップする必要がある他のものはありますか Deferred 物体?

試行されたソリューション

コールバック関数を定義することにより、実際に応答を回復できます(この場合 recover JavaScriptのパートIII)。ただし、Dojoチュートリアルでは、 Deferred (と .then) フレームワーク。 Dojoを使用してどうすればよいですか Deferreds?

更新(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), 、私はの配列を取得します Objects。 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つのこと:

  1. サーバーが期待します callback クエリURL文字列で。 callback のプロパティとして実装されています jsonpArgs.
  2. 指定したからです callback=recover, 、私のサーバーが添付されます recover( + the_data_I_need + ), 、文字列全体をブラウザに戻すと、ブラウザが実行されます recover(the_data_I_need). 。これの意味は...
  3. たとえば、私が定義する必要があること 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]
    ]
});

注意すべきこと:

  1. のプロパティに注意してください jsonpArgs, callbackParamName. 。このプロパティの値は、サーバーが期待する変数(クエリURL文字列内)の名前でなければなりません。私のサーバーが期待している場合 callbackfoo, 、 それから callbackParamName: "callbackfoo". 。私の場合、私のサーバーは名前を期待しています callback, 、 したがって callbackParamName: "callback".

  2. 前の例では、クエリURLで指定しました callback=recover 実装に進みました function recover(...) {...}. 。今回は、心配する必要はありません。 Dojoは独自の優先関数を挿入します callback=some_function_name_generated_by_dojo.

  3. 私は想像する 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]
    ]
}
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top