Course Hero Logo

Addeventlistener load function responsereceived xhr

Course Hero uses AI to attempt to automatically extract content from documents to surface to you and others so you can study better, e.g., in search results, to enrich docs, and more. This preview shows page 124 - 127 out of 129 pages.

addEventListener("load",function(){responseReceived(xhr,cityId,city)});// JSON response needs to be converted into an objectxhr.responseType="json";// Send requestxhr.open("GET",url);xhr.send();}getWeatherForecast("Denver");getWeatherForecast("Denver",true);getWeatherForecast("Denver","city1");?q=Boston?q=Boston&appid=APIKEY?q=Boston&units=imperial&appid=APIKEYNo request is sent.The request is sent, but a 404
2021/10/15下午9:07CS 105: Introduction Computing: Non-Technology home125/129Processing the JSON responseTheresponseReceived()function transfers the forecast information into the city's table or showsan error message if the forecast API fails to ²nd the city's forecast. TheresponseReceived()function calls several functions:getSummaryForecast()- Retrieves a map of objects containing the day's high, low, andweather 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 theJSON response is not convertedinto an object.
2021/10/15下午9:07CS 105: Introduction Computing: Non-Technology home126/129ThegetSummaryForecast()function loops through the forecast data retrieved from the forecastAPI and creates a map of 5 or 6 objects that contain the highest and lowest temperature for each dayand weather summary string like "Clear", "Rain", or "Snow".// Display forecast recevied from JSONfunctionresponseReceived(xhr,cityId,city){// No longer loadinghideElement("loading-"+cityId);// 200 status indicates forecast successfully receivedif(xhr.status===200){showElement("results-"+cityId);constcityName=xhr.response.city.name;showText(cityId+"-name",cityName);// Get 5 day forecastconstforecast=getSummaryForecast(xhr.response.list);// Put forecast into the city's tableletday=1;for(constdateinforecast){// Only process the first 5 daysif(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 messageconsterrorId="error-loading-"+cityId;showElement(errorId);showText(errorId,`Unable to load city"${city}".`);}}// Convert date string into Mon, Tue, etc.functiongetDayName(dateStr){constdate=newDate(dateStr);returndate.toLocaleDateString("en-US",{weekday:'short',timeZone:'UTC'});}// Show the weather image that matches the weatherTypefunctionshowImage(elementId,weatherType){// Images for various weather typesconstweatherImages={Clear:"clear.png",Clouds:"clouds.png",Drizzle:"drizzle.png",Mist:"mist.png",Rain:"rain.png",Snow:"snow.png"};constimgUrl="";constimg=document.getElementById(elementId);img.src=imgUrl+weatherImages[weatherType];img.alt=weatherType;}

Upload your study docs or become a

Course Hero member to access this document

Upload your study docs or become a

Course Hero member to access this document

End of preview. Want to read all 129 pages?

Upload your study docs or become a

Course Hero member to access this document

Term
Fall
Professor
NoProfessor
Tags
World Wide Web, Document Object Model, Cheng Wu

Newly uploaded documents

Show More

Newly uploaded documents

Show More

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture