0

XMLHttpRequest を使用して、Web ページの気象サービス API からコンテンツを更新しようとしています。

残念ながら、私はこの JavaScript 機能を初めて使用します。Mozilla のドキュメントに目を通しましたが、ウェブページの API から情報を更新する方法について、まだ少し混乱しています。

リフレッシュ機能とaddWeather機能を含む私のJavascript。更新機能は、私のウェブサイトの API 情報を 1 時間ごとに更新することを想定しています (これは、ヘルプが必要な xmlhttprequest を利用します)。addWeather 関数は API 情報を html に追加し、実際にうまく機能します。

Javascript は次のとおりです。

window.onload = init;

function init() {        

    //populate the weather 
    addWeather();

    //refresh the page every hour
    setInterval(refreshPage(), 3600000);

}

//refresh the page information every hour 
function refreshPage(){
    //make new request to the webservice
    var req = new XMLHttpRequest();
    req.onload = addWeather();

}

//add the weather info from the weather service
function addWeather(){
    jQuery(document).ready(function($) {
              $.ajax({
                  url: "http://api.wunderground.com/api/6368023a57d122c7/geolookup/conditions/q/DominicanRepublic/Barahona.json",
                  dataType : "jsonp",
                  success : function(parsed_json) {
                      var location = parsed_json['location']['city'];
                      var temp = parsed_json['current_observation']['temp_c'];
                      var weather = parsed_json['current_observation']['weather'];
                      var humid = parsed_json['current_observation']['relative_humidity'];

                      var wind_direction = parsed_json['current_observation']['wind_dir'];
                      var wind_speed = parsed_json['current_observation']['wind_kph'];
                      var wind_string = wind_direction + " " + wind_speed + " Km/h";

                      document.getElementById("weather").innerHTML = "Weather " + weather;
                      document.getElementById("temp").innerHTML = "Tempurature " + temp + "°C";
                      document.getElementById("hum").innerHTML = "Humidity " + humid;
                      document.getElementById("wind").innerHTML = "Wind " + wind_string;                          
                  }
              });
    });
}
4

1 に答える 1

0

設定間隔から () を削除します。addWeather によって戻り値を渡しているので、関数自体を渡したいとします。そう：

    setInterval(addWeather,3600000)

XHR でデータをリクエストしている場合は、this.responseText として利用できます。それがJSONの場合は、それを解析できます

    var r = JSON.parse(this.responseText)

内部に天気機能を追加しますが、そうではありません。適切な XHR:

    var r = new XMLHttpRequest();
    r.open('GET','your_url_here');
    r.onload = addWeather;
    r.send()

() なしで再び。関数の最後に () を置くと、それが実行され、戻り値が使用されます。名前だけを指定すると、関数自体が割り当てられます。変数 r.onload を関数と等しくする必要があります。xhr は onload プロパティをチェックし、関数の場合は実行するため

この後、XHR の単なる API として jQuery ajax は必要なく、すでにリクエストを作成しているので、responseText を使用して値を読み取ります。そう：

XHR を修正し、jQajax を削除して、jQajax 関数に与えられた内容を addWeather に入れると、addWeather は次のようになります。

    function addWeather(){
      var parsed_json=JSON.parse(this.responseText);

      var location = parsed_json['location']['city'];
      ... rest of this internal function ...

また、解析された JSON はオブジェクトになることを覚えておいてください。

var location = parsed_json.location.city;

それはより速いはずです

ああ、addWeather(); を変更します。最初の行 (設定間隔の前) で refreshPage(); as addWeather(); 手動で実行されるとクラッシュするため、this.responseText変数はありません（「外部」xhrと呼ばれるため）

于 2013-11-07T23:54:33.970 に答える