AJAX – Combining Technologies to Increase Website Interactivity

AJAX incorporates several technologies to work. These are XHTML and CSS for a standards-based presentation; Document Object Model for dynamic display and interaction; XML and XSLT for data interchange and manipulation; XMLHttpRequest for asynchronous data retrieval; and JavaScript to bind everything together.

Since AJAX allows for asynchronous action, loading of new small amounts of data does not interfere with normal page loading. AJAX allows for a more responsive web experience as it allows your web page to exchange small amounts of data with the server as you view the page.

With AJAX, your actions send a JavaScript request which trigger an action – usually a data retrieval request – which is answered by the web page in the form of a XML response. The web page changes accordingly; without having to reload the entire page.

In a classic web application model, user actions trigger an HTTP request back to the web server. The server processes the request and answers the request by loading an appropriate HTML page back to the user.

With AJAX, you don’t have to wait for your server to reload the page according to your requests. AJAX allows the page to process your request and make small changes accordingly without having to reload an entire page. AJAX cuts down on waiting time and makes the web experience more dynamic.

When one loads a webpage that utilizes AJAX, the browser also loads an AJAX engine which renders the interface that the user sees and communicates with the server at the same time. The user can interact with the application asynchronously; every action you make generates a JavaScript request, which triggers a response from the AJAX engine.

Since AJAX is capable of asynchronous action, the user’s interaction with the web page does not stall. You are not left staring at a blank browser window while the server processes you request.

The asynchronous element of AJAX is provided by XMLHttpRequest. This technology allows browsers to make data requests without having to reload the page. This eliminates the need for page refreshing.

Web pages are usually loosely coupled. The data they display are not bound to data sources and must first be set out in proper order in a HTML format before they can be presented in a browser window. This means that, in the traditional format, a web page needs to be re-loaded every time you need to view different data sets. With XMLHttpRequest a programmer can by-pass this requirement.

AJAX web pages load quickly since the payload coming down is smaller in size and the rest of the layout does not have to be redrawn when you request a page update. As such the bandwidth usage and requirements for a page utilizing AJAX are minimized.

Another benefit of AJAX is that the use of this platform means that programmers have to clearly separate the methods and formats used for the aspects of information delivery.

Programmers using AJAX can adopt or adapt whatever techniques work for them but the must adopt separation of raw data or content to be delivered; format or structure of the webpage; style elements of the webpage; and functionality of the webpage.

As AJAX is a new application, it is still evolving and as such is vulnerable to some glitches, usually with reference to its interactions with some web applications.

An AJAX created page does not register in a web browser’s history. As such, triggering the back function might not bring back the desired result. Programmers have tried to use invisible IFRAMEs to invoke changes that populate the history used by a browser’s back button, but not every web page has these yet.

It is also difficult to bookmark a page using AJAX. However, a solution to this would be the use of a URL fragment identifier. Many browsers allow JavaScript to update the fragment identifier of a URL dynamically and as such the user changes made to a page using an AJAX application can be maintained.

If you want to use an AJAX application in your website, you have to take into consideration network latency. Network latency is the interval between the user’s request and the server’s response. Some factors can increase the network latency of a webpage and cause delays in the interface of the web application. If the user is unaware of AJAX properties it may result in them assuming that there is something wrong with the page.

Also, when a web page is rendered or changed by a request, there is a brief moment of re-adjustment when the content changes. This too can cause confusion for the viewer. The use of visual clues or warnings to make the user aware of the background activity inherent to an AJAX application is recommended.

While AJAX relies on JavaScript for it’s dynamic interactions; JavaScript can cause its share of problems. JavaScript can be implemented differently by different browsers and as such there may be compatibility issues. If the browser being used by the user is incompatible to JavaScript portions of the website can be distorted or just rendered unreadable.

Search engines as a rule do not execute the JavaScript code needed for AJAX functionality. Websites that use AJAX to load data must provide equivalent Sitemaps data at a public, linked URL that search engines can read.

AJAX can also pose a problem with web analytic systems. Analytics systems which allow for the tracking of events other than a simple page view, such as the click of a button or link, are the ones most likely to be able to accommodate a site which heavily utilizes Ajax.