What is AJAX?

AJAX is an acronym for Asynchronous JavaScript And XML. It uses XMLhttpRequest, which is built into the browser to get data from a web server such as an API. The following diagram from W3schools shows how AJAX works.

Resources

XMLHttpRequest is an object that browsers use to get and receive data from a web server. These web servers are especially helpful because background updates to the data can occur without the need to refresh a page. It also nice when there are large, tedious amounts of data that need to be stored in another place.

This is the syntax for creating a new XMLHttpRequest:

To gain a better understanding of AJAX, I followed a tutorial on YouTube. This tutorial was very helpful in understanding how to access individual pieces of data from a server and output them to an HTML page.

Tutorial Result

Each step is explained in the comments of the JavaScript file. A simple explanation of what I did: I accessed an external JSON file that contained information about animals using the XMLHTTP request object and a URL to that file. By accessing this URL, I was able to parse the data and pull it into my JavaScript file where I could access individual objects and arrays. When the button is clicked, all of the information is displayed in a sentence.

Resources

This is my teaching video. It begins at 0:00 and ends at 5:40.