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!

AJAX - an acronym for Asynchronous JavaScript And XML - is an emerging web technology that enhances the end users' web browsing experience by streamlining background web content request, as opposed to generating and serving up new pages for every change or update to the web page.

In the article that coined the "Ajax" term, J.J. Garrett describes the technology as

"An intermediary...between the user and the server."

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 IFrame that contains a document which uses META Refresh to poll and update content on a portion of the IFrame'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 (WWW). Some of the famous web applications that are based on AJAX are: -

• Applications by Google : Google is using the AJAX approach to develop many of its applications. All of the major products introduced by Google over the last few years – Gmail, Orkut, Google maps, Google suggest, Google Groups – are AJAX applications.
• Many features of Flicker depend on AJAX
• Amazon’s search engine A9.com applies similar techniques.

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.
By seeing these applications, it can be said that AJAX is not a technology that works only in the laboratory, it has a lot more to it.

Examples of AJAX Frameworks

• Microsoft .NET (Visual Studio)
• Google Web Toolkit
• Ruby on Rails (ROR)
• Echo

References

• Fresh: nuts and bolts: What does AJAX mean for you? By, Daniel F. Zucker.
• Ajax: A New Approach to Web Applications. By, Jesse James Garrett.
• ASP.NET AJAX in Action. By,Allessandro Gallo, David Barkol, Rama Krishna Vavilala.