JQuery_ Novice to Ninja - Earle Castledine [92]
chapter_06/12_ajax_error_handling/script.js (excerpt)
error: function(xhr, status) {
if (_gallery.attempts-- == 0) {
// Sorry. We give up.
_gallery.reset();
return;
}
setTimeout(function() {
_gallery.load();
}, _gallery.delay *= 2);
}
Note: Increment and Decrement
In JavaScript, if you follow a numeric variable with -- or ++, the variable will be decremented or incremented by 1, respectively. This is a handy shortcut for the -= and += operators we’ve already seen.
Every time there’s an error, we decrement the attempts variable. If we make it all the way down to 0, we give up retrying. Also, we’ve made a subtle change to the delay time in the setTimeout function: we double the length of the delay on each attempt to call the load method. So on the first error we wait for one second, on the second error two seconds, and if that call also fails, we wait four seconds. This is known as exponential backoff, and is a handy way to decrease the frequency of our requests when there’s a real problem; if a user’s internet connection has dropped, there’s no sense pinging away madly waiting for it to come back up.
Tip: Code for Errors First!
Error handling can seem like a real pain, and the chances of it being skipped are great indeed! One way to give error handling a fighting chance of making it into your next project is by coding the error cases first. The bonus with this approach is that if you do it well, you’re more likely to catch less obvious issues with your other code, so you can end up saving time in the long run.
Even these few simple steps are going to save the day in the majority of cases, but there’s a lot more we could do with error handling. For example, you could take advantage of the global ajaxError handler to implement some general handlers for your pages, respond differently to different types of errors, or provide error messages to let your users know that something has gone wrong.
Image Tagging
Displaying the images is one thing, but our primary objective in Ajaxifying StarTrackr! is to begin gathering data from the community. Tagging has proven itself a great way to build up a collection of metadata that relates to your content. It works by letting users add words that they think describe the item they’re looking at. If a lot of people use the same words, you can be fairly confident there’s a correlation between the two. This in turn can help other users browse your site for content that’s relevant to them.
Consuming XML
You’ve had a chat with your developer, and told him that you need some additional fields returned from the data service. He offered a solution that involved indicating rows with pipe delimiters, fields with semicolons, attributes wrapped in curly brackets and tildes, and …
Luckily you know a couple of Jedi mind tricks, and with a swift wave of your hand convinced him that XML was the format he was looking for.
Although JSON is the up-and-coming golden boy of data interchange formats on the Web, you’re still going to find a lot of web services that spit out XML. XML is more mature than JSON, so there are more libraries around for the back-end folks to work with. And although JSON is much easier to play with (since it’s essentially a JavaScript object ready to go), jQuery makes manipulating XML data a breeze. We’ve been told that the data we’ll be receiving looks like this:
Now that we have our data, we need to update our initial implementation to make use of it. For our first pass we just split the filenames and iterated over each of them using $.each. But now our requirements are a little more complex. We’re receiving XML nodes and we need to extract the information we require from them. The good news is that jQuery lets us deal with XML documents