Ruby-on-Rails and AJAX - AJAX: an Overview

(Page 2 of 4 )

By definition AJAX is "a technique that extends the traditional web application model to allow for in-page server requests." In other words, AJAX provides the functionality to make on the fly requests to the server and present the response data to the user by modifying a part of the page without refreshing the whole page. AJAX is not a single technology; rather, it's a combination of technologies. These technologies form the basic components of AJAX, which are:

1. JavaScript
2. XMLHttpRequest
3. XML

The second component is an object of JavaScript itself. However the first 'A' of AJAX comes from it. The reason for this is detailed below.

JavaScript is the "J" in AJAX. It is the JavaScript that parses the response from the server and makes appropriate changes to the current page. Using JavaScript, one can change a paragraph, replace a product image or change the complete look and feel of the page without the intervention of the server. This reduces the bandwidth and makes the web site look more responsive to the user.

XMLHttpRequest is an object of JavaScript that not only allows the user to create or construct HTTP calls from within the script but also process the response sent by the server. It is available as an ActiveX control in Internet Explorer and as a JavaScript object in other browsers. Though it is known as XMLHttpRequest, one can wrap any kind of HTTP communication using it.

The first 'A' in AJAX, which stands for "Asynchronous," comes at the "behest" of XMLHttpRequest. One of the abilities of XMLHttpRequest is to make a call to the web server in the background while the user continues to do his/her work on the UI. Whenever the response is received, the XMLHttpRequest accepts it and passes it over to the function that is registered to handle the response. Thus the request-response cycle is relieved off the paradigm of synchronous communication.

If one looks up the definition of XML on the net, the most common definition found is this: "XML (Extensible Markup Language) is a W3C initiative that allows information and services to be encoded with meaningful structure and semantics that computers and humans can understand and is great for information exchange, and can easily be extended to include user-specified and industry-specified tags." The extensibility and the ability to provide data in a structured format is the main reason for XML to be the preferred response data format sent by the server. This doesn't mean that the server can't send data in any other format. It can send data in any format and XMLHttpRequest can accept and process it. However, since XML is a standard that is both extensible and structured, it is preferred over every other.

The next obvious question is how these three components fit in the overall picture. Here is an example of AJAX at work. It checks the validity of the username.

var xmlHttp;
function createXmlHttpRequest()
{
   //check the type of browser and initialize XMLHttpRequest object
   if(window.ActiveXObject)
   {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest)
   {
     xmlHttp=new XMLHttpRequest();
     //alert("inside elseif..."+xmlHttp);
   }
}

//This method creates an instance of XMLHttpRequest and calls the server
//Then delegates the data processing to another function on receipt of data
function startRequest()
{
   createXmlHttpRequest();

   var u1=document.f1.user.value;
   xmlHttp.open("GET","validate.php?user="+u1,true)
   xmlHttp.onreadystatechange=handleStateChange;
   xmlHttp.send(null);
}

//Does the handling of data and presentation of data
function handleStateChange()
{
   if(xmlHttp.readyState==4)
   {
     if(xmlHttp.status==200)
     {
       document.getElementById("results").innerHTML= xmlHttp.responseText;
     }
     else
     {
       alert("Error loading pagen"+ xmlHttp.status +":"+ xmlHttp.statusText);
     }
   }
}

function resetDisplay()
{
   document.getElementById("results").innerHTML=" "

}

The logic here is very simple, yet the amount of boilerplate code required is pretty high and the complexity of JavaScript increases with the increase in complexity of the logic of data processing and presentation. And I have not shown the logic at server-side. This is the story with almost all of the technology except Ruby-on-Rails. How RoR is different from the others is the topic of the next section.

Next: Implementing AJAX >>
 

More Ruby-on-Rails Articles
More By A.P.Rajshekhar

Comments On: Ruby-on-Rails and AJAX

· AJAX and Ruby-on-Rails are the current hottest topics in web development. In this...    · Some updates to the syntax needed for RoR... instead of render_text, use the...   >>> Post your comment now!