I wanted to learn AJAX, but I also wanted to play around with some APIs I had recently learned of. One of the first pieces I put together was my Last.fm recent tracks, which uses their user.getRecentTracks API. Last.fm was easy because the API is well-documented, RESTful (basically means parameters are passed in the request’s URI), & allows cross-domain requests. The code looks like this:
So where is this XMLHttpRequest object? I use jQuery to save myself from some verbose syntax & cross-browser headaches, so
$.get handles the XHR for me. The first parameter passed to
$.get is the URI to request, the second is a function to call if the request returns successfully, & the third is an optional one for type of data to expect (XML). The URI uses query string parameters of form “key=value” to request specific items: my URI says “I want the six most recent tracks from user phette23.” To reuse this code, you would need to get an API key of your own to fill in as the final “XXX” value.
$.get is the processXML function which takes the response from Last.fm & constructs a long string of HTML. XML is akin to HTML but more structured; processXML iterates through the data (using jQuery’s
each), takes the text of artist & name elements from each track, & concatenates it all into one string. The final line puts that string into the recent-tracks div’s inner HTML.
All the Pieces
For my Diigo links, I cheated quite a bit: Diigo has a nice linkroll that was exactly what I would have built. So because the Diigo API requires authentication & server-side scripting, I used their linkroll instead. I use jQuery to remove two elements from the linkroll that affect their styling, giving me more control over display. For Github, I originally used my public Atom feed as an XML source much like Last.fm but ended up using Drupal’s Aggregator module instead. I hadn’t used Aggregator before, so it was a learning experience, which was the whole point.
For Patametadata, my blog hosted on Blogger, I used Yahoo! Pipes to pull in the blog’s RSS feed, convert it to JSON, & then did a similar process to Twitter: jQuery requests the JSON, I put the data into a HTML template with a few lines of code, then place the result onto the page.
$.get calls a success handler that processes some XML into a long string.
All the Struggles
Twitter, despite being JSONP, took awhile to figure out. The hangup was passing the correct parameters: to receive a JSONP response I needed to add “callback=?” to the requested URI.
Even for Last.fm, the actual code is uglier than my example, because I must wrap the entire bit in a self-executing anonymous function that ensures
$ = jQuery. This is necessary because Drupal, for whatever reason, includes jQuery but leaves $ undefined. Furthermore, the date field proved troublesome; it comes as raw text in the GMT timezone, so to convert to my local time I had to slice the hour out of a string, convert to a number, subtract five hours adjusting for negative hours (e.g. => -03:00…that’s not a real time), & even then I don’t know how to programmatically adjust for daylight savings time. Another interesting wrinkle is that currently-playing tracks have no date data, which I adjusted for.
Lastly, my finished product is hardly cross-browser: try visiting the Feeds page in IE8 for a demonstration; only the Diigo linkroll, which required almost no work on my part, & Last.fm show up. Further work will involve making it work on more browsers, as opposed to adding further feeds. Just now, I tested in all major browsers on my MacBook & the results were actually quite positive: Chrome, Firefox, & Opera all displayed each section. I’m almost certain previous tests were not so successful. Safari, on first page load, didn’t show the PataMetaData feed, which then appeared upon refresh. Not sure what I need to do there.