JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

In addition, most of the time, you’ll receive a text response, which is stored
in the XHR object’s responseText property. This response could be a chunk of
HTML, a simple text message, or a complex set of JSON data (see page 370).
Finally, if the server responds with an XML file, it’s stored in the XHR object’s
responseXML property. Although XML is still used, it’s more common for program
server pages to return text, HTML, or JSON data, so you may never have
a need to process an XML response.
Whatever data the server returns, it’s available to the callback function to use
to update the web page. Once the callback function finishes up, the entire Ajax
cycle is over. (However, you may have multiple Ajax requests shooting off at the
same time.)
Ajax the jQuery Way
There are enough differences between browsers that you have to write extra code for
your Ajax programs to work in Internet Explorer, Firefox, Safari, and Opera. And
although the basic XMLHttpRequest process isn’t too complicated, since you must
take so many steps each time you make an XHR request, your Ajax programming
will go faster if you turn to a JavaScript library.
The jQuery library provides several functions that greatly simplify the entire process.
After all, if you look at the five steps in an Ajax request (page 347), you’ll see
that the interesting stuff—the programming that actually does something with the
server’s response—happens in just a single step (step 3). jQuery simplifies all of the
other steps so you can concentrate on the really fun programming.
Using the load() Function
The simplest Ajax function offered by jQuery is load(). This function loads an
HTML file into a specified element on the page. For example, say you have an area
of a web page dedicated to a short list of news headlines. When the page loads, the
five most recent news stories appear. You may want to add a few links that let visitors
choose what type of news stories are displayed in this area of the page: for example,
yesterday’s news, local news, sports news, and so on. You can do this by linking to
separate web pages, each of which contain the proper news items—but that would
force your visitors to move onto another web page (and wouldn’t use Ajax at all!).
Another approach would be to simply load the selected news stories into the news
headlines box on the page. In other words, each time a visitor clicks a different news
category, the web browser requests a new HTML file from the server, and then
places that HTML into the headlines box—without leaving the current page (see
Figure 11-3).
www.it-ebooks.info
chapter 11: introducing ajax
Ajax the jQuery Way
349