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 espond with a list of tweets mentioning @Epicodus.
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.
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.
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.
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.
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.