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 we'll use to reach out and retrieve data from APIs. Then, 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.

APIs

The term API stands for "Application Programming Interface". In the most 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 a "Share on Facebook" or "Share on Twitter" button while playing a game, or reading an article online? If clicked, this button can share your game's new high score, or the recent article from your favorite news site to your Facebook or Twitter account. By following the requirements of the Twitter (or Facebook) API, your news article application (or online game) can communicate (or, interface) seamlessly with Twitter (or Facebook). The Twitter 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 from other platforms. We can send an API a request detailing the information we'd like to receive. Then, the APIs server will respond with the data we're seeking (or, an error message if something went wrong.) For instance, if we wanted to display all tweets mentioning the @Epicodus Twitter account, we could send the Twitter API a request detailing this. It could then respond with a list of tweets mentioning @Epicodus.

How to Request API Data

But how do we request API data like this? We just need to create and send 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.

AJAX

We are going to 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. This means 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, we 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 just a moment) are much more popular. So, note that despite containing XML in its abbreviation, AJAX requests aren’t required to return XML.

Alternate Names

Also, keep in mind that 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):

developer-console-google-maps

Then, right-click in the console. You should be presented with several options. Click Log XMLHttpRequests. This will automatically log any AJAX requests (also known as XMLHttpRequests):

log-xmlhttprequests-option-in-console

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:

logged-ajax-requests-in-console

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.

Terminology


  • AJAX: Stands for "Asynchronous JavaScript And XML. It is a technique to make web requests without a page reload.

  • Same Origin Policy: A security measure that only allows a web page to make AJAX requests to the same domain it was loaded from.

  • Cross-Origin Resource Sharing (CORS): A standard in which the server can specify which domains are allowed to make AJAX requests to it. Some APIS allow all domains, others have stricter rules surrounding access.