API stands for ‘Application Programming Interface.’ It’s a term used generally in computing, but specifically for the web, APIs are essentially a way for two websites to communicate. Think of the internet as being composed of a bunch of information. APIs, and by extension, databases,  allow you to funnel certain information from certain sources, in the form of XML or JSON (different ways of formatting data) to use in your own projects (XML basically looks like HTML, and it’s a pain to read and work with. When working with cross-site data and dynamic web apps, APIs which store its data in JSON, or “JavaScript Object Notation,” is much more reasonable, because it stores its data as JavaScript objects, which the browser understands and use dynamically via JavaScript. More on this later.). Summarized, APIs basically allow for the repurposing of free flowing information to do novel things. Although most browsers have precautions (read: you can’t do it) for cross-website communication for security purposes, a little hack allows devs to bypass this and create cool new technologies, services and apps using APIs.

In this short tutorial, we’ll go through the process quickly by fetching some data from a weather API (If you’re reading this, I’m going to assume you guys are already fairly familiar with jQuery and JavaScript).

For APIs in the REST (Representational State Transfer) format (which is probably the easiest format to use because of its simplicity), data is fetched via URLs, called API endpoints, and we can access and manipulate the data using standard HTTP methods such as  GET, POST, PUT, and DELETE.

For this example, we’ll simply be using the GET Request (as you will for probably most of your API purposes) As an aside, you can pass additional options, called ‘Parameters,’ along with your request after the URL in what’s called a ‘query string.’

Many APIs require a special password for authentication, so the API knows its data isn’t being abused or used for spam. This is called an ‘API Key.’ Most APIs offer free API keys. Some APIs offer payment options (usually a ‘premium’ or ‘pro’ option in addition to the free one, coming with more perks i.e. allows for more GET requests per day).

For our purposes, let’s try this with the Wunderground Weather API.

1. Visit http://www.wunderground.com/weather/api
2. Sign up and log in.
3. Click on the “Pricing” section.
4. Choose the free Default option and click on “Purchase Key.”
5. Fill out the API form and upon completion you will see your Key ID.

AJAX, or “Asynchronous JavaScript and XML” (unfortunately named when XML was still popular but it also works with JSON) delivers data to the user’s browser “asynchronously” (meaning no refreshing the page required). Basically JavaScript on webpages can chat with other servers and request external data via their APIs using AJAX.  This is how infinite scrolling sites like Twitter and/or Tumblr, new FB comments, or Google search autocomplete all basically work; asynchronously, with the web page dynamically getting data from external sources via AJAX.

jQuery has a method ‘$.ajax()’ to handle our AJAX requests. If we look at the documentation, we see that the method requires us to specify the URL (i.e. API endpoint) that we’re requesting the data from, as well as an optional settings object. The settings object is to specify the data you want to receive from the API, but you can simply pass everything in the settings object to get, well, everything (We’ll go with this second syntax for the tutorial as it’s easier).

With our Wunderground API example:

‘http://api.wunderground.com/api/61f0a55cb00602dc/conditions/q/Ontario/Toronto.json’ becomes:

url: ‘http://api.wunderground.com/api/61f0a55cb00602dc/conditions/q/Ontario/Toronto.json’,
type: ‘GET’,
dataType: ‘json’,
success: function(){
console.log(“It worked!”);

In this test example, the DOM should print out “It worked!” if the request was successful. Too bad it wasn’t. We get an error here because of the aforementioned cross-website communication browser restriction. The action is blocked when making a simultaneous HTTP request to a different domain than the one the browser is currently viewing, because it could be a potential security threat.

Meet JSONP (or “JSON with padding”), basically a cross-site scripting hack. It essentially sends you the data in JavaScript and not in JSON, which is permitted because cross-domain JavaScript communication is okay. What jQuery can do is inject a script tag into your website temporarily when a request is made. The script “src” will point to a bit of JavaScript on the server you requested data from. What the server needs to do is wrap the JSON data in a JavaScript function (thus “padding”). This function becomes available to us, it gets executed, we get our data, and the script tag is removed.

Simply change dataType in the method above and you should see “It worked!” printed on your browser’s console. That means the requested data was fetched. Pretty sweet, right? So we have our data, we’re just not doing anything with it. Note that in our method’s ‘success’ function, we simply ask the console to log the phrase “It worked!” Change this to:

success: function(response){

to print the entirety of the response data (the data you requested from the API) in the console, and because it’s in JSON format, it’s sorted as a JavaScript object. Click on the arrow on the side of each item listed to view the object. This is how we retrieve and use specific information from the API, by simply using JavaScript to work with specific items in the retrieved object of data.

For example, `response.current_observation` would give you the nested current observation object.

You can keep going, accessing the feels like temperateure with ‘response.current_observation.feelslike_c’.

And now we can do all the usual JavaScript and jQuery things with the data, like store the values in a variable:
var forRealsiesTemp = response.current_observation.feelslike_c;

and update the DOM:
$(‘p.real-temp’).html(forRealsiesTemp + “C”);

And of course, you can use JavaScript and jQuery in creative ways to print this information in the browser dynamically for users. Now that the data is yours and stored in the DOM, the only limit with what you can do with it is your creativity.