HTML and CSS Reference
In-Depth Information
Behind the scenes, jQuery handles creating an
XMLHttpRequest
object (the browser object that actually
performs the call), registers the
onreadystatechange
callback, and checks that the appropriate status is
returned before parsing the returned data and calling your callback with the
levelData
. If none of that pre-
vious sentence made any sense, don't worry about it; the main point is that the details of handling AJAX calls
directly is fairly involved, so the nice wrapper jQuery provides around those calls means you can focus on your
game instead of the transport mechanism.
$.getJSON
can also be used to make JSONp requests, which is a workaround for the same domain limita-
tion that normally hampers AJAX calls. To use JSONp simply add a
callback=?
parameter to the requested
URL (provided the remote server supports JSONp).
$.getJSON
is only one of the helper methods available. Some of the other ones you can use are as follows.
Only the common forms of the methods are shown here:
•
$.get(url,[ data, ], successCallback(data) )
:
Makes a get request (as you probably
expected) and returns the data. You can use this method when you load HTML or other data formats (like
a text file) that you want to process before dumping on the page.
•
$(selector).load(url)
:
A convenient method that loads the response of an AJAX get request
into whatever elements were matched by the selector. Use it to quickly load content from a server (such
as a top-ten list or a credits page) directly onto the page.
•
$.getScript(url)
:
Makes a get request but evaluates the response as JavaScript, which is useful
when you want the server to directly generate JavaScript that is executed by the client.
$.getScript
is also useful because it can load data from any domain, whereas any other AJAX call besides getJSON
requires that you target the same domain.
•
$.post(url, [data, ], success(data))
:
Makes a post request (with optional data) to a
URL. Posts are generally done to send large amounts of data to the server and are useful for submitting
form data.
For more details on all the Ajax methods available in jQuery, check out the full documentation online at
ht-
Using Deferreds
One of the problems with the asynchronous part of AJAX is that when you try to do multiple things at a time
but can't be sure which one is going to get done first, the logic required can get a little hairy, requiring a number
of state variables or a bunch of nested callbacks. Luckily, as of jQuery 1.5, all jQuery Ajax methods return an
object known as a
Deferred
that, and when used correctly, it can greatly simplify your callback code.
Say you want to load three separate JSON data files and then do something when you are done. With
De-
ferred
s you could write:
$.when($.getJSON('level1.json'),
$.getJSON('enemies.json'),
$.getJSON('player.json'))
.then(function(level,enemies,player) {
// We know all three files have loaded
}).fail(function() {
// One or more files failed to load
});
