Ajax: Making the Web Even More Interactive

Ajax (Asynchronous Javascript and XML) is a web programming technique that uses other web technologies, such as JavaScript and XML, to make web pages and web applications more interactive.

In order to fully understand and appreciate the concept and capabilities of Ajax, it is important to know how JavaScript works. JavaScript is an object-oriented scripting language that is primarily used in the form of client-side script. It is called a ‘client-side JavaScript’ because the code runs locally on the client’s web browser instead of on a remote server. Because it runs locally, it can respond quickly to the user input, making the web page or application more responsive. JavaScript can be used to write functions that are embedded in HTML pages, and these functions can interact with the Document Object Model (DOM) of the page. When the functions are called, certain content in the page can update without requiring the entire page to reload. Some basic examples of this are changing images or text on as the cursor moves over them, or for input validation of a web form to make sure the user input is acceptable before being submitted to the server.

However, as useful as Javascript is, it does not have the ability to exchange information between the web browser and the remote server. This is where AJAX is needed. AJAX allows the web browser to communicate with a remote server. You might be thinking that it has always been possible your web browser to communicate with the web server, so why do we need Ajax? Indeed, browsers can exchange data the web server, but only with an HTML form that can GET or POST information. After the response is sent back to the browser the entire page must reload in order to see the result of the user input. Reloading the entire page is inefficient and with a slow Internet connection, can be rather annoying. Ajax has the ability to send user-generated requests to a web server and update the results on the page without requiring the rest of the page to reload. With these powerful capabilities, Ajax has become a popular web technology. Google is known as the pioneer in Ajax development since it was the first to launch a large implementation of Ajax with its popular Gmail. Google Suggest and Google Maps are also made possible via Ajax.

Although Ajax stands for ‘asychronous JavaScript and XML’ neither language is required to create an Ajax request. This emphasizes the fact that Ajax is more of a concept, rather than a language. JavaScript is commonly used in Ajax forms, but XML is often replaced with JSON ( JavaScript object notation).

Below is an example of an Ajax request which interacts with a server side script (which in this case is a perl script). In turn, the server side script queries a database with the search term sent from the Ajax request and returns the results in a JSON object which is then parsed and print to the result of the search query.

function update_result(){
var species = $("species").value; //the value sent from the search field
var result_space = $("result_space"); //result_space is a div on the page
new Ajax.Request("/serverside_script.pl", {
parameters: {species: species}, //sent to the server side script
onSuccess: function(response){
var json = response.responseText; //results returned as JSON object
var result = eval("("+json+")"); //eval function parses string
var html = "";
for (var r in result){
html+=result[r]+"
";
}
if(json=="{}"){
html="No matches found.";
}
result_space.innerHTML=html;
}
});
}

While Ajax is very useful, there are several caveats. It is not entirely trivial to develop code that utilizes Ajax, especially when compared to traditional html forms. Luckily, there are several tutorials online that give a great introduction to Ajax and an overview of its syntax. However, purchasing a textbook on Ajax might be worthwhile, especially if you are not an experienced web developer. Another drawback, which is not really specific to Ajax, but to all dynamic web pages, is that using the browsers back button or bookmarking a pages does not work as expected. The solution to this is to give the page a unique URL identifier which allows the user to return to the page in a specific state.

Overall, Ajax is one of the most useful web technologies that exists today. It is used often and widely throughout the web in places that one may not even realize. Learning Ajax is beneficial to both novice and experienced web developers alike. Below are links to Ajax, JavaScript, and JSON tutorials and general information.

http://www.w3schools.com/ajax/default.asp
http://www.w3schools.com/js/default.asp
http://www.json.org/