www.javacertificate.net
   

Importance of Ajax in Web Application

  
Author : Srinivas R Pawar

  

Table of Contents

Introduction
What is Ajax?
Why Ajax is widely used in Web Applications?
  
   

Introduction


Web applications are fun to build. They are like the funky airplanes of Web sites. Web applications allow the designer and developer to get together and solve a problem for their customers that the customers might not have even know they had. But most Web applications are slow and tedious. Even the fastest of them has lots of free time for your customers to go get a snack (worst of all) head off to a faster Web site. It's that dreaded hourglass! You click a process button and the hourglass appears as the Web application consults the server and the server thinks about what it's going to send back to you.

What is AJAX

The name AJAX is short for Asynchronous JavaScript and XML. It uses the JavaScript XMLHttpRequest function to create a tunnel from the client's browser to the server and transmit information back and forth without having to refresh the page. The data travels in XML format because it transmits complex data types over clear text.

AJAX uses XHTML for the data presentation of the view layer, DOM, short for Document Object Model, which dynamically manipulates the presentation, XML for data exchange, and XMLHttpRequest as the exchange engine that ties everything together.

Because of these requirements, AJAX works on I.E. 5.0+, Mozilla 1.0+, Firefox 1.0+, Netscape 7.0+, and Apple added it to Safari 1.2+.

Traditional HTML sends a request to the server, which processes it and either returns a static HTML page or dispatches the request to some scripting language such as ColdFusion, which creates and returns an HTML page for the browser to render. When this method has to retrieve new data from the server it has to repost and reload another HTML file. In many cases perhaps only a small portion of the returned HTML code varies and the shell itself remains the same resulting in huge overhead because the data has to be downloaded every time.

Some classic examples of applications that would benefit from AJAX are searching for information and displaying it back in a table, related select dropdowns, or checking if a user exists before submitting an entire form.

As we can see, AJAX offers many advantages over traditional HTML applications, but we shouldn't overestimate it. Because the data is JavaScript-driven, one of the main drawbacks is that search engines won't index any of the dynamically generated content. It's definitely not SEO-friendly.

People familiar with MVC will have a better grasp of the concept. Though details of MVC are outside of the scope of this article, the three defined components are Model, View, and Controller. The controller mediates between the data model and the view. It responds to events, which are usually actions by users, and changes the view or model as appropriate. The view consists of the HTML. JavaScript reacts to events triggered by the user and alters the existing rendered content with DOM. ColdFusion will be our model layer and can consist of one or more files.

Building an AJAX platform or engine from scratch can be a difficult and lengthy procedure. There are many AJAX engines available for download and you're welcome to use any of them. The only difference between implementations will be the data encoding, transmission, and decoding methods. The views and models of the MVC will be the same. My examples will be based on CFAJAX, a community-driven Open Source project. One of the problems with CFAJAX is its poor documentation. There is no manual or even a complete FAQ. So I will explain how to set it up step-by-step and work around its downside.

To use AJAX you'll need to really know JavaScript and DOM. But by the end of this article you'll be able to set up AJAX, a ColdFusion model, make basic calls, and exchange simple data. As the applications grow and become more complex, the AJAX engine will remain the same, and the CF model will have more functions, but your JavaScript will have to manipulate more and more objects and that's where it's really at.

Ajax is a way of developing Web applications that combines:
  • XHTML and CSS standards based presentation
  • Interaction with the page through the DOM
  • Data interchange with XML and XSLT
  • Asynchronous data retrieval with XMLHttpRequest
  • JavaScript to tie it all together
In the traditional Web application, the interaction between the customer and the server goes like this:
  • In standard Web applications, Customer accesses Web application
  • the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the result back.
  • Server processes request and sends data to the browser while the customer waits
  • Customer clicks on a link or interacts with the application
  • Server processes request and sends data back to the browser while the customer waits
  • etc....
There is a lot of customer waiting.

Why Ajax is widely used in Web Applications

  • They can use a standard web browser, such as Firefox, Internet Explorer or Safari, as their only user interface.
  • They don't force the user to wait for the web server every time the user clicks a button. This is what "asynchronous" means. For instance, gmail fetches new email messages in the background ("asynchronously") without forcing the user to wait. This makes an AJAX application respond much more like a "real" application on the user's computer, such as Microsoft Outlook.
  • The Ajax engine works within the Web browser (through JavaScript and the DOM) to render the Web application and handle any requests that the customer might have of the Web server. The beauty of it is that because the Ajax engine is handling the requests, it can hold most information in the engine itself, while allowing the interaction with the application and the customer to happen as asynchronously and independently of any interaction with the server.
  • They use standard JavaScript features (including the unofficial XMLHTTPRequest standard, pioneered by Microsoft and adopted by Firefox and other browsers) to fetch data in the background and display different email messages or other data "on the fly" when the user clicks on appropriate parts of the interface.
  • Usually they manipulate data in XML format. This allows AJAX applications to interact easily with server-side code written in a variety of languages, such as PHP, Perl/CGI, Python and ASP.NET. Using XML isn't absolutely necessary, and in fact many "AJAX" applications don't -- they use the XMLHTTPRequest object to send and receive data "on the fly," but they don't actually bother packaging that data as XML.
  • with Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.
  
Your Ad Here  
Logo Home | Interview Questions | Submit a question |Sun Certification | IBM Certification |Articles |Feedback | Privacy policy |About Us|
 
All rights reserved.  Terms and Conditions