AJAX, JSON, APIs

APIs

API stands for Application Programming Interface. Specifically, we're talking about Web APIs, also known as Web Services. This lets you do something like display your recent tweets on your personal website or allow users to login using their Google accounts.

APIs allow you to use a particular site's services without leaving your own site. To do that, you have to request data from the site in the way that they want you to. Tons of services out there offer APIs to developers. Check out Foursquare, Google, Sunlight Foundation, and OpenWeatherMap

What is an API? video on Lynda.com (2m 43sec)
Using APIs
An example API, Sunlight Foundation. An overview of the info available through their API: http://training.sunlightfoundation.com/module/unlocking-api/

AJAX

AJAX (Asynchronous JavaScript And XML) refers not to a single technology, but to a method of managing data within web pages.

AJAX is useful for web apps because it allows you to retrieve information from the server without reloading your webpage (hence the "Asynchronous" qualifier). Prior to AJAX, if you wanted to load more information into a web page, you'd have to reload the page or load a new page. The ability to get and display new data without reloading has led to a fundamental change in user experience. Notice how on some sites, you don't have to click "show next 20 articles"; you just scroll down and they load -- that's AJAX.

JSON

JSON, or “Javascript Object Notation” is a text format that was originally designed to send snippets of Javascript code. As a data format, it has evolved to be used on its own in a variety of languages and applications beyond just Javascript. It's still ideal for Javascript, though, because it is literally the piece of code (text) you'd use to create an object in Javascript.

Objects in JSON consist of name/value pairs. An object is enclosed in curly brackets, { }. Each name is followed by a colon (:) and the name/value pairs are separated by a comma (,). A simple object example:

{
    "name":"Grand Central Terminal",
    "location": "87 E 42nd St"
}

Arrays are enclosed in square brackets, [ ] with a comma (,) separating the elements. An array of objects inside an object looks like:

{
"locations": [
  {
    "name":"Grand Central Terminal",
    "location": "87 E 42nd St"
  },
  {
    "name":"Penn Station",
    "location": "1 Penn Plaza"
  }
]}

locations is a property that contains an array of objects.

If this were JSON data we loaded into a Javascript application, it could be stored in a variable, like this:

var mydata = {"locations": [
  {
    "name":"Grand Central Terminal",
    "location": "87 E 42nd St"
  },
  {
    "name":"Penn Station",
    "location": "1 Penn Plaza"
  }
]};

Now you can access it with the variable mydata:

alert('I am at' + mydata.locations[0].name);

Parsing JSON

Parsing JSON just means being able to access the elements of a Javascript object. For a detailed example of drilling down through an object to access its data, see Parsing a JS Object on jsfiddle.