CSCI 3342 Web Development
Fall 2024

Client-side page updates

Asynchronous data retrieval

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

Video Walkthrough: Fetching Data (13:40)

Follow along to complete the task.
Additional References:
  • The Fetch API (see how it can be used)
  • The Response interface (see what you can do with the response)
When the Bad Retrieve button is clicked, show the user that the requrest is pending and any errors

Video Walkthrough: Error Handling (13:29)

Follow along to complete the task.
Create a /quotes route that serves all the quote text from the db
When the Retrieve JSON button is clicked, fetch /quotes, convert it from JSON back to JavaScript data, and log it to the console

Video Walkthrough: REST API routes (9:22)

How to retreive JSON data via AJAX requests.