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.
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.
When the Retrieve button is clicked, fetch the contents of stuff.txt
and display it on the page