JQuery_ Novice to Ninja - Earle Castledine [85]
$('body').animate({'background-color': '#fff'}, 'slow');
});
GET and POST Requests
Finally, jQuery packs in a couple of helper functions for performing GET and POST requests. These are simple wrapper functions around the $.ajax method, but are more convenient to use; just select a URL and any data you want to push—and off you go!
The two calls are almost identical, with the only difference being the HTTP request type: $.get will perform a GET request and $.post will perform a POST request. Both requests accept the same parameters, which (besides the URL) are all optional:
$.get(url, data, callback, dataType);
$.post(url, data, callback, dataType);
The data parameter should contain any data that needs to be sent to the server. As with the $.ajax function, the callback we specify will be passed the response data and status. The type parameter lets you specify the data type that will be passed on to the callback function; this can be xml, html, script, json, jsonp, or text, but it’s unlikely you’ll ever need to use this parameter. Here’s what these methods look like in action:
$.get("getInfo.php", function(data) {
alert("got your data:" + data);
});
$.post("setInfo.php", {id: 2, name: "DJ Darth Fader"});
Yes, they’re very easy and convenient, but beware! The $.get and $.post methods are supposed to be for quick, one-off requests. The callback function only fires when everything goes hunky-dory—so unless you’re watching with a global event handler (which we’ll cover in the next section), you’ll never know if a call fails. In some situations that’s totally acceptable: perhaps you’re just intermittently pinging a service, in which case $.get is a fine solution. But for most production-level functionality, you’re just going to have to get used to the more complex $.ajax method!
jQuery Ajax Events
When making Ajax requests with jQuery, a number of events are fired. These can be handled anytime we’d like to do some extra processing—perhaps adding a “loading” message when a request begins and removing it when it concludes, or handling any errors that may have occurred.
There are two types of Ajax events in jQuery: local and global. Local events apply only to individual Ajax requests. You handle local events as callbacks, just as you do with any of the other events we’ve seen. Global events are broadcast to any handlers that are listening, and so present a great way to implement functionality that should apply to all requests.
As an example, jQuery defines an error local event and an ajaxError global event. The error event can be handled for an individual request, whereas ajaxError can handle an error that occurs in any request. Local events are handled inside the $.ajax call, like this:
$.ajax({
url: "test.html",
error: function() {
alert('an error occurred!');
}
});
Global events, on the other hand, are generally attached to the DOM node where you’d like to show a response to the user. For instance, you may have a div element for displaying your Ajax error messages:
$("#msg").ajaxError(function(event, request, settings) {
$(this).html("Error requesting page " + settings.url + "!");
});
Whenever any Ajax call from the page fires an error, this handler will be called. We’re interested in more than just errors though: there are a bunch of other interesting events we can hook into if we need to. They’re all structured as above, and most have a corresponding local and global version—so you can choose the granularity with which you handle them.
The success (local) and ajaxSuccess (global) events let us know when an event has completed successfully. The complete (local) and ajaxComplete (global) events tell us when an Ajax request has concluded, regardless of its success or failure. You will only receive either a success or error event for each request—but you’ll always receive a complete event.
The beforeSend (local) and ajaxSend (global) events let us react just before an Ajax request is sent into the world. And finally, the ajaxStart and ajaxStop global events occur when an Ajax request