Modern AJAX Programming with JavaScript Fetch and Await

Goodbye XMLHttpRequest, hello fetch, async, and await

Demo app — image by author, data from the BBC, used with permission

AJAX is a set of techniques to update the data on a web page without refreshing the whole page. This is achieved by requesting data from a server in the background and updating parts of the web page with that data.

AJAX has been a bit of a misnomer for some time — it stands for Asynchronous JavaScript And XML meaning that a JavaScript function makes an asynchronous call to a server that then returns XML data. However, while they are asynchronous, most AJAX applications use JSON as the data format rather than XML and, in the past, they relied on the function XMLHttpRequest - a rather awkward name and rather awkward to use as a function, as well.

JavaScript libraries such as JQuery made life much simpler by providing a wrapper around XMLHttpRequest but the relatively new additions to JavaScript that we will use, make life simpler still.

We are going to look at JavaScript’s fetch, async, and await to build a weather forecast web page where we can change the data using a dropdown menu but without refreshing the page. We'll use a simple Python Flask app to serve the data but the focus of this article is on the web page that uses the data.