Addeventlistener load function responsereceived xhr

addEventListener ( " load " , function () {
responseReceived ( xhr , cityId , city )
} ) ;
// JSON response needs to be converted into an object
xhr . responseType = " json " ;
// Send request
xhr . open ( " GET " , url ) ;
xhr . send () ;
}
getWeatherForecast("Denver");
getWeatherForecast("Denver",
true);
getWeatherForecast("Denver",
"city1");
?q=Boston
?q=Boston&appid=APIKEY
?
q=Boston&units=imperial&appid=APIKEY
No request is sent.
The request is sent, but a 404

2021/10/15 下午 9:07
CS 105: Introduction Computing: Non-Technology home
125/129
Processing the JSON response
The responseReceived() function transfers the forecast information into the city's table or shows
an error message if the forecast API fails to ²nd the city's forecast. The responseReceived()
function calls several functions:
getSummaryForecast() - Retrieves a map of objects containing the day's high, low, and
weather summary for 5 days.
getDayName() - Converts a date like "2018-12-20" into a day name like "Thu".
showImage() - Displays the weather image matching the given weather type.
Figure 26.13.4: responseReceived() and supporting functions.
status is returned.
The request is sent, but the
JSON response is not converted
into an object.

2021/10/15 下午 9:07
CS 105: Introduction Computing: Non-Technology home
126/129
The getSummaryForecast() function loops through the forecast data retrieved from the forecast
API and creates a map of 5 or 6 objects that contain the highest and lowest temperature for each day
and weather summary string like "Clear", "Rain", or "Snow".
// Display forecast recevied from JSON
function responseReceived ( xhr , cityId , city ) {
// No longer loading
hideElement ( " loading- " + cityId ) ;
// 200 status indicates forecast successfully received
if ( xhr . status === 200 ) {
showElement ( " results- " + cityId ) ;
const cityName = xhr . response . city . name ;
showText ( cityId + " -name " , cityName ) ;
// Get 5 day forecast
const forecast = getSummaryForecast ( xhr . response . list ) ;
// Put forecast into the city's table
let day = 1 ;
for ( const date in forecast ) {
// Only process the first 5 days
if ( day <= 5 ) {
showText ( `$ { cityId } - day$ { day } - name` , getDayName ( date )) ;
showText ( `$ { cityId } - day$ { day } - high` , Math . round ( forecast [ date ]. high ) + " &deg; " ) ;
showText ( `$ { cityId } - day$ { day } - low` , Math . round ( forecast [ date ]. low ) + " &deg; " ) ;
showImage ( `$ { cityId } - day$ { day } - image` , forecast [ date ]. weather ) ;
}
day ++ ;
}
} else {
// Display appropriate error message
const errorId = " error-loading- " + cityId ;
showElement ( errorId ) ;
showText ( errorId , `Unable to load city " ${city} " . ` ) ;
}
}
// Convert date string into Mon, Tue, etc.
function getDayName ( dateStr ) {
const date = new Date ( dateStr ) ;
return date . toLocaleDateString ( " en-US " , { weekday : 'short' , timeZone : 'UTC' } ) ;
}
// Show the weather image that matches the weatherType
function showImage ( elementId , weatherType ) {
// Images for various weather types
const weatherImages = {
Clear : " clear.png " ,
Clouds : " clouds.png " ,
Drizzle : " drizzle.png " ,
Mist : " mist.png " ,
Rain : " rain.png " ,
Snow : " snow.png "
};
const imgUrl = " " ;
const img = document . getElementById ( elementId ) ;
img . src = imgUrl + weatherImages [ weatherType ] ;
img . alt = weatherType ;
}