Question

我正在使用天气应用程序，但似乎第二次打开openweather无法正常工作。我知道这些调用是异步的。我不知道这是否是他们失败的原因。第一次调用ipinfo.io它可以工作，但不是第二次。我想知道我怎么能而不是写不同的电话，我可以利用只写一个。不知道这是否可行。任何帮助赞赏应用程序

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Weather App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<body>
  <div class="hero">
    <!-- navbar -->
    <nav class="navbar">
      <a class="navbar-brand" href="#">
        <!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
        <i class="fa fa-sun-o" aria-hidden="true"></i>
        <strong>Local</strong>Weather
      </a>
    </nav>

    <!-- weather section  -->
    <div class="container">
      <div class="row">
        <div id="" class="col-8 mx-auto weather">
          <div class="weather-head">
            <h2 id="location" class="text-center"></h2>

          </div>
          <div class="weather-body">
            <p class="lead">Hello world</p>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!-- javascript functionality -->
  <script type="text/javascript">
    window.onload = function() {
      //variables
      var ipUrl = "https://ipinfo.io/json";
      var appid = "8e1880f460a20463565be25bc573bdc6";

      //ip and location info				
      var ipAddr = "";
      var city = "";
      var country = ""
      var latitude = "";
      var longitude = "";

      //weather variables	
      var weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&${appid}`;
      var weatherDesc = ""
      var temperature = "";
      var humidity = "";
      var windSpeed = "";

      //http request for ip, location
      var httpReqIp = new XMLHttpRequest();
      httpReqIp.open("GET", ipUrl, true);
      httpReqIp.send();
      //calling processRequest when reques ready
      httpReqIp.onreadystatechange = processIpRequest;

      var location = document.getElementById("location");

      //getting json request when ready
      function processIpRequest(e) {
        if (httpReqIp.readyState == 4 && httpReqIp.status == 200) {
          var jsonResponseIp = JSON.parse(httpReqIp.responseText);
          console.log(jsonResponseIp);
          ipAddr = jsonResponseIp.ip;
          city = jsonResponseIp.city;
          country = jsonResponseIp.country
          latitude = jsonResponseIp.loc.split("-")[0];
          longitude = jsonResponseIp.loc.split("-")[1];
          location.innerHTML = `${city}, ${country}`;
        }
      }

      //http reques for weather info
      var httpReqWeather = new XMLHttpRequest();
      httpReqWeather.open("GET", weatherApi, true);
      httpReqWeather.send(null);
      httpReqWeather.onreadystatechange = processWeatherRequest;

      function processWeatherRequest(e) {
        if (httpReqWeather.readyState == 4 && httpReqWeather.status == 200) {
          var jsonResponseWeather = JSON.parse(httpReqWeather.responseText);
          console.log("Weather: " + jsonResponseWeather);
          weatherDesc = jsonResponseWeather[weather].desc;
          temperature = jsonResponseWeather[main].temp;
          humidity = jsonResponseWeather[main].humidity;
          windSpeed = jsonResponseWeather[wind].speed;
          console.log(weatherDesc + " " + temperature)
        }
      }
    }
  </script>

</body>

</html>

＆＃13;

如何在同一个应用程序中处理两个HTTP Json请求

0 个答案: