AJAX Events (^) ❘ 205
The script that you load for the example, jQueryUI.js, along with the source code for the example, is
available with this book’s source code download materials at http://www.wrox.com/go/webdevwithjquery.
AJAX Events
This section covers what jQuery calls AJAX events. AJAX events are milestones that occur during
an AJAX request that can give you feedback about the status of your request or allow you to execute
code when each milestone occurs. Examples of milestones are when a request starts, when a request
stops, when a request has been sent, when a request has failed, when a request is completed, and
when a request is completely successful. I don’t go into exhaustive detail about each of these events,
but Appendix G has a full listing of all the AJAX methods, properties, and AJAX events supported
by jQuery.One example is how to show an activity indicator while some remote content is being fetched. An
activity indicator is an animation that shows the user that something is happening, but it gives the
user an indication to wait for that something to happen. There are three ways to do this. Two meth-
ods enable you to globally set AJAX events for all AJAX requests using jQuery’s AJAX methods,
and there is one way to set AJAX events per individual request using jQuery’s ajax() method. This
section describes how to make a loading message using each of these methods.Adding jQuery AJAX events globally is easy—all you have to do is call jQuery’s ajaxSetup()
method. First, you need an activity indicator to show that something is taking place. Typically, an
animated GIF is good enough to get the job done. In the following snippet, Example 7-6, from the
folder tree example that I presented previously, I’ve added an animated GIF to display while activity
is taking place:<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='utf-8' />
<title>Folder Tree</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 7-6.js'></script>
<link href='Example 7-6.css' rel='stylesheet' />
</head>
<body>
<div id='folderTree'>
<ul class='folderTree'>
<li>
<div class='folderTreeDirectory folderTreeRoot'
data-id='1'
title='/'>
<span>Macintosh HD</span>
</div>
<ul class='folderTreeDirectoryBranchOn' data-id='1'>
<li class='folderTreeDirectoryBranch'>
<div class='folderTreeDirectory'
data-id='5175'