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.
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.
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.
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.
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.
Essentially, AJAX allows you to make web requests without a page reload! Let’s look at a few examples of AJAX in action:
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.
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):
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.
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.
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.