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 (AJAX) is a Javascript programming technique that allows Javascript running in a local web browser to fetch content from a web server in the background. The Javascript then places the newly fetched information into the web page without reloading the entire page. So that Javascript can successfully update the web page in the browser, the HTML page is usually expected to be XHTML-compliant; use of XHTML instead of the more relaxed HTML means that Javascript can use the standardized Document Object Model (XHTML), or DOM, to correctly identify the sections of the web page to be updated. Recent progress in Javascript standards, and browser support of those standards, has made AJAX techniques more and more common. 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".

As an approach, AJAX-related technologies include at least XHTML, CSS, and JavaScript and the Document Object Model (XHTML). The user interface improvement that an Ajax approach can bring is the reduction of the "refresh cycle" - pages do not need to be refreshed for each interaction, which enables designers to produce richer interfaces. The technical infrastructure for Ajax is the use of the XMLHttpRequest object to perform the requests in the background. An "AJAX" call to a web server is an asyncronous (non-blocking) call; thus, a "callback" function must be specified which will execute when the web server returns the answer. AJAX calls transfer information in a variety of so-called "wire formats", such as XML, JSON, SOAP, or some proprietary plain text format. Although the AJAX acronym includes the word XML, it is important to note that AJAX calls do not necessarily use any XML at all, if the wire format is not XML but rather one of the other options.

To simplify the development of web sites and applications using the Ajax approach, many turn to a variety of JavaScript libraries, like jQuery, the Yahoo! UI Library, Prototype and Dojo. Some back-end web frameworks also come with built-in techniques to make developing Ajax components easier - for instance, Ruby on Rails lets you create "partials" which can be called via XMLHttpRequest.

Browsers implement Ajax in different ways. Most browsers do this by having a native XMLHttpRequest object, although one can simulate this object in older browsers using the XMLHTTP ActiveX object, or by using Flash or frames. The World Wide Web Consortium and the WHAT WG have been pushing for better standardization of XMLHttpRequest as part of the push towards HTML 5.

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 technologies are used in the Ajax approach:

• 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.

None of the above mentioned technologies are mandatory for creating an AJAX page or at least an AJAX like functionality. For instance, one could use an IFrame that contains a document that 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 web applications that have crawled on to the World Wide Web.

• 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

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

The web applications described in this section demonstrate that AJAX is practical for real-world applications, in addition to being technically sound. Ajax applications can be any size - from the very simple, single-function Google Suggest; to the very complex and sophisticated Google Maps.

Implementation of AJAX

Ajax implementation using XMLHttpRequest

The XMLHttpRequest object provides the most complete option for making AJAX calls.It is not supported by all browsers.Older versions of Safari and Opera do not have XMLHttpRequest support.ActiveX must be enabled in IE 5 and 6.

The XMLHttpRequest class is a generic HTTP client for JavaScript,originally designed by Microsoft to allow Internet Explorer to load XML documents from JavaScript(in IE, XMLHttpRequest is an ActiveX object).The method allows for JavaScript to make GET and POST HTTP requests.Synchronous as well as asynchronous forms of communication are possible.Due to security restrictions HTTP(S) requests can only be made to the same domain as the currently loaded page.Although a limitation,it not only enhances security but also provides a simpler programming model.This lets JavaScript code implicitly trust any data it loads from XMLHttpRequest.

An object is declared using the new XMLHttpRequest() call.In IE an ActiveX object needs to be declared( new ActiveXObject("MSXML2.XMLHTTP.3.0")).

The main methods associated with this object include:

• open():Lets you set the type of request(GET/POST/PUT/PROPFIND),the URL,mode(Synchronous/Asynchronous).Optional parameters(Username/Password) for HTTP authentication can also be passed.

        open(type,isAsync,username,password)

• send():Lets you make the connection with the URL specified in open.For a synchronous request it will be a blocking call.Otherwise it will return immediately.For a POST request the payload is passed as a parameter(NULL for GET).

        send(payload)

Other methods like serRequestHeader,getResponseHeader,abort are also quite useful.Some methods are browser specific.

XMLHttpRequest also provides a number of properties like status,statusText,readyState etc.Mozilla provides event handlers like onerror,onprogress and onload.

An example JavaScript code which uses open to set up a synchronous GET request to index.html:

  var request=new XMLHttpRequest();       //Object Declaration
  request.open('GET','index.html',false); //False means it is not asynchronous
  request.send(null);                     //Payload is Null for GET
  if(request.status==401)                 
    alert('Access denied');
  else
    alert(request.responseText);          //The responseText is String type