JavaScript in the web browser was revolutionized and revitalized back in the mid 2000s by Asynchronous JavaScript and XML (AJAX). AJAX isn't a specific technology, but rather an approach to retrieving data and updating parts of a webpage without reloading the whole page. It started with XML, but the JavaScript Object Notation (JSON) pretty quickly proved a more popular data format, and the original XMLHttpRequest (XHR) functionality was wrapped up in jQuery's .ajax call, which then gave way to the built-in fetch module and the popular axios library.

For this module, we're going back to running our node/express server with a backend database. We'll use this server both to serve up HTML pages (which could be from templates), and to respond to AJAX requests. All these technologies work together. Grab the assignment repo to get started.

Start up the included server.js and navigate your browser to the static file http://localhost:8080/ajax_retrieve.html

Note the page loads the static file ajax_retrieve.js. This is where we will put JavaScript code that we want to run on the client-side in the browser. Contrast with server.js that runs on the server-side in node.js. Because these two files are running in two different places (could be on two different machines across the world!), they do not share any data. Variables in one cannot be accessed by the other. Instead, they will pass data back and forth using HTTP requests.