AJAX and getJSON()

As I am currently a student at General Assembly in Washington DC, I was asked the question last week about what is the difference between AJAX, and getJSON.

Now I will admit at the time, I honestly did not know. I had had limited coding experience and although knew at the higher lever what AJAX was, I was completely unfamiliar with this seemingly new foreign term to me called “getJSON”. However before I really delve deeper into this brand new discussion, I need to back up just a bit, zoom out a little bit more, and give a more background on what exactly these entire two topics are essentially talking about.

Both of these terms revolve around a fascinating subject in programming and web development called an API. Which….if you are an curious person, begs a new question. “What is an API”

…..and with this, I believe is the best way to start.

I you were to simply Google the term “API” (and please, by all means do it!) You would come up with two wiki entries explaining API’s, one entry relating to the American Petroleum Institute, and then a what seems like an endless list of entries such as, “API Instagram”, “API Twitter”, “ API Flicker”…..the list is quite long and extensive. An API stands for an Application Program Interface. Many websites allow you to use certain elements of them. A very common example would be Google Maps. Google Maps is a tool, but it also has an API affiliated with it. With that API, other developers and such are able to incorporate the really smooth neat mapping functionality in their own personal websites. They are not designing and programming their own mapping interface, they are using Google’s, and they are able to do it through using Google’s API.

With all of that in mind, lets bring the conversation back to the AJAX, and getJSON(). Very straight forward speaking, AJAX is is a group of interrelated Web development techniques used on the client side to create asynchronous Web applications. Essentially allowing your computer to be processing before a specific transmission has finished. It essentially is the bread and butter of pulling this data from API’s. So when you think about these API’s, it’s pulling this information without you even knowing about it.

Now getting this information from these API’s comes in two specific mark up languages. One of them is called XML, and the other is called JSON. XML is the older one. JSON is the friendly one. XML was the original method for a while, but it is not the easiest to work with this type of data. Over time a man came around named Douglas Crockford who popularized a newer mark up language that was far easier to work with, and this one was now called JSON. What has happened over the years is that JSON has become the preferred mark up language to work with.

Over time what was also happening in the background, was the javascript library of JQuery was growing and becoming more powerful. And with anything that is growing and has white space with it, opportunities emerge.

This is where the getJSON() came about. getJSON() is a jQuery method that easily allows for us to pull API data that is written with JSON.

Some examples from jQuery.com are here:

$.getJSON( "test.js", function( json ) {
console.log( "JSON Data: " + json.users[ 3 ].name );
});

Here is an example from a prior project I was working on:

var input = $(‘#keyword’)
var form = $(‘#search’)
var apiurl = (“http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + “”)
$.getJSON( apiurl + userInput, function( response ){
console.log(get.JSON)
})

Now compare using getJSON() up above, to what it looks like without using the jQuery method.

$.ajax({
url: url,
dataType: “jsonp”,
success: function(parsed_json) {
var location = parsed_json[‘location’][‘city’];

Basically getJSON() is a method for pulling information from an API that uses JSON markup language. It is faster and a little bit easier to use than using traditional ajax methods. What it cannot do is pull any information from XML API’s.

This is where AJAX has the upper hand. AJAX can pull information from JSON API’s, but they also can pull information from XML API’s. It’s just a little bit more of a process.

And there you go! A simple answer to a question you likely don’t hear every day.