javascript 使用XHR调用API

Posted 2021-05-03

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://<my_api_key>.mockapi.io/users', true);
xhr.responseType = 'text';

/* Diagnostics */
// xhr.onreadystatechange = function() {
//   console.log(xhr.readyState);
//   console.log(xhr.status);
//   console.log(xhr.statusText);
// };

xhr.onload = function() {         // Callback.
  if (xhr.status === 200) {
    var myStuff = JSON.parse(xhr.response);
    console.log(myStuff);
  }
};

xhr.send();    // Activates open().

/*jslint browser:true */
/* None of the URLs have protocol in front, but rather start with "//". 
 * This way they allow for both unsecure and secure communication, depending
 * on the server the app is deployed to.
 */
'use strict';

var weatherConditions = new XMLHttpRequest();
var weatherForecast = new XMLHttpRequest();
var cObj;
var fObj;

// GET THE CONDITIONS
weatherConditions.open('GET', '//api.openweathermap.org/data/2.5/weather?zip=10020,hr&units=metric&APPID=<my_api_key>', true);
weatherConditions.responseType = 'text';
weatherConditions.send(null);

weatherConditions.onload = function() {
    if (weatherConditions.status === 200){
        cObj = JSON.parse(weatherConditions.responseText); 
        console.log(cObj);
        document.getElementById('location').innerHTML = cObj.name;
        document.getElementById('weather').innerHTML = cObj.weather[0].main;
        document.getElementById('temperature').innerHTML = cObj.main.temp + " &deg;C";
        document.getElementById('desc').innerHTML = "Wind speed " + cObj.wind.speed;

    } //end if
}; //end function

// GET THE FORECARST
weatherForecast.open('GET', '//api.openweathermap.org/data/2.5/forecast?zip=10020,hr&units=metric&APPID=<my_api_key>', true);
weatherForecast.responseType = 'text'; 
weatherForecast.send();

weatherForecast.onload = function() {
if (weatherForecast.status === 200){
	fObj = JSON.parse(weatherForecast.responseText);
    console.log(fObj);
    var date_raw = fObj.list[0].dt_txt.substring(5, 11);
    var weatherIconUrl = '//openweathermap.org/img/w/' + fObj.list[0].weather[0].icon + '.png';
	document.getElementById('r1c1').innerHTML = date_raw;
	document.getElementById('r1c2').src = weatherIconUrl;
	document.getElementById('r1c3').innerHTML = fObj.list[0].main.temp_min + ' &deg;C';
    document.getElementById('r1c4').innerHTML = fObj.list[0].main.temp_max + '&deg;C';

    date_raw = fObj.list[1].dt_txt.substring(5, 11);
    weatherIconUrl = '//openweathermap.org/img/w/' + fObj.list[1].weather[0].icon + '.png';
	document.getElementById('r2c1').innerHTML = date_raw;
	document.getElementById('r2c2').src = weatherIconUrl;
	document.getElementById('r2c3').innerHTML = fObj.list[1].main.temp_min + ' &deg;C';
    document.getElementById('r2c4').innerHTML = fObj.list[1].main.temp_max + '&deg;C';
    
    date_raw = fObj.list[2].dt_txt.substring(5, 11);
    weatherIconUrl = '//openweathermap.org/img/w/' + fObj.list[1].weather[0].icon + '.png';
	document.getElementById('r3c1').innerHTML = date_raw;
	document.getElementById('r3c2').src = weatherIconUrl;
	document.getElementById('r3c3').innerHTML = fObj.list[2].main.temp_min + ' &deg;C';
	document.getElementById('r3c4').innerHTML = fObj.list[2].main.temp_max + '&deg;C';
} //end if
}; //end function

let request = new XMLHttpRequest();
request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status) {
    console.log(this.responseText);
  }
}
request.open('GET', 'https://<my_api_key>.mockapi.io/users', true);
request.send();