This article introduces AJAX, what it’s used for, and how it works.
What the heck is AJAX?
AJAX is an acronym for Asynchronous Javascript and XML. In plain English, AJAX is a way of using JavaScript that finally allows the server and the webpage to communicate with one another in real time. This means that web pages can send chunks of data to a server (just like submitting a web form) and the server can send chunks of data back (usually as XML), then JavaScript is used to update the DOM. The reason this is so damn cool is that allows you to create web pages that look and behave exactly like programs that you run on your own computer (and without the need for unreliable 3rd-party browser add-ons like Adobe Flash).
Many popular online services are extremely AJAX-heavy: Facebook, Bing, GMail, Google Maps, Google Docs, and My Yahoo!, just to name a few.
Note: The “asynchronous” part of AJAX means that any number of requests & responses can be juggled at the same time. The code does not have to wait for one to finish before another one can start. This is important since passing data back and forth takes time, even if it is usually so small that humans don’t notice.
How does AJAX work?
In order for AJAX to work, you have to be running a server-side technology like ASP.NET or PHP. Here’s why…
The JavaScript sends data to a URL the same way a typical HTML web form sends data (via a standard GET or POST request). The major difference being that JavaScript can send the data without the need to leave the page (it simply does it behind-the-scenes). The server then processes that data the same way it would any other form submission, and sends an XML file back instead of a web page. JavaScript then grabs what it needs from the XML file (still completely behind the scenes) and uses that data to manipulate the DOM.
Because all of that happens behind-the-scenes, from the user’s perspective, they interacted directly with the webpage. The fact that processing took place on the server – or that the webpage was communicating with a server in any way – is completely hidden from the user. In effect, this gives a webpage the ability to behave just like a normal computer program (albeit with the extra advantage that the data stored on the server and is available from anywhere).
How is AJAX used?
In the not-so-distant past, doing something was AJAX was an exercise in frustration, requiring dozens of lines of code for a single request. It was also buggy as all-get-out, especially on webkit-based browsers (Safari & Chrome). Fortunately, jQuery makes AJAX so easy it’s ridiculous. Instead of the dealing with monolithic amounts of code for what amounts to a simple task, jQuery comes with $.get(), $.post(), and $.ajax() functions that do all the heavy lifting for you. This is what a simple AJAX post request looks like using jQuery:
jQuery AJAX Example (Sending a GET Request):
jQuery.get(
"http://example.com/get-responder",
{ key1:"Value1", key2:"Value2"},
function(response){ /*Do stuff*/ }
"xml"
);
The above code sends a GET request to the URL http://example.com/get-responder (just like submitting a form with method=”get”), and sends the data contained in the next line as key value pairs. As a query string, this request would look like this: http://example.com/get-responder?key1=Value1&key2=Value2
The third line is an anonymous function that handles the callback (that’s the XML file that server sent back when AJAX sent the GET request). We’ve named the response “response“, and can select elements with jQuery the same way we’d select them from HTML (more on this in later tutorials). This is also the place you would generally put any code you want to use to make changes to the current webpage/DOM.
Finally, the last line tells jQuery to expect an XML response (as opposed to HTML, JSON, or another type of data). This isn’t vital, but it does help minimize the chance that jQuery will be confused with the response.
No Comments