JQuery_ Novice to Ninja - Earle Castledine [84]
The $.ajax method is the heart of jQuery’s Ajax abilities and is the most powerful and customizable Ajax method available to us. Being the most complex in jQuery’s arsenal, it can take a while to conquer, but it’s well worth the effort; this is the creature you’ll be spending most of your Ajax time with.
Note: Use the Source, Luke!
If you’ve made it this far in your jQuery quest, you should be bold enough to have a peek at the JavaScript that makes up your library of choice. Even if you struggle to understand everything that’s going on, it’s often helpful to see broadly what the underlying code is doing—it can sometimes help you discover functionality that you might have missed if you only read the documentation. Make sure you’re looking at the non-minified version, though, otherwise you’ll see nothing but gibberish!
The syntax used with the $.ajax method is more complex than the others we’ve encountered so far, because you need to spell out everything you want it to do: it will take nothing for granted. It’s still fairly straightforward to use, though. Here’s a simple GET request:
$.ajax({
type: 'GET',
url: 'getDetails.php',
data: { id: 142 },
success: function(data) {
// grabbed some data!
};
});
We specify the request type, the URL to hit, and a success callback wherein we can manipulate the data. Easy. The complexity emerges from the number of possible options you can provide. There are over 20 available options, ranging from error callbacks, to usernames and passwords for authentication requests, to data filter functions for pre-processing returned information … You’ll only need some of these options most of the time—most common functionality uses just a few. But we’ll be putting a bunch of the options to good use in the coming sections and chapters, so they’ll become quite familiar to you. A full reference of all the options available can be found in Appendix A.
Common Ajax Settings
Oftentimes you’ll want to apply several of the same settings to multiple Ajax calls in the same script. Typing them out at length each time would grow tedious, so jQuery allows you to specify global settings with the $.ajaxSetup action:
$.ajaxSetup({
type: 'POST'
url: 'send.php',
timeout: 3000
});
This sets the defaults for further Ajax calls, though you can still override them if you need to. By specifying the common defaults for the page, we can dramatically simplify the code required to actually send a request:
$.ajax({
data: { id: 142 }
});
This call will send a POST request to send.php, which will time out if it takes longer than 3,000 milliseconds. Some settings are unable to be set via the $.ajaxSetup method; error, complete, and success callback functions, for example, should be handled with the global Ajax events described in the next section.
Loading External Scripts with $.getScript
Cramming desktop-style functionality into our web apps is great, but suffers a downside: as our applications become larger, download time increases proportionately. And the fickle public have better things to do than just sit around twiddling their thumbs waiting for our masterpieces to unveil themselves—and will go elsewhere. We need our application to be as snappy as possible. And, unsurprisingly, jQuery is here to give us a helping hand.
The $.getScript function will load and execute a JavaScript file via Ajax. How does this help us out? Well, if we plan carefully, we can load a minimal amount of our code when the page loads and then pull in further files as we need them. This is particularly useful if we require any plugins that have a sizeable footprint, but regardless of size you should try to delay the loading of your code until it’s absolutely necessary.
By way of example, let’s load in the Color plugin we saw in the section called “Color Animation” in Chapter 3 from the jQuery plugin repository:
$.getScript('http://view.jquery.com/trunk/plugins/color/
↵jquery.color.js',