AJAX Tutorial: Just what is AJAX all about?
Have you wondered what AJAX is, and whether you should learn to apply it in your web development work? You’ve probably heard the buzzword, but what exactly makes AJAX tick? Let’s take a look “under the hood” and see just what the buzz is all about.
What is AJAX?
AJAX is an acronym for Asynchronous JavaScript and XML. It is a development technique for creating interactive web applications. Unlike classic web pages, which must load in their entirety if content changes, AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.
AJAX uses a combination of:
- CSS, for marking up and styling information.
- The Document Object Model accessed with a client-side scripting language like JavaScript to dynamically display and interact with the information presented.
- The XMLHttpRequest object to exchange data asynchronously with the web server.
- XML is sometimes used as the format for transferring data between the server and client, although any format will work.
Here is how it all works together:
Talking to the Server
Once the DOM event has occurred on the webpage, we need to obtain an XMLHttpRequest Object. This is done using a function like the following. We need to write it this way to accommodate different browsers. Notice that we set the callback function using onreadystatechange.
var obj;
function ProcessXML(url) {
// native object
if (window.XMLHttpRequest) {
// obtain new object
obj = new XMLHttpRequest();
// set the callback function
obj.onreadystatechange = processChange;
// we will do a GET with the url; "true" for asynch
obj.open("GET", url, true);
// null for GET with native object
obj.send(null);
// IE/Windows ActiveX object
} else if (window.ActiveXObject) {
obj = new ActiveXObject("Microsoft.XMLHTTP");
if (obj) {
obj.onreadystatechange = processChange;
obj.open("GET", url, true);
// don't send null for ActiveX
obj.send();
}
} else {
alert("Your browser does not support AJAX");
}
}
Here are the attributes and methods for the XMLHttpRequest Class:
Attributes
| readyState | The readyState code changes value from 0 to 4 during a request cycle: 0: not initialized. 1: connection established. 2: request received. 3: processing. 4: finished and response is ready. |
| status | 200: “OK” 404: Page not found. |
| onreadystatechange | callback method assigned via this attribute |
| responseText | holds the response data as a string of characters. |
| responseXml | holds the response data as XML data. |
Methods
| open(mode, url, boolean) |
mode: type of request: GET or POST url: the location of the file boolean: true (asynchronous) or false (synchronous). |
| send(“string”) | null for a GET command (in native mode; null not passed with ActiveX) |
Here is an example of a callback function which is registered via the onreadystatechange attribute.
function processChange() {
// 4 means the response has been returned and ready to be processed
if (obj.readyState == 4) {
// 200 means "OK"
if (obj.status == 200) {
// process whatever has been sent back here:
// anything else means a problem
} else {
alert("There was a problem in the returned data:n");
}
}
}
The Rest of the Pieces
Let’s use the functions we presented above in a little application to show how all the pieces fit together. We will
allow a user to enter a user name, then send that name to a server to check that it is not in use by anyone else.
First, our html:
<BODY> Enter your Username: < id="username" name="username" type="text" onblur="checkUserName(this.value,'')" > </BODY>
And here is the missing piece on the client side: The function called from the html which gets the whole process going.
function checkUserName(input, response) {
// if response is not empty, we have received data back from the server
if (response != '') {
// the value of response is returned from checkName.php: 1 means in use
if (response == '1') {
alert("username is in use");
} else {
// if response is empty, we need to send the username to the server
url = 'http://localhost/xml/checkName.php?q=' + input;
ProcessXML(url);
}
}
}
Note that the response value must actually be parsed from either text or XML returned from the server. The processChange() callback receives the returned data. Here is a little more detail on what happens in that function:
function processChange() {
// 4 means the response has been returned and ready to be processed
if (obj.readyState == 4) {
// 200 means "OK"
if (obj.status == 200) {
// process whatever has been sent back here:
// we need to parse the returned data (text or XML)
// and then call checkUserName again with response set
// to the appropriate value.
// anything else means a problem
} else {
alert("There was a problem in the returned data:n");
}
}
}
All we need to make it all work is a server-side script or servlet to catch the GET request, do the check on the user name, and return the response. Here is an example in PHP – everything is hard-coded which is not what it would really look like, but you get the idea.
<?php header('Content-Type: text/xml');
function checkName($q) {
if (isset($q)){
switch(strtolower($q)) {
case 'maggie' :
return '1';
break;
...
default:
return '0';
}
} else {
return '0';
}
}
?>
{smartads}
Google and AJAX
AJAX has gained popularity over the past few years due in part to Google’s use of the technology in Gmail, Google Maps, and other web-based applications. In addition, Google has released a set of APIs for webmasters, bloggers, or anyone with a website to include search on their sites.
The interesting thing about this search capability is that users don’t have to leave the page to do a search, as results are loaded right below the search box using AJAX. Search results are sorted into 4 different categories: local, web, video, and blogs, and can be displayed in a list or with tabs. In addition, users can use the copy button on results to add them to other content (such as blog post comments).
Google has a set of usage samples and documentation for learning how to use the Search API. If you look at their “hello world” application, you will see that a .css file is linked in, as well as a javascript library. The functions in this library use AJAX to send queries to Google’s servers and to return results. CSS and DHTML are used to update the page with the search results.
We have developed a tutorial based on the AJAX Search API materials provided by Google. This tutorial will not only help you to build more interesting websites, it will also help you understand important concepts in API- and event-based programming.
This article was prepared by the Google Code for Educators team, and is reproduced here under a Creative Commons Attribution 2.5 License.
Written by: Scott Frangos
This entry was posted on Sunday, January 6th, 2008 at 8:25 am and is filed under AJAX Help, Web Help. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
January 15th, 2008 at 9:01 pm
[...] AJAX Tutorial: Just what is AJAX all about? [...]
March 11th, 2008 at 3:44 am
nice., if u give more simple examples that will useful for beginners like me.
June 8th, 2008 at 1:18 am
good article, too high level for a beginnner like me :-( trying to learn programming from your tutorial.
October 11th, 2008 at 2:18 am
i m very new to ajax.
and even i dont know is for ajax your tutorial help a lot on the matter
November 4th, 2008 at 12:47 am
hi,
This article is very good.