使用 XMLHttpRequest 更新网页上的 API 内容

Update API content on webpage with XMLHttpRequest?

本文关键字：API 内容 网页 XMLHttpRequest 更新 使用      更新时间：2023-09-26

我正在尝试使用 XMLHttpRequest 更新网页上气象服务 API 的内容。

不幸的是，我是使用这个JavaScript功能的新手。我已经浏览了 Mozilla 文档，但我仍然对如何从网页上的 API 更新信息感到有些困惑。

我的Javascript，包括刷新函数和addWeather函数。刷新函数假设每小时刷新一次我网站上的 api 信息（它利用了我需要帮助的 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;                          
                  }
              });
    });
}

从设置间隔中删除 （）。 现在你通过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 属性并在它是函数时执行它

在此之后，您不需要jQuery ajax作为XHR的API，并且您已经创建了request，现在使用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;

它应该更快

啊，并将第一行（在设置间隔之前）更改为刷新Page（）; 作为addWeather（）;现在将崩溃，因为它将手动执行，因此不会有this.responseText变量（因为它被称为"外部"xhr）

相关文章：