Ajax (web technology)

This article is currently being developed as part of an Eduzendium student project. The project's homepage is at CZ:CIS 700 Special Topics 2008. One of the goals of the course is to provide students with insider experience in collaborative educational projects, and so you are warmly invited to join in here, or to leave comments on the discussion page. However, please refrain from removing this notice. Besides, many other Eduzendium articles welcome your collaboration!

Asynchronous JavaScript and XML is a web technology that allows a web page author to load external content into the browser and place it into the Document Object Model. The term AJAX (often now written as Ajax) was coined by Jesse James Garrett in an article called "Ajax: A New Approach to Web Applications", and serves as something of a buzzword for best practices in developing web applications, with clear separation of concerns, progressive enhancement, graceful degradation and adherence to Web standards. The technical backing for Ajax is the use of the XMLHttpRequest object to perform the requests in the background (as well as equivalent technologies in older browsers including the XMLHTTP ActiveX object, and piggybacking on Flash and frames/iframes).

Description

Ajax is an approach or pattern to web development that uses client-side scripting to exchange data with a web server. This approach enables dynamic updation of pages without causing a full page refresh to occur. This makes the interaction between the user and the application uninterrupted, continuous and fluid. AJAX is not exactly a new programming language, but a new way to implement existing standards. Some consider this approach to be a technology rather than a pattern.

It is essentially more than a single technology. It is a combination of various existing, related technologies which combine together in new, creative and more powerful ways.

It has the aspects of:

• XHTML, CSS for standards-based presentation.
• XML and XSLT for data interchange and manipulation.
• XMLHttpRequest for asynchronous data retrieval.
• Document Object Model (DOM) for dynamic display and interaction.
• JavaScript for binding everything together.

The premise of AJAX is to allow light weight calls to a web server and update the web page currently displayed without re-rendering the entire page, but only the affected portion(s).An AJAX web application takes the normal flow of communication and adds a new type of request.Even though the server perceives this as a normal page request the Web browser knows its not.This request may not require a page reload and also may not be directly initiated by the user.These requests frequently will be quite small even though they don't have to be.AJAX web applications will usually generate much more traffic and might pose some challenges for the Web servers.
The primary technological breakthrough that enabled AJAX is XmlHttpRequest (XHR), or XMLHTTP ActiveX object(an equivalent mechanism from Microsoft) in addition to JavaScript (older browsers may mimic AJAX's behavior with another technique using JavaScript and FRAMES, known as Remote Scripting). XHR is a command that allows an application to request data using a script independently of when the user calls for a page refresh. Once the data is fetched, a JavaScript procedure can parse the data and update only the necessary part of the page that requires an update.
There are many libraries that help in the development of AJAX enabled pages. For example, the Yahoo! UI Library, the Google Web Toolkit, or DoJo Toolkit, the ASP.NET AJAX Control toolkit. But in the end it all ultimately comes from XHR.
AJAX has become so popular that is has forced some browsers to implement it natively, without use of COMs such as ActiveX and creating a standard built in object.
AJAX is used to create better, faster, and more user-friendly web applications. Some even say that AJAX applications compete with desktop applications.

Components

AJAX may include the use of a range of web technologies such as JavaScript, XML(Extensible Markup Language), DOM(Document Object Model) , CSS(Cascading Style Sheets)This in no way implies that they are required.

The following are the main pillars/components of AJAX: -

• JavaScript—A scripting language that is commonly hosted in a browser to add interactivity to HTML pages. Loosely resembling Java programming language in syntax, JavaScript is one of the more popular scripting language on the Web and is supported by all major browsers. Ajax applications are usually built in JavaScript.
• Document Object Model (DOM) —Defines the structure of a web page as a set of programmable objects that can be accessed through JavaScript. In Ajax programming, the DOM is leveraged to effectively redraw portions of the page.
• Cascading Style Sheets (CSS)—Provides a way to define the visual appearance of elements on a web page. CSS is used in Ajax applications to modify the exterior of the user interface interactively.
• XMLHttpRequest—Allows a client-side script to perform an HTTP request. Ajax applications use the XMLHttpRequest object to perform asynchronous requests to the server as opposed to performing a full-page refresh or postback.

An odd fact is that none of the technologies mentioned above are mandatory to create an AJAX page or at least an AJAX like functionality. For instance, one could use an inline frame that contains a document that uses META Refresh to poll and update content on a portion of the inline frame's parent element.The "X" in AJAX is the data encoding used.XML is just one of the formats that might be used for transferring data.In many cases JSON(JavaScript Object Notation) is often an easier and better choice.Raw HTML or plain text might be used depending on the situation.Despite its name, AJAX does not have to be asynchronous, and sometimes it is erroneously applied to be a simple function in a JavaScript library.

Benefits

AJAX has come a long way since the time it was introduced. It has become so popular because of the benefits it has over the traditional page wise style of website creation. Some of its major benefits are:

• AJAX helps in improving user interactivity with the application interface.
• AJAX can buffer data before the user actually needs it. This helps in increasing the overall speed of the web application and reduces wait time for the user.
• Helps in reducing bandwidth requirements for an application as only the data that is needed is requested and transferred – refreshing the entire page is not necessary.
• AJAX helps in executing queries that take a long time to run. Instead of waiting for the results after clicking the submit button, AJAX can make the data request in the background, while the user can still continually interact with the page.
  
• Dynamic data filtering works well with AJAX. An example of the same is the Cascading dropdown control of the ASP.NET AJAX control toolkit.
• AJAX is really good for form submissions. Feedback can be given to a user as the form is filled. There is no need to wait for the form to be submitted. For example, Hints can be given to a user while he is filling a form.
• There are many AJAX frameworks available to developers to choose from.

Drawbacks

In addition to the benefits, AJAX has some drawbacks as well:

• The foremost drawback of AJAX is that the browser's "back" button (or equivalent scripting command) does not behave as expected with a traditional page-driven application. Pressing the back button takes the user to the previous page (as AJAX application run on a single page) —which is completely outside of the given application.
• A similar problem exists with bookmarks. When a user tries to bookmark an AJAX page, only the address of the application is bookmarked; the state of the given application is not bookmarked.
• Last but not the least, if AJAX is not implemented properly – it can degrade the user performance instead of improving it.

AJAX Applications on the Web

The popularity of AJAX has become enormous since the time it was introduced. This is clear by the number of AJAX based we applications that have crawled on to the World Wide Web. Some applications that use Ajax include:

• Google is using the AJAX approach to develop many of its applications including Gmail, Orkut, Google maps, Google suggest, Google Groups.
• Many features of Flickr depend on AJAX.
• Amazon’s search engine A9.com applies similar techniques.

Gmail was one the first mainstream applications to use AJAX(even though the term hadn't yet been coined).The many features of Gmail that make use of AJAX include:

• Search of messages without page reload
• Read of messages without page reload
• Spellchecker
• Tagging of messages without reload
• Ability to check for new messages on a regular basis
• Automatic saving of drafts
• Searching of Inbox without reloading page

These projects demonstrate that AJAX is practical for real-world applications, in addition to being technically sound. Also, Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.
After witnessing the success of many AJAX based applications, it can be said that AJAX is not a technology that works only in the laboratory, it has a lot more to it.

References

• Fresh: nuts and bolts: What does AJAX mean for you? By, Daniel F. Zucker.
• ASP.NET AJAX in Action. By,Allessandro Gallo, David Barkol, Rama Krishna Vavilala.