Class Days
27 Jsplus

Class 27: AJAX, XML, and JSON

Instructions

Introduction

This first video (opens in a new tab) begins to discuss the idea of AJAX - Asynchronous Javascript.

While some of this is not entirely modern anymore, going through asynchronous javascript allows us to see how we would be able to fetch information without reloading the page. For more information on this topic, it would be best to look at the XMLHttpRequest object (opens in a new tab)

AJAX Requests

The next video (opens in a new tab) dives deeper into asynchronous javascript, by discussing the XMLHttpRequest (opens in a new tab) object further.

In the video, there is some discussion on the idea of REST API (opens in a new tab)s and how to send GET Requests to those APIs. We also briefly go over the Network Tab in Developer Tools (opens in a new tab) to see more about network activity when working with APIs and other sources.

Lastly, here is some documentation on some of the most popular methods and events related to our XMLHttpRequest Object.

Post Requests

The third video (opens in a new tab) goes over the basics of sending POST Requests in particular.

Here we have a practical example of us sending a POST request to a Mock API.

We also go over the chrome extension JSONVue (opens in a new tab), which allows us to see JSON Objects in a readable format from our browser.

XML

We now have a video on XML (opens in a new tab), which is a flexible storage format that follows some of the same structure for HTML.

Here is a W3 Schools page on XML (opens in a new tab).

And here is an XML Sample:

<albums>
  <album>
    <title>Alive</title>
    <artist>Rüfüs Du Sol</artist>
    <year>2021</year>
    <genre>EDM</genre>
  </album>
  <album>
    <title>Planet Her</title>
    <artist>Doja Cat</artist>
    <year>2021</year>
    <genre>Pop/Hip-Hop</genre>
  </album>
</albums>

Notice how it has tags just like HTML, but its used to represent data.

And here is what reddit thinks of XML (opens in a new tab)

  • "Some languages can be read by human, but not by machines, while others can be read by machines but not by humans. XML solves this problem by being readable to neither."
  • "XML is like violence: if it doesn't solve your problem, you aren't using enough of it." -Chris Maden
  • "So, to conclude today's lecture: there is no panacea in CompSci, no one-size-fits-all solution. Tomorrow, we'll start discussing a universal data format, XML."

Since we are already talking about XML, let's talk about the popular format, JSON.

JSON

While most of you know JSON already, this short video (opens in a new tab) explores specifically how JSON compares to XML.

Here is that same example from above but in JSON (opens in a new tab).

{
  "albums": [
    {
      "title": "Alive",
      "artist": "Rüfüs Du Sol",
      "year": 2021,
      "genre": "EDM"
    },
    {
      "title": "Planet Her",
      "artist": "Doja Cat",
      "year": 2021,
      "genre": "Pop/Hip-Hop"
    }
  ]
}

Notice the key:value pairs, and the use of [] for arrays and {} for objects. In short, JSON is simpler and shorter than XML. Nuff said.

Fetch API

This last video (opens in a new tab) covers our use of the Fetch API (opens in a new tab).

Using the Fetch API (opens in a new tab) is a more streamlined way to handle HTTP requests. This ends up being cleaner than using the older XMLHttpRequest format.

Using the Fetch API also requires you to better understand the then keyword (opens in a new tab) and its use as a Promise (opens in a new tab).

Finally, here is the nationalize.io documentation (opens in a new tab) to help you explore how to use it as an API.

26 SQL29 Accessibility