JQuery_ Novice to Ninja - Earle Castledine [86]
We’ll be looking at some practical uses for these events in the coming examples of Ajax interactivity.
Interactivity: Using Ajax
Phew! There was a lot to cover in reaching this point, but we’ve arrived. We know how to nicely structure our ideas in JavaScript, and we’re ready to wield our shiny new AJAX tools. It’s time to pull up the client’s requirements list and put our skills to the test!
The client is fully focused now. He’s confident that StarTrackr! will become one of the biggest photo-sharing sites in the world. Accordingly, he’s done some business analysis on his competitors and has determined that the biggest problem with most photo sites is that they aren’t primarily concerned with celebrities. StarTrackr! is way ahead of the field here—in fact, it has thousands of photos already uploaded by users from around the world. To capitalize on his company’s strengths he wants to engage the site’s community in organizing the collection.
Ajax Image Gallery
The first step to launching StarTrackr! into the photo-sharing space is to display some pictures on the home page. Our initial version is intended as a proof of concept to show the client how the gallery might look. It will grab random images via Ajax and display them in a container. Every few seconds, it will go and grab some more.
The trickiest part of playing with Ajax is talking to your back-end coders about data formats. You’ll need to sit down and come to an agreement on what the data you’re sending and receiving should look like. Will the server send XML, JSON, or some custom text format? What fields do you need to pass to the server to update the database? How do you specify empty fields? Will there be any success or error messages sent back?
Our service returns half a dozen random image names every time we call it. We have a particularly lazy developer who insists on giving us a simple, pipe-delimited string of image names. A sample response might look like this:
computadors.jpg|night_out.jpg|mr_speaker.jpg|dj_snazzy_jeff.jpg
Many web frameworks will now happily return XML or JSON responses for you to consume, but when working with hand-rolled APIs, it’s certainly not uncommon to receive plain-text delimited messages that you’ll have to manipulate and convert into usable data. In this case, we’ll use JavaScript to split the string on the pipe symbol: data.split('|');. This will give us an array of image names to work with.
Our gallery is just a bunch of image tags inside a containing div element, so the styling is up to you. The starting HTML is as simple as:
chapter_06/07_ajax_image_gallery/index.html (excerpt)
Next, we create a GALLERY object literal that will act as our widget namespace. We’ll need to define a few constants: a selector for the gallery, the URL for our image service, and a delay time (in milliseconds) for rotating our images. We’ll also stub out a couple of methods that will form the backbone of the gallery:
chapter_06/07_ajax_image_gallery/script.js (excerpt)
var GALLERY = {
container: "#gallery",
url: "getImages",
delay: 5000,
load: function() {
// Load our data
},
display: function(image_url) {
// Process the data
}
};
Onto the good part: filling in the guts of the Ajax loader. The first task we’ll tackle is store a reference to the GALLERY object itself—because when our Ajax callback methods run, the scope will be changed and this will no longer refer to GALLERY. We saw in the section called “Scope” that this is simply a matter of storing the current scope in a variable, so we can retrieve it later: var _gallery = this;.
For the sample code, we’re using a simple text file called getImages to substitute for our server-side functionality; it contains an example of the kind of response we’d expect to receive from the server. Note that Internet Explorer will refuse to execute Ajax requests targeting the local file system for security reasons. For testing purposes, therefore, it’s best if you use