Sams Teach Yourself JavaScript in 24 Hours

Introducing AJAX

Traditionally, one of the major limitations of JavaScript is that it couldn't communicate with a web server. For example, you could create a game in JavaScript, but keeping a list of high scores stored on a server would require submitting a page to a server-side form.

One of the limitations of web pages in general was that getting data from the user to the server, or from the server to the user, generally required a new page to be loaded and displayed.

AJAX (Asynchronous JavaScript and XML) is the answer to both of these problems. AJAX refers to JavaScript's capability to use a built-in object, XMLHttpRequest, to communicate with a web server without submitting a form or loading a page. Although not part of the DOM standard yet, this object is supported by Internet Explorer, Firefox, and other modern browsers.

Although the term AJAX was coined in 2005, XMLHttpRequest has been supported by browsers for yearsit was developed by Microsoft and first appeared in Internet Explorer 5. Nonetheless, it has only recently become a popular way of developing applications because browsers that support it have become more common. Another name for this technique is remote scripting.

The JavaScript Client (Front End)

JavaScript traditionally only has one way of communicating with a serversubmitting a form. Remote scripting allows for much more versatile communication with the server. The A in AJAX stands for asynchronous, which means that the browser (and the user) isn't left hanging while waiting for the server to respond. Here's how a typical AJAX request works:

In practice, this happens quickly, but even with a slow server, it can still work. Also, because the requests are asynchronous, more than one can be in progress at a time.

The Back End

The part of an application that resides on the web server is known as the back end. The simplest back end is a static file on the serverJavaScript can request the file with XMLHttpRequest, and then read and act on its contents. More commonly, the back end is a server-side program running in a language like PHP, Perl, or Ruby.

JavaScript can send data to a server-side program using GET or POST methods, the same two ways an HTML form works. In a GET request, the data is encoded in the URL that loads the program. In a POST request, it is sent separately, and can contain more data.

XML

The X in AJAX stands for XML (extensible markup language), the universal markup language upon which the latest versions of HTML are built. A server-side file or program can send data in XML format, and JavaScript can act on the data using its methods for working with XML. These are similar to the DOM methods you've already usedfor example, you can use the getElementsByTagName() method to find elements with a particular tag in the data.

Keep in mind that XML is just one way to send data, and not always the easiest. The server could just as easily send plain text, which the script could display, or HTML, which the script could insert into the page using the innerHTML property. Some programmers have even used server-side scripts to return data in JavaScript format, which can be easily executed using the eval function.

Popular Examples of AJAX

Although typical HTML and JavaScript is used to build web pages and sites, AJAX techniques often result in web applicationsweb-based services that perform work for the user. Here are a few well-known examples of AJAX:

• Google's Gmail mail client (http://mail.google.com/) uses AJAX to make a fast-responding email application. You can delete messages and perform other tasks without waiting for a new page to load.

• Amazon.com uses AJAX for some functions. For example, if you click on one of the Yes/No voting buttons for a product comment, it sends your vote to the server and a message appears next to the button thanking you, all without loading a page.

• Digg (http://www.digg.com) is a site where users can submit news stories and vote to determine which ones are displayed on the front page. The voting happens inside the page next to each story.

These are just a few examples. Subtle bits of remote scripting are appearing all over the Web, and you might not even notice themyou'll just be annoyed a little bit less often at waiting for a page to load.

Frameworks and Libraries

Because remote scripting can be complicated, especially considering the browser differences you'll learn about later this hour, several frameworks and libraries have been developed to simplify AJAX programming.

For starters, three of the libraries described earlier in this book, Dojo, Prototype, and script.aculo.us, include functions to simplify remote scripting. There are also some dedicated libraries for languages like PHP, Python, and Ruby.

Some libraries are designed to add server-side functions to JavaScript, whereas others are designed to add JavaScript interactivity to a language like PHP. You'll build a simple library later this hour that will be used to handle the remote scripting functions for this hour's examples.

Limitations of AJAX

Remote scripting is a relatively new technology, so there are some things it can't do, and some things to watch out for. Here are some of the limitations and potential problems of AJAX:

• The script and the XML data or server-side program it requests data from must be on the same domain.

• Internet Explorer 5 and 6 use ActiveX to implement XMLHttpRequest. Although the security settings allow this by default, users with different settings might be unable to use AJAX. (Internet Explorer 7 does not have this problem.)

• Some older browsers and some less common browsers (such as mobile browsers) don't support XMLHttpRequest, so you can't count on its availability for all users.

• Requiring AJAX might compromise the accessibility of a site for disabled users.

• Users are accustomed to seeing a new page load each time they change something, so there might be a learning curve for them to understand an AJAX application.

As with other advanced uses of JavaScript, the best approach is to be unobtrusivemake sure there's still a way to use the site without AJAX support if possible, and use feature sensing to prevent errors on browsers that don't support it. See Hour 15, "Unobtrusive Scripting," for details.