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. Use of XHTML instead of the more relaxed HTML means that Javascript can use the standardized XHTML 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'd web pages more common. The term Ajax (also written as AJAX) was coined by Jesse James Garrett in an article called "Ajax: A New Approach to Web Applications".

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.

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.

Related standards

Ajax programming may require familiarity with a range of standards, including:

• 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 (XHTML) —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.

Although the Ajax acronym includes the word XML, it is important to note that Ajax calls do not necessarily use XML as the wire format (data encoding for the HTTP request and response). The wire format could just as easily be JSON(JavaScript Object Notation), HTML, or plain text, 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. An "Ajax" call to a web server is usually an asynchronous (non-blocking) call; thus, a callback function must be specified which will execute when the web server responds.

Except perhaps for Javascript,the above mentioned technologies are not mandatory for creating 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.

Critique

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

Applications of Ajax 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.
• Facebook has been using Ajax since a long time.
• Online documentation and presentation tools such as Google Docs, 280sildes.com, are a great application of Ajax on the web.

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.

Gmail

Gmail was one of the first mainstream applications to use Ajax(even though the term had not been coined by then).The many features of Gmail that make use of Ajax include:

• Searching emails without page reload
• Reading emails without page reload
• Spelling checker
• Starring/Tagging emails without page reload
• Ability to check for new emails on a regular basis
• Automatic saving of drafts

Facebook

Facebook Ajaxed their website in a number of ways. Then number of ajaxed features on facebook has increased rapidly since the time it was first implemented. Some features of facebook that include Ajax are as follows: -

• Friends can be addes/confirmed without page reload - this was one of the first features of facebook to be implemented in Ajax.
• Replying to messages without reloading the page.
• The newer feature of online chat and popup for new notifications is an application of Ajax.

Implementation Example 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