• Choose a category
• All
• Classic-Fiction

By Root 1091 0

grab data from multiple third-party web sites and squish it together in a new and (with any luck) interesting way. Many web site owners recognized the benefit of opening up their data for people to play with, and opened up XML feeds that programmers could access. This type of open data source is generally referred to as an API, or Application Programming Interface; it’s a way for developers to programmatically access a site or application’s data. However, XML is a bulky format, and one which is difficult to parse on the client side.

Recently, JSON (JavaScript Object Notation, usually pronounced like “Jason”) has become a popular format for data interchange in Ajax applications. JSON is a lightweight alternative to XML, where data is structured as plain JavaScript objects. No parsing or interpretation is required—it’s ready to go in our scripts!

jQuery provides us with a fantastic method for fetching JSON data: $.getJSON. This basic version of this method accepts a URL and a callback function. The URL is a service that returns data in JSON format. If the feed is in the JSONP format, you’re able to make requests across domains. As an example, let’s grab a list of web pages that were recently tagged with “celebs” on the social bookmarking web site delicious.com:

chapter_06/05_getJSON/script.js (excerpt)

$.getJSON(

'http://feeds.delicious.com/v2/json/tag/celebs?callback=?',

function(data) {

alert('Fetched ' + data.length + ' items!');

});

Where did that URL come from? We found it by reading the documentation on the site’s API help page. Every site will have different conventions and data formats, so it’s important to spend some time with the API docs!

A Client-side Twitter Searcher

But why are we wasting time on Delicious? We have a Twitter stream to incorporate, and we need to do it quick smart. Following the API link from the Twitter home page will lead us to the information we need to get this show on the road. We’ll use the search URL to return the JSON data for recent public tweets about celebrities:

chapter_06/06_twitter_search/script.js (excerpt)

var searchTerm = "celebs";

var baseUrl = "http://search.twitter.com/search.json?q=";

$.getJSON(baseUrl + searchTerm + "&callback=?", function(data) {

$.each(data.results, function() {

$('

')

.hide()

.append('')

.append('' + this.from_user

+ ' ' + this.text + '')

.appendTo('#tweets')

.fadeIn();

});

The search results are returned in the form of an object containing a results array. We iterate over each of the array items using jQuery’s $.each helper method. This function will execute the function we pass to it once for each item in the initial array. For each item we create a new div containing the user’s profile picture, a link to their profile on Twitter, and the text of the celebrity-related tweet. The result: a cool Twitter display in just a few lines of code!

Note: Working with JSON

If you’ve tried a few getJSON calls to remote servers, you might have noticed that the data returned requires a bit of work to decipher. You’ll (mostly) have to figure it out for yourself. Different services have API documentation of varying quality and clarity. Sometimes it will provide you with examples, but at other times you’ll be left on your own. One way to examine an API’s data structure is to type the API URL directly into your web browser and inspect the resulting JSON directly.

The jQuery Ajax Workhorse

If you were feeling particularly adventurous and hunted down the load function in the jQuery core library source code, you’d find that sitting snuggly at the bottom of the function would be a call to the $.ajax method. In fact, if you were to investigate any of jQuery’s Ajax functions, you’d find it’s the same with all of them!

All of jQuery’s Ajax functions are simply wrappers around the $.ajax method, each designed to provide you with a simple interface for a specific type of task. By having these helper methods