AJAX - A New Technology for Web

Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability. The Ajax technique uses a combination of XHTML (or HTML) and CSS, for marking up and styling information. The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented. The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added tags may be used. XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text, JSON and even EBML. These files may be created dynamically by some form of server-side scripting. Like DHTML, LAMP and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together.

Ajax is a new meme for an old concept - but what is it and how has it changed since being defined? AJAX is not a new concept or even a single technology. It only gives a name to techniques that have been in use on the web for many years - techniques that eBusiness Applications is proud to have been developing with since 1998. Traditional Web Components In traditional web applications, interactions with the server require time-consuming page reloads. A user completes a web-form, clicks submit, waits for the entire page and all related data to refresh, and then resumes work. Positive Aspects: Produces web applications that have higher levels of compatibility with legacy browsers and mobile systems. Easy to implement using native HTML controls Negative Aspects: Workflow is continually interrupted by page refreshes. Innefficient use of bandwidth. AJAX Based Web Components In the case of software components that use an AJAX model, requests are sent to the server only for the data that is needed, not the whole page. AJAX applications use the following technologies to facilitate this process: XML data sources XSLT to transform data into HTML quickly XMLHttpRequest to perform asynchronous requests for data JavaScript, HTML, and DHTML to display data on the web page Positive Aspects: Can produce smooth, uninterrupted user workflow. Saves bandwidth by only transmitting new information. Creates possibility of entirely new types of user interfaces not possible in traditional model. Doesn`t require 3rd party software like JAVA or Flash. Negative Aspects: Can be difficult to implement WAI and other accessibility guidelines, including compability with text-to-speech devices for the blind, and other assistive technologies. Poor compatibility with very old or obscure browsers, and many mobile devices.

Courtesy: Wikipedia

What is AJAX?

AJAX is a not a new technology used in web development. This statement is encouraged by the endless news articles showing sites made with AJAX. In fact AJAX is neither new, nor a technology. It can be seen as a mix of several popular technologies put together to build a friendlier web.

The name itself is an acronym for Asynchronous JAvaScript and XML, which already contains two technologies and a technique for loading information. The name was coined by Jesse James Garrett in this essay from the Adaptive Path website.

In this mix, XML is used to store and move information between the client and server, HTML and CSS to format the output and JavaScript to bind all of these elements together in a dynamic manner.

The asynchronous part comes from the fact that when a change has to be made to the current page (the user clicks on a link, or submits some information), only the part to change is transferred from the server, and not the entire page.

Besides these, AJAX is about much more:

• The way information is displayed in a browser - using HTML/XHTML and CSS. To present information to the client, you still need to use the language that browsers understand: HTML for content and CSS for layout and formatting.
• In the age of dynamic websites, displaying content is not enough. You have to first retrieve it from a dynamic data source, and process it for final output. This is where XML and XSLT come into play.Tip: Not familiar with XML and XSLT? Read more here!
• Getting the information from the server and in the user's browser is the next step. The XMLHttpRequest JavaScript object is used for this part. This JavaScript object will be covered in detail later on this article.
• Once the information is displayed you need to modify it dynamically. For this you will use the Document Object Model (or DOM, for short). To provide dynamics to a static HTML page, DOM manipulation is used to alter the properties of already created page elements. It is done through JavaScript and allows (for example) a div element to become visible, or a button to gray-out when a certain selection has been made.Tip: To learn more about the Document Object Model check out this article from W3 Consortium.
• The glue that holds all these elements together is JavaScript. This allows retrieving dynamic information, displaying and modifying the page elements. JavaScript is a lightweight programming language used to perform various tasks on the web client.

The notion AJAX has come to define a development framework which aims to improve web page usability.

As you can see from the list above, none of the technologies used within AJAX are new. What is new is the way these technologies are used together to create new types of web applications that are much more responsive and intuitive than the existing ones. To illustrate this, just have a look at Gmail and Google Maps. The user interfaces are quick in providing the user with the desired information, while performing the minimum of page reloads possible.

This new approach to user interaction and application responsiveness is part of a wider technology trend, aimed at making the Internet more friendly and faster.

AJAX - Overtaking Desktop Applications

The domain where desktop applications beat web applications hands-down is user interaction. In desktop applications, you do not have to wait and stare at a blank screen (most of the time) until an action completes. The user interface is integrated with the actual application and allows instantaneous response. In classic web applications, when some information is submitted or requested you have to wait for an entire new page to load.

The key word that might just change all of that and bring desktop response times to the web is AJAX. This is THE buzz word on the Internet nowadays, appearing everywhere.

Some voices say it's a good thing that will revolutionize the web, while others argue that it is already a dead technology that will never yield anything useful. To truly understand what AJAX is all about, you need to spend some time and browse through a hand-full of articles.

Without covering in detail every little aspect of AJAX, this article will try to shed some light on what AJAX really is, where you should use it and where you shouldn't. No special prerequisite knowledge is required in order to follow this article, but some notions of HTML, CSS and JavaScript will come in handy.