Understanding AJAX
 
Published: 06 Aug 2007
Abstract
In this article Rajdeep provides a brief overview of Asynchronous JavaScript and XML (AJAX), its features, benefits and applicability in web application development.
by Rajdeep Mukherjee
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 40421/ 61

Introduction

AJAX promises to be the technology of choice for building fast and responsive web applications. AJAX was primarily designed and developed with the intent of addressing the challenges faced for developing high performance web applications. Although Ajax is independent of the technology with which it is implemented, it can be implemented for web applications using Java, PHP or Microsoft .NET.

Why Ajax?

Web application developers used to face immense challenges on developing a fast and responsive User Interface. These applications generally used to provide slow response time and culminate in a not-so-acceptable piece of work. AJAX was fundamentally designed and developed with the objective of providing a fast and responsive user interface and in turn addressed these challenges. The basic objective of AJAX is to make more responsive web pages by exchanging minimal data with the backend server so that the web page as a whole need not be reloaded every time the user requests a change.

An overview of AJAX

AJAX stands for "Asynchronous JavaScript and XML."  It is a technology that facilitates the development of responsive web applications. AJAX function calls are made of Java Script, the popular client end programming language. The data retrieved through AJAX is formatted using XML. The asynchronous behavior of AJAX goes with the fact that loading does not get in the way of normal page loading.

AJAX is a "cross-platform" technology and can be used across various operating systems, computer architectures and different web browsers as it is based on XML and JavaScript that are open standards. It also supports open source implementations of other technologies. AJAX was used to implant great interactive features in Apple’s website.

AJAX is a technique for developing faster, better and more interactive web applications. In AJAX, you can have JavaScript communicate directly with the server, using the JavaScript "XMLHttpRequest" object. Using this object, the JavaScript can exchange data with a web server without reloading the pages. AJAX uses HTTP requests between the web server and the browser, permitting web pages to request small bits of information from the server against whole pages.

History of AJAX

The transition of technology with time, culminating into the evolution of AJAX can be discussed as follows.

During the initial days of browser innovation, Netscape added a feature known as "LiveScript" that permitted the software developers to embed small scripts in web pages so that they can continue doing things even after these are downloaded.

LiveScript became JavaScript, a more powerful scripting tool. This again led to a new technology called as Dynamic HTML (DHTML).  DHTML allowed making things soar around the screen and get changed in response to user inputs. DHTML implementations did not have much weight and was cumbersome too.

Netscape presented another new technique called Dynamic XML just before the time when web application development almost died out. Within this period Microsoft had made available a function called "XMLHttpRequest" to Internet Explorer version 5. This was followed by Mozilla and this function stayed unused for a long time awaiting the development world to take its best advantage and usability. 

XMLHttpRequest permitted the JavaScript embedded within the web pages to fetch more data. This was something new as prior to this, getting more data would require another web page to be sent. The JavaScript within a web page was unable to talk to the external world. This has been changed by XMLHttpRequest as it is permitted to fetch more data from server as and when required.

This new technique was named AJAX (acronym for “Asynchronous JavaScript and XML”) by Jesse James Garrett of “Adaptive Path” during February 2005. The technique became popular within a very short time. JavaScript toolkit became more effective in making this development easier. And thereafter, AJAX became a buzzword in the web application development.

The AJAX Technology Components

AJAX is not a technology by itself but is a combination of a group of technologies (similar to DHTML, SPA, etc). The nucleus of AJAX is the XMLHttpRequest object that enables different web browsers to make dynamic and asynchronous data requests without reloading the page. AJAX is comprised of the following:

·         HTML or XHTML, and CSS - for information on style and mark-up

·         XMLHttpRequest object – Used to interchange data with the web server in an asynchronous mode; in some cases and for some AJAX frameworks, an IFrame object is used instead of XMLHttpRequest object for exchanging data with the web server.

·         XML is many times used for transferring data between the server and the client. Other formats will also work (for example: JSON, plain text, pre-formatted HTML).

·         The DOM is being accessed by client side scripting language like JavaScript to display dynamically and interact with the information being presented.

Features of AJAX

AJAX provides a lot of powerful features.

·         Minimizing round trips to the web server

·         Web page updates in real time

·         Language independence

·         Rendering of web pages in a faster pace

·         Reduced consumption of server resources

In the AJAX based web application development, the server receives the requests only for the data that is required. The entire web page is not submitted to the web server at one go.

AJAX makes use of XML, XSLT, XMLHttpRequest, JavaScript, HTML, and DHTML technologies.

Available ASP.NET AJAX Frameworks

Benefits and Drawbacks of Ajax

This section outlines the benefits and drawbacks of AJAX.

Benefits

Low usage of bandwidth – AJAX facilitates faster web page renderings by reducing the web server hits. AJAX pages can load much faster when the payload coming down is lesser in size. This is achieved by generating the HTML locally within the browser and also the JavaScript calls and actual data is brought down. A large result set having data from multiple pages can be a good example in this regard. AJAX allows loading the HTML content of the page (with table structures and its tags) locally in the web browser. Additionally, some web applications load stubs of event handlers and subsequently “load the functions on the fly.” All of these help in managing the optimal consumption of bandwidth for applications having complex functions and logic.

Usage of XMLHttpRequest – It is able to make requests to pages not set up for AJAX, can set or get all HTTP headers, can make HTTP requests using any type (GET, POST, PROPFIND, and so on), supports full control over POST requests and allows for any type of data encoding.

Drawbacks

Response Time – AJAX based development should take care of the response time between client requests and server response as it normally gets delayed due to the fact that smart preloading of data and proper handling of XMLHttpRequest object may cause delay in lining up with the web application.

Back button in the web browser does not work – In AJAX based development, the pages that are created dynamically do not get stored into the browser history and the “Back” button in the user’s browser will not work in this case.

JavaScript Dependency – AJAX based development depends on JavaScript to a great extent. JavaScript is implemented differently in different web browsers and proper caution needs to be taken to ensure that the web pages behave the same in different browsers.

Suggested Readings

Conclusion

AJAX promises to be the technology of choice for building fast and responsive web applications. You can use Ajax in ASP.NET and even in Java since it is language and platform independent. AJAX has introduced significant changes in the current day’s web application development processes and methodologies. We expect more and more enhancements on this technology in the near future that would open various avenues and make web programming even more flexible and effective.



User Comments

Title: Great   
Name: Debdutta Chakraborty
Date: 2007-08-08 8:55:17 AM
Comment:
This is a nice and wonderful article for those who are new in AJAX technology. Great references with short yet enough description gives the core idea on this technology. I liked the suggested reading section.

Thanks
Title: wonderful   
Name: Akram
Date: 2007-08-08 4:35:08 AM
Comment:
Its very useful information for those who making dynamic web applicaton .






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 10:55:18 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search