Home arrow Ruby-on-Rails arrow Page 2 - Ruby-on-Rails and AJAX
RUBY-ON-RAILS

Ruby-on-Rails and AJAX


Java and Flash offer real alternatives for those trying to build web applications that function more like desktop applications. However, they have their shortcomings. AJAX overcomes these shortcomings -- especially if you use Ruby on Rails.

Author Info:
By: A.P.Rajshekhar
Rating: 5 stars5 stars5 stars5 stars5 stars / 31
March 27, 2007
TABLE OF CONTENTS:
  1. · Ruby-on-Rails and AJAX
  2. · AJAX: an Overview
  3. · Implementing AJAX
  4. · Ruby-on-Rails and AJAX

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
RUBY-ON-RAILS ARTICLES

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials