Explanation of AJAX
This page uses AJAX, a JavaScript technique to update parts of the web page content without issuing a full page refresh. AJAX improves upon the responsiveness of web pages by only refreshing a small portion of the page, for example a stock of weather ticker.AJAX is implemented with javascript functions that are executed by the browser. The programmer can cpecify a javascript function for example that get the latest weather data. The function is tied to the clicking event of a button on the page. When the user clicks the button, the browser is notified and executes the JavaScript function. Inside the JavaScript function is the logic of AJAX defined. An AJAX function is just a normal function written in JavaScript, that goes out to the web to fetch data from a server to update page content. In a way AJAX works "behind the back" of HTML forms, sneaking bits of data into the web page without a full HTTP request re-rendering the entire page. Of course AJAX call has to make a call to some service and this call still uses HTTP. To make the HTTP call, the XMLHttpRequest object is provided by the browser.
The programmer creates an instance of the class, specifies the service end point to send the HTTP request to, and the what to do with the returned data. The data is returned as XML, JSON or text.
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
myFunction(this);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
The returned data is processed inside the xhttp.onload event, and a custom function can be attached to this event.
In the example it is myFunction that parses the XML and updates elements of the HTML page.
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("CD");
let table = "<tr><th>Artist</th><th>Title</th></tr>";
.... fill table with data
document.getElementById("demo").innerHTML = table;
}
National Weather Service REST API
I recommend this REST API to be used on our hotel chain reservation web site.Motivation
Hotel guests may like to check the weather at the hotel location where they will be staying. The API allows querying the weather data directly from the National Weather Forecast web site. At the time of booking the hotel web site could display weather data for today and the next few days for each hotel, helping choosing among locations.Each hotel can display weather alerts and observation directly in the Hotel room on the smart TV.
API Overview
The NWS API does not require any access token to query the data, which makes it easier to access. All of the information presented via the API is intended to be open data, free to use for any purpose. However, it cannot be directly called from a browser because of Cross Origin Resouce Sharing (CORS) limits access to call from the same URL. To allow access from the browser, a proxy server has to be set up, for example on Cloudflare, that allows all URL to request from.Here is the overview of the API:
- Request: Include the geographical coordinates in the API URL for which data is requested.
- Authentication: A User Agent is required to identify your application.
- Response: Endpoints typically have a GeoJSON default format, given the inclusion of geometry data.
How do I get the forecast?
Forecasts are created at each NWS Weather Forecast Office (WFO) on their own grid definition, at a resolution of about 2.5km x 2.5km. The API endpoint at a specific grid location is formatted as:
https://api.weather.gov/gridpoints/{gridID}/{gridX},{gridY}/forecast
For example: https://api.weather.gov/gridpoints/MTR/86,95/forecast
To get the gridID, gridX and gridY for your latitude and longitude, make an API call to
https://api.weather.gov/points/{latitude},{longitude}
replacing latitude and longitude with actual data,
and extract gridID, gridX and gridY.
Example
Example API request for San Mateo, CA:- gridID = MTR
- gridX = 86
- gridY = 95