Lesson Monday

In this lesson we'll walk through what an API is and how to program our applications to request data from one. We'll also discuss a technology called AJAX that is used to retrieve data from APIs.

In upcoming lessons we'll code an app to make an API request, explore how to handle asynchronous requests, and discuss how to manage and protect our API keys.


The term API stands for "Application Programming Interface". In simple terms, APIs are a set of requirements that determine how one application may interface, or communicate, with another.

For instance, have you ever seen Share on Facebook or Share on Twitter buttons while reading an article online? If clicked, this button can publish the article to your Twitter or Facebook feed. Following the requirements of the Twitter (or Facebook) API, the news application communicates (or, interfaces) with Twitter or Facebook. The Twitter or Facebook API determines what information the platform can receive from other applications and how that information must be transmitted.

In addition to posting data between platforms, APIs also allow us to retrieve and use data provided by the API. We can send an API a request outlining the info we'd like to receive. The APIs server will then respond with the data we're seeking. Or an error message if something went wrong.

For example, if we wanted to display all tweets mentioning the @Epicodus Twitter account, we could send the Twitter API a request detailing this. It would respond with a list of tweets mentioning @Epicodus.

How to Request API Data

But how do we request API data? By creating and sending an HTTP request with the correct information! First, let's walk through how to make a request. Then we'll discuss how to determine what information to include.


We will use something called AJAX to make our web requests. AJAX stands for "Asynchronous JavaScript And XML". Let’s break down each of these terms:

  • Asynchronous means "not synchronous", or "not in sync". In programming, a request to a server may be sent asynchronously, meaning the application does not wait until this request is returned to keep running. Your application can send the request, and the user can still interact with your site in the meantime. Then, when a response is received, it can use JavaScript to dynamically update the page. This also means the request can be sent at any time, not simply when a page is loaded or reloaded.

  • JavaScript, as you know, is a programming language. AJAX uses JavaScript to make requests, retrieve responses, and dynamically update HTML.

  • XML stands for eXtensible markup language. Originally, XML was the format server responses were sent in. However, it’s no longer as common. Other formats (like JSON, which we'll discuss in a moment) are more popular. So, despite containing XML in its abbreviation, AJAX requests aren’t actually required to return XML.

Alternate Names

Also, keep in mind AJAX isn’t the official name for this technology (although the term is widely used). The proper name for an AJAX request is an XMLHttpRequest Object, sometimes further abbreviated to XHR.

Example Uses

Essentially, AJAX allows you to make web requests without a page reload! Let’s look at a few examples of AJAX in action:

  • Twitter uses AJAX to scroll through a seemingly-infinite number of tweets. Visit any page on Twitter, like this one, and scroll to the bottom. Notice that as soon as you reach the end of the page, more tweets are automatically added without reloading. This is done by making an AJAX request to the server to retrieve more tweets. JavaScript is then used to dynamically add this content to the page.

  • Google Maps also uses AJAX to update map areas displayed when the user drags-and-drops to navigate to different areas of a map, or zooms in and out.

Logging AJAX Requests

We can see these AJAX requests in action, too. With Google Maps open in Chrome, access the JavaScript console (Menu > More Tools > Developer Tools, Cmd + Opt + J on Macs, or Ctrl + Shift + J on Windows):


Then, click the settings "cog" icon in the upper right of the JavaScript console. (It should read Console Settings when you hover over it). You should be presented with several options. Check the box reading Log XMLHttpRequests, and nothing else. This will automatically log any AJAX requests (also known as XMLHttpRequests):


Now, keep the console open and drag around Google Maps. Entries will be logged to the console each time you view a different area of the map:


You should see XHR finished loading: GET with a URL printed to the console multiple times. Each of these logged items represents an XHR (or XMLHttpRequest, also known as AJAX request) made by Google Maps to retrieve more areas of the map from the server and display them without reloading the page.

Same Origin Policy

By default, browsers use the "Same Origin Policy", a security measure that only allows a web page to make AJAX requests to the same domain it was loaded from. Imagine that you are logged into your bank. Your bank trusts requests that come from your browser, since you're logged in. Now, you visit a malicious website, and it makes an AJAX request to your bank to transfer all your money out of your bank account. Thanks to the Same Origin Policy, your browser will block the request before it ever happens because it's not occurring from your browser that you've authenticated by logging into your account.

However, there are often cases where cross-origin requests like these are permitted; even encouraged! For example, APIs like the Open Weather Map API specifically wants its data to be available to any website, from any domain. It's not protected, private information about your bank account; it's publicly-available data about the weather.

To facilitate this, modern servers and browsers implement the Cross-Origin Resource Sharing (CORS) standard, in which the server can specify which domains are allowed to make AJAX requests to it. In the case of the Open Weather Map API, all domains are allowed.