0

緯度と経度のデータに基づいて、GoogleMapsAPIのマーキング位置とのインターフェースを試みています。また、この緯度と経度に基づいたタイムゾーン情報を取得したいと思います。これを行うために、緯度と経度を取り込み、オフセット時間を返す別の外部APIを使用しています。ただし、私の問題は、今回はページが読み込まれた後にデータが返されることです。

ページがユーザーのためにロードされた後、この情報をページに追加するための最良の方法は何ですか？私はポストバックを使用することを考え始めましたが、いくつかの調査を行った後、それが私の問題の正しい方法ではないと思います。

4

1 に答える 1

1

ブラウザでは、JavaScriptを使用すると、ページが読み込まれた後にサーバーに接続できます。これは非同期リクエストと呼ばれ、「AJAX」（非同期JavaおよびXML）の最初の「A」です。

Xは、HTMLのチャンク全体、JSON（AJAJ？）、またはXMLの代わりに他の形式のデータをこのメカニズムを介して喜んで渡すため、少し誤称になる可能性があります。

私は常にフレームワーク（私の個人的な選択はJQuery）を使用して操作を実行します。これは、フレームワークの作成者がすべてをクロスブラウザーで機能させるための作業を行うためです。

あなたはこれを使うことができます：

http://api.jquery.com/jQuery.get/ または、返されるデータがJSONの場合は、 http：//api.jquery.com/jQuery.getJSON/

JQueryの一部であるこの関数は、データが読み込まれるとコールバック関数を実行します。コールバック関数は、JQueryセレクターを使用して、問題の要素を見つけて更新できます。

特定のコード例で質問を更新すると、回答をより具体的にすることができます。

コード例を見た後に編集します。

あなたの問題は実際にはコード実行の順序を理解することの1つであるように見えます。あなたのコードはこのパターンに従います（やや単純化され、タッチが再配置されています）：

    var startTimeZone;

    jQuery(document).ready(function($) {
      $.ajax({
        url: "http://www.worldweatheronline.com/feed/tz.ashx?key=SecretKey&q=" + start_locale + "&format=json",
        dataType: "jsonp",
        success: function(parsed_json) {
          startTimeZone = parsed_json.data.time_zone[0].utcOffset;
          console.log("Callback: " + startTimeZone);
        },
        error: function(parsed_json) {

        }
      });
    });


    console.log("Main:" + startTimeZone);

まず、ドキュメント対応コールバックでajaxコマンドをラップする必要はありません。これは、エントリポイントがどこにあっても、コード全体に対して1回だけ実行する必要があります。（次のコードが完了するまで実行を遅らせる試みだったと思います。）（ここでも学ぶことがあります-JQueryは、コードの初期化とDOMの操作に役立つ複数のイベントを提供します。ウィンドウを参照してください。 onloadと$（document）.ready（）の簡単な説明）

上記のスニペットを実行すると、コンソールログに次のように表示される可能性があります。

Main: Undefined
Callback: [StartTimeZone]

ここで、[StartTimezone]はサーバーからの応答です。ajaxコマンドは非同期です。つまり、コマンドは実行され、必要なだけ時間がかかり、何も起こらなかったかのように実行された後のコードを残します。終了すると、「success」または「error」コールバックが適切に呼び出されます。したがって、変数が定義される前に、「メイン」コンソールログが呼び出されます。その後、コールバックはajax呼び出しへの応答によってヒットされるため、StartTimeZoneが出力されます。

コールバックを初めて使用する場合、またはコールバックをサポートしない言語や頻繁に使用する言語（PHPなど）に慣れている場合は、コードをajax呼び出しで一時停止してから、コールバックを実行してから続行することを期待または希望する場合があります。残りのコードで。明らかに、そうではありません。

この単純な状況では、タイムゾーンを処理するコードをコールバックに移動するだけですが、コードにはさらにしわがあります。2つの値が必要であり、別々の呼び出しで取得する必要があるようです。

この場合、それらを使用するコードを実行する前に、両方の値があることを確認する必要があります。どうすればこれを行うことができますか？

簡単な解決策は次のとおりです。

var startTimeZone;
var endTimeZone;

      $.ajax({
        url: "http://www.worldweatheronline.com/feed/tz.ashx?key=SecretKey&q=" + start_locale + "&format=json",
        dataType: "jsonp",
        success: function(parsed_json) {
          startTimeZone = parsed_json.data.time_zone[0].utcOffset;
          getEndTimeZone();
        },
        error: function(parsed_json) {
          //console.log("Error: " + parsed_json);
        }
      });



function getEndTimeZone() {
      $.ajax({
        url: "http://www.worldweatheronline.com/feed/tz.ashx?key=SecretKey&q=" + end_locale + "&format=json",
        dataType: "jsonp",
        success: function(parsed_json) {
          endTimeZone = parsed_json.data.time_zone[0].utcOffset;
          console.log(endTimeZone);
          processTimeZones();
        },
        error: function(parsed_json) {
          //console.log("Error: " + parsed_json);
        }
      });
}

function processTimeZones() {
    var timeZoneDifference = (endTimeZone * 3600000) - (startTimeZone * 3600000);
    // Do the rest of your processing here
}

関数は、呼び出されるまで実行されません。また、JavaScriptの関数は、含まれているスコープ内の変数にアクセスできます（つまり、関数は、関数自体の外部で定義されているstartTimeZoneとendTimeZoneにアクセスできます）。

上記のコードは、最初のajax呼び出しが成功するとgetEndTimeZoneを呼び出します。次に、getEndTimeZoneはajax呼び出しを使用して終了タイムゾーンを取得し、成功するとプロセス関数を呼び出します。この関数は、必要な変数に確実にアクセスできます。

もちろん、2つのリクエストが処理されるのを待っています。両方を同時に呼び出し、両方でプロセス関数を呼び出し、処理を実行する前に必要なデータがあるかどうかを判断することで、処理を少し高速化できます。

var startTimeZone;
var endTimeZone;

      $.ajax({
        url: "http://www.worldweatheronline.com/feed/tz.ashx?key=SecretKey&q=" + start_locale + "&format=json",
        dataType: "jsonp",
        success: function(parsed_json) {
          startTimeZone = parsed_json.data.time_zone[0].utcOffset;
          processTimeZones();
        },
        error: function(parsed_json) {
          //console.log("Error: " + parsed_json);
        }
      });



      $.ajax({
        url: "http://www.worldweatheronline.com/feed/tz.ashx?key=SecretKey&q=" + end_locale + "&format=json",
        dataType: "jsonp",
        success: function(parsed_json) {
          endTimeZone = parsed_json.data.time_zone[0].utcOffset;
          console.log(endTimeZone);
          processTimeZones();
        },
        error: function(parsed_json) {
          //console.log("Error: " + parsed_json);
        }
      });

function processTimeZones() {
  if (startTimeZone != undefined && endTimeZone != undefined)
  {
    var timeZoneDifference = (endTimeZone * 3600000) - (startTimeZone * 3600000);
    // Do the rest of your processing here
  }
}

どちらのajax呼び出しが最初に返されるかは、プロセス関数を呼び出します。ただし、変数の1つは未定義であるため、if条件は失敗し、関数はサイレントに戻ります。2番目の結果が来ると、両方の変数が設定されます。これで、if条件が満たされ、処理コードが実行されます。

有名な猫の皮を剥ぐ方法は1001ありますが、これらの方法でコールバックを効果的に使い始めることができれば幸いです。

もちろん、これはすべて、ajax呼び出しをforループに入れているという事実を無視しています。あなたがする必要のある処理の各反復がそれが起こる順序に依存している場合、物事はファンキーになる可能性があります-ajax呼び出しは潜在的に任意の順序で戻る可能性があります。ルートをプロットしているので、これが当てはまる可能性があります。

その場合、コードをロードフェーズと処理フェーズの2つのフェーズに分割できます。ロードフェーズですべてのコールバックを実行し、すべてのデータが処理フェーズに移動したら、マーカーをマップに配置します。データをオブジェクトの配列に格納できます。

ロードフェーズの終了を検出する方法はいくつかあります。1つは、ajax呼び出しを行うたびにインクリメントし、成功するたびにデクリメントするカウンターです。同じカウンターを使用して、読み込みの進行状況バーを作成できます。

また、いずれかの呼び出しが失敗した場合に、プロセスを再開するためのリンクを含むメッセージをユーザーに表示することもできます。（当然、これによりページ全体がリロードされますが、ロード段階を再開できます。）

HTH。さらに助けが必要な場合は、ぜひ叫んでください。

于 2012-12-17T23:25:55.453 に答える