Summary THIS ASSIGNMENT IS SUBJECT TO CHANGE SLIGHTLY. In this assignment, you will work with AJAX queries. As you complete this assignment I strongly suggest that you refer back to my example...

Summary

THIS ASSIGNMENT IS SUBJECT TO CHANGE SLIGHTLY.

In this assignment, you will work with AJAX queries. As you complete this assignment I strongly suggest that you refer back to my example (IS360AjaxXmlJsonRev2.html) and use it as a template to complete your work. You will create NWS queries that return both XML and JSON. For the NWS queries, you can use my token or get your own. Following is my token:

req.setRequestHeader("token", "vczOaCmkCxBVQHkKGXeVcGoNcrzjdBab")

Also, make sure that your output is well-formatted.You must use Bootstrap to format the tables and other elements. In addition, all of the tables should have column headers. Any and all input widgets must have prompts and be well-formatted.

For the NWS queries, refer to the following link for Web service reference:

https://www.ncdc.noaa.gov/cdo-web/webservices/v2#gettingStarted(Links to an external site.)Links to an external site.

All of your queries must be processed asynchronously. As mentioned in class, I suggest that you develop the code to operate synchronously. Then, once you get things working, convert the code to operate asynchronously.

You must allow the user to select the limit and offset for each NWS query that you write.

If you look through the assignment, you will see that there are tasks that you perform over and over again. If you build the code correctly, you can create and include a JavaScript.js file into the different pages and put the shared code there.

Index.html

The index html page does nothing other than link to the remaining pages.

WeatherStations.html

This query should be fashioned out of my query from the in-class example and the lab. (btnNWSGetStationsAsync). My example displayed, in a list, the stations name and state. You need to modify the query as follows:

• Display the data in a Bootstrap formatted table instead of a list.


• Display the and
  


• My example displayed the stations from all of the states. You should display only a single state. Allow the user to select the state that they want. The query will select all of the records. You will need to interrogate each record to see if it belongs to the user-selected state.


• In the table, display the and .


• Your table must have column headers.


• If the user enters a state that does not return any results, then do not create the dynamic table, instead, display text that will advise the user what went wrong.


• The query will require the following header to run:

req.setRequestHeader("Accept", "text / html, application / xhtml + xml, application / xml; q = 0.9,*/*;q=0.8");

WeatherForecast.html

For this page, you will extend the weather forecast shown in my example. The structure of this file is discussed in detail in the lab. The data is again returned as XML. Following is a sample query:

https://forecast.weather.gov/MapClick.php?lat=39.3168&lon=-120.3499&unit=0&lg=english&FcstType=dwml(Links to an external site.)Links to an external site.

Your code must do the following:

• Using input boxes, let the user enter the longitude and latitude of the forecast location.


• Dynamically populate a drop-down list of the values. As mentioned in the lab document, these are values such as k-p24h-n8-1: 24 hours.


• Based on the selected values, display the corresponding temperature values. You can display this information any way that you want.


• You need not display the current observation.

Important - For this request to work, you must use the following request header.
req.setRequestHeader("Accept", "text / html, application / xhtml + xml, application / xml; q = 0.9,*/*;q=0.8");

NWSQuery1

For this query, you will use the National Weather Service's Web service discussed in class. The Web service is designed such that there are about 20 location categories. Each location belongs to a location category. The following links describe the parameters:

https://www.ncdc.noaa.gov/cdo-web/webservices/v2#locationCategories(Links to an external site.)Links to an external site.

https://www.ncdc.noaa.gov/cdo-web/webservices/v2#locations(Links to an external site.)Links to an external site.

Create a query that will retrieve all of the locationcategories into a element (list box). Remember that a element has child elements as in. (These examples were extracted from w3Schools.com.)



Volvo
Saab
Opel
Audi



And you can modify the DOM with something like the following:

varx = document.getElementById("mySelect");
varoption = document.createElement("option");
option.text="Kiwi";
x.add(option);

You need to need to register the onchange() for the element with something similar to the following:



function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}



Based on the above selected item, create a second query that will select the locations that apply to the selected location category from the above element. Thus, your completed query should resemble the following:

"https://www.ncdc.noaa.gov/cdo-web/api/v2/locations&locationcategoryid=CITY"

Display the results of this query into a table using the same techniques presented in class. This table should look like the table from the previous query.

Deliverables

The deliverables are the same as always, Post the link to your web site in a folder named Assignment6.