HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [273]
AJAX Spelled Out
Technical people love snappy acronyms. Nothing is more intoxicating than inventing a term. AJAX is one term that has taken on a life of its own. Like many computing acronyms, it may be fun to say, but it doesn’t really mean much. AJAX stands for Asynchronous JavaScript And XML. Truthfully, these terms were probably chosen to make a pronounceable acronym rather than for their accuracy or relevance to how AJAX works.
A is for asynchronous
An asynchronous transaction (at least in AJAX terms) is one in which more than one thing can happen at once. For example, you can make an AJAX call process a request while the rest of your form is being processed. AJAX requests do not absolutely have to be asynchronous, but they usually are.
When it comes to Web design, asynchronous means that you can independently send and receive as many different requests as you want. Data may start transmitting at any time without having any effect on other data transmissions. You could have a form that saves each field to the database as soon as it’s filled out, or perhaps a series of drop-down lists that generate the next drop-down list based on the value you just selected. (It’s okay if this doesn’t make sense right now. It’s not an important part of understanding AJAX, but vowels are always nice in an acronym.)
In this chapter, I show you how to do both synchronous and asynchronous versions of AJAX.
J is for JavaScript
If you want to make an AJAX call, you simply write some JavaScript code that simulates a form. You can then access a special object hidden in the DOM (the XMLHttpRequest object) and use its methods to send that request to the user. Your program acts like a form, even if there was no form there. In that sense, when you’re writing AJAX code, you’re really using JavaScript. Of course, you can also use any other client-side programming language that can speak with the DOM, including Flash and (to a lesser extent) Java. JavaScript is the dominant technology, so it’s in the acronym.
A lot of times, you also use JavaScript to decode the response from the AJAX request.
A is for . . . and?
I think it’s a stretch to use And in an acronym, but AJX just isn’t as cool as AJAX. They didn’t ask me.
And X is for . . . data
The X is for XML, which is one way to send the data back and forth from the server. Because the object you’re using is the XMLHttpRequest object, it makes sense that it requests XML. It can do that, but it can also get any kind of text data. You can use AJAX to retrieve all kinds of things:
♦ Plain old text: Sometimes you just want to grab some text from the server. Maybe you have a text file with a daily quote in it or something.
♦ Formatted HTML: You can have text stored on the server as a snippet of HTML/XHTML code and use AJAX to load this page snippet into your browser. This gives you a powerful way to build a page from a series of smaller segments. You can use this to reuse parts of your page (say, headings or menus) without duplicating them on the server.
♦ XML data: XML is a great way to pass data around. (That’s what it was invented for.) You might send a request to a program that goes to a database, makes a request, and returns the result as XML.
♦ JSON data: A new standard called JSON (JavaScript Object Notation) is emerging as an alternative to XML for formatted data transfer. It has some interesting advantages. You might have already built JSON objects in Book IV, Chapter 4. You can read in a text file already formatted as a JavaScript object.
Making a Basic AJAX Connection
AJAX uses some pretty technical parts of the Web in ways that may be unfa-miliar to you. Read through the rest of this chapter so that you know what AJAX is doing, but don’t get bogged down in the details. Nobody does it by hand! (Except people who write AJAX libraries or books about using AJAX.) In Chapter 2 of this minibook, I show a library that does all the work for you. If all these details are making you misty-eyed, just skip