Asynchronous Javascript And XML AJAX Technology Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

In this chapter, there are some discussion about the beginning of Ajax that consist of the introduction to Ajax, the background of Ajax, and how does Ajax process in order to briefly explain what are Ajax in order to continue to the next chapter of the implementation of Ajax. The implementation of Ajax will discuss about how does Ajax being implement such as implementation in application and interface design. The following chapter will be the discussion of the pros and cons of the Ajax because every technology will have their own pros and cons so in the chapter 3, there are some pros and cons with the given examples in order to make it clearer.

Introduction to Ajax

Ajax also as known as Asynchronous JavaScript and XML is a technique used in client-side to developing an interactive Web application with a combination of several technologies. The first technology is including use of HTML or XHTML and CSS for presentation. Second technology is for dynamic display and interaction with the page through Document Object Model (DOM), while third technology is the use of XML and XSLT for the data interchange. Fourth technology is the usage of XMLHttpRequest object for asynchronous data retrieval and the last technology is the most important technology that is JavaScript that playing a role to link all these technologies together (Stamey and Richardson, 2006, pg282).

According to Fu et al. (2010,pg567) in year 2004, Ajax web application such Gmail and Google Suggest is become popular and its referred to Web 2.0 applications, since these web application are more interactive and the style of designing is more dynamic that are similar to desktop application.

Ajax Background

Before the implementation of Ajax, Web page is a purely server-side application, users interact with an html page, the http request will send to the server and then the server will update its state and send a response to the client with a new html page, server compute a new html page may take some time. Besides that, blank page will be displayed to the user while waiting for the server response, and this will cause the user unable to make any interaction with the web page and each time of the request are require the page to be refresh. Ajax page are dependent with the client-side JavaScript including the use of JavaScript and Ajax library components such as accordion, combo box, tab bar and etc Fu et al. (2010,pg567).

Process of Ajax

An example on how does the Ajax work in form submission is, after user fill up the form and then click on submit button, the browser will start running an event handling to collect all the data from the page. After that, it will send an asynchronous XmlHttpRequest (XHR) with a respond handler callback function that had specified. While waiting for the response, the browser does not display a blank page for refreshing purpose, and the page are still remain and user are still able to interact with the page. The page's state will be partially update after the response handler receives the server's response (Modelworks Software, 2005).

Another example from Modelworks Software (2005) is a poll in an Ajax page. User can vote either Cats or Dogs based on the Figure 1.3.1 and the result will displayed in a bar chart after click the vote button.

Figure 1.3.1

Figure 1.3.2 AJAX sequence diagram

The Figure 1.3.2 from Modelworks Software (2005) shows how the XMLHttpRequest is being used. The AJAX process starts with a DOM event. Then, client need to obtain an XMLHttpRequest object in step 1, and after user make selection of either Cats or Dogs, then click on Vote button in Figure 1.3.1. After get the XMLHttpRequest object in step 1, 'onreadystatechange' callback is functioning and calling the 'open' and 'send' method. By using the XMLHttpRequest object, any format of data can be send and receive yet it can be other than XML. JSON are recommended to use because it is a subset of the plain object notation in JavaScript that contains many features of XML. When sending the XMLHttpRequest to server, the application should give the user some visual indication that something has changed in order to avoid confusion. In this example, "Vote" button had changed to "Loading..." as shown in Figure 1.3.3.

Figure 1.3.3

In step 2, server need to have a handler to process the request and the handler can be a Common Gateway Interface (CGI) or other server-side script such as JSP, PHP and etc. These server-side scripts can be the handler to process the request, and in step 3, client-side needs to process the response from server. While waiting for the result, user are still enable to interact with the page. At the end of step 3, the page's state will partially update, and the poll result will displayed in Figure 1.3.4.

Figure 1.3.4


Application Design

In this chapter, we will discuss about how to build a good Ajax application. The example that is being used in this chapter for discussion is the checking on the username in a user registration.

Ajax Request

To design an Ajax application, first at all we need to define a JavaScript function in the Web page for event handling. The event handler function is used to send an asynchronous HTTP request using the XMLHttpRequest object. The XMLHttpRequest object created by the JavaScript is used to invoke with server-side program. In this example, username will be send to the server as request parameter (Lerner, 2006).

Secondly is to create a server-side program by using any language other than JavaScript. The Server-side program will receive the HTTP request with parameters from client-side and then will produces HTTP response in any Multipurpose Internet Mail Extensions (MIME) format, XML, plain text and JSON (JavaScript Object Notation). In this example, server-side program will use the username parameter and perform checking with the database to search whether the username is already existing or not. The result will return in XML (Lerner, 2006).

Lastly, a Callback JavaScript function that must be defines in the user's Web browser in order to handle the data response from server (Lerner, 2006).

Sending a POST Request

POST, is another type of request that are inserting the parameters into the request body. By using POST, there are no limitation on the parameter's length for both names and values, and the URL will be cleaner. By using other request such as GET request, the URL's total size will have limitation by a lot of browsers. POST are easier to implement and much more secure compared to GET request because the creation of POST request is much harder than the creation of a GET request.

The coding below shows that the parameters is being POST and pointing a program that will do the dynamic ouput generation. Besides that, for the third parameter, it is the setting of the query in background, which is asynchronously to be true value by informing XMLHttpRequest object.

function checkUsername() {

// Send the HTTP request"POST", "/cgi-bin/", true);

xhr.onreadystatechange = parseResponse;

var username = document.forms[0].username.value;

xhr.send("username=" + escape(username));


The Server Side

Besides client-side, server-side program is also playing an important role in Ajax application. This is because server-side is the program that could interact with database for data exchange in order to make reply to the client side. Besides that, server-side is a hidden program from user that will perform all the activities of checking, validate, accept, and reply request that are sent from client-side application (Lerner, 2006).


use strict;

use diagnostics;

use warnings;

use CGI;

use CGI::Carp;

# Define the usernames that are taken

# (Use a hash for lookup efficiency)

my %usernames = ('abc' => 1,

'def' => 1,

'ghi' => 1,

'jkl' => 1);

# ------------------------------------------------------------

my $query = new CGI;

print $query->header("text/plain");

# Get the POST data

my $postdata = $query->param("POSTDATA");

# Get the username

my ($name, $value) = split /=/, $postdata;

my $username = '';

if ($name eq 'username')


$username = $value;


# If this username is defined, say "yes"!

if (exists $usernames{$username})


print "yes";


# Otherwise, say "no"!



print "no";


The server-side program can be written in other programming language; the example in the Listing is a simple Common Gateway Interface CGI program that is written in Perl. Look at the POSTDATA parameter, this is the data received from the Ajax request. In this server-side program, if there is a request of username, this program will seeking for the matching among the keys of the %usernames hash, if it is matched, a 'yes' value will be return to the caller, while if it is not match, then 'no' value will be returned (Lerner, 2006).


Parsing the Response

When the response arrives from the server, the parseResponse function [Listing] will be called. The parseResponse function is called for every single changes of the readyState property of the XMLHttpRequest object. There are values from 0 to 4 for the readyState property which are '0=UNINITIALIZED, 1=LOADING, 2=LOADED, 3=INTERACTIVE, 4=COMPLETED'. The value of 4 in the readyState property mean that receiving the response from the server is completed and the response data is available through properties of the XMLHttpRequest object. The property value of readyState are required to have four times changes in order to reach the completion, which is from LOADING to COMPLETED, that the parseResponse function gets called for four times for each response. In order to ensure that the data is available in the XMLHttpRequest object, the property comparison of value '4' will be made to the xhr.readyState property in the function of parseResponse (Potturi, 2005) [Listing].

If the readyState of the XMLHttpRequest instance has a value of '4', then need to check its status property to make sure that a valid response was received. The status property holds the code of the HTTP status that is returned from the server. A value of 200 means that the data received in the request is OK. Work sharing for both client and server is the key for a good Ajax application. In this example, we used switch statement to seek at the different responses from server (Potturi, 2005) [Listing].

First at all, if the response is yes, then the submit button for the form will be disable and will display a warning message indicate that the username was taken. The submit button will re-enabled and the warning message will be removed when user change the username inside the text field. Besides that, if the response is no, which mean the username is available, then the submit button will enable and the warning message will be removed. Furthermore, if the response is empty, so this case will be ignoring, and finally, if the response is an unexpected data, an unexpected response alert will prompt. Look at the parseResponse function (Lerner, 2006) [Listing].

var xhr = getXMLHttpRequest();

function parseResponse() {

// Get variables ready

var response = "";

var new_username = document.forms[0].username.value;

var warning = document.getElementById("warning");

var submit_button = document.getElementById("submit-button");

// Wait for the HTTP response

if (xhr.readyState == 4) {

if (xhr.status == 200) {

response = xhr.responseText;

switch (response)


case "yes":


"Warning: username '" +

new_username +"' was taken!");

submit_button.disabled = true;


case "no":


submit_button.disabled = false;


case "":



alert("Unexpected response '" + response + "'");





alert("problem: xhr.status = " + xhr.status);




Listing post-ajax-register.html

Interface Design

Use of a combination of asynchronous JavaScript, the Document Object Model (DOM), CSS and XMLHttpRequest AJAX enables faster, more responsive Web applications. A Dynamic HTML-based Web application is a Web interface designers that can make fast, interactive, animated, and increased updates to a user interface without refreshing the entire Web page (Wroblewski, 2005).

Previous web applications used frames or iframe to have certain elements on a page updated. But with Ajax, any element defined with DOM can be highly dynamic, and data can be buffered from the background without user action. The data is readily available whenever the user needs it(Wroblewski, 2005).

Since Ajax allow all the elements within a Web page to be changed individually and quickly without affecting the rest of the page, not most of the Web user are get common with it. The Ajax-based updates are very fast user may not notice the changes of the page. Therefore, in order to grab an attention to user, some techniques can be use. Two common approaches to notify user the interface change are color change and animation (Wroblewski, 2005).

The use of color change just like when data on particular section is updated, that section is color is changed to indicate the data change. In order to getting the attention from user effectively, the color used must be contrast with the rest of interface. The motion of an animation is also attractive to user (Wroblewski, 2005).

The use of animation is to let user know that the server is process some response to their action. The animation can be a loading circle or bar and etc. Animation also can use to slow down the interface update to make sure user is notice it. This approach is great, but if user did not notice the change is made, user may assume no responsive is given (Wroblewski, 2005).


Advantages of Ajax

By using Ajax, there are many advantages and there are some of the major advantages. First at all Ajax is reducing the network latency problem and improve user interactivity with the application interface compared with traditional page-based Web design. Google Maps is an example where the refresh latency problem is solved (Zucker, 2007).

When user are using Google Maps application and search for a particular location, the maps will be displayed in a frame shown in Figure 3.1.1. Download-refresh paradigm is applied in previous map application, which are when user search for a particular location, a map image is displayed as one page, and the page is required to refresh when user pan or zoom the map image therefore user need to wait for the web page to acquire the data from server. But for the Ajax-enabled map application, Google Maps allow user to grab the map and drag it and the map frame will filled with data fluidly without refreshing the page shown in Figure 3.1.2.

The data is being buffered and lies outside the border of the map in frame before user need it so when user dragged the map, there is no refresh latency, and the pre-fetched data will be displayed in the frame. User interacts with Ajax page is more likely desktop application feels because there is no page refresh. User request a data and the data are carried asynchronously at a different time.

Figure 3.1.1 and Figure 3.1.2 is allocated on next page.

Figure 3.1.1 searched result of Sri Aman

Figure 3.1.2 image from Figure3.1.1 being zoom in.

Similar to Gmail, instead of pre-fetching data, Gmail is more concentrates on Ajax to furnish application interaction and there is not entire active display will required to refresh. In old type of email application, the page will be refreshed when a new email arrives, but with the implementation of Ajax, only the particular section needs to be refreshed. The design of Gmail is more like a desktop application, when a new emails arrives, the full page will not be refresh, the email will added automatically to the inbox so that user no need to press the refresh button to view the new email and this will improve user interactivity (Zucker, 2007).

Besides reducing the network latency problem and improve user interactivity, other advantages by using Ajax-style programming is less Bandwidth requirements. This is because only the requested data from user will be transferred and only the particular section will require being refreshed, while user are still can interact with the page. This will also lower the consumption of the server's resources (Zucker, 2007).

Besides that, dynamic data filtering could work will with Ajax. Example like T-shirt ordering application, when users select a particular size of a shirt, it will filter out the available colour for the selected size of the T-shirt and each selection do not require the page refresh (Zucker, 2007).

Lastly, Ajax also recommended using in form submissions. Each validation checking can be done before user submitted the form. For example, a member registration form, when user enter the password, the application will check whether the password is fulfil the application requirement or not and then hint to user when it does not fulfil the requirement (Zucker, 2007).

Disadvantages of Ajax

The major disadvantages of using Ajax in a web page are when user bookmarks a web page. Users are confused when open the bookmarked Ajax page, the page may start at first starting point of the Ajax page but not the page the user desired. The solution to overcome this problem is the scripts of creating a bookmark cam dynamically add a segment to the URL to keep the state information. So user can return to the page that they are desired (Zucker, 2007).

For example, in SHISEIDO web site, when user go through the further steps such as searching group of product based on the categories as shown in Figure 3.2.1, and book marked it. The next time when user is open the bookmark, the same location as Figure 3.2.1 is not being shown, while the page being shown is in Figure 3.2.2 due to the book marking does only store the URL address of the page user surf instead of storing both address and the location where user book marked it.

Figure 3.2.1

Figure 3.2.2

Besides that, another disadvantages when applying Ajax in a web page is when user press the back button on the browser, the browser may confuse the user, it will take user back to the previous page instead of the previous step within the application. Google maps have overcome this problem by using the script to insert the data into the browser history list, so when user presses the back button, the application is return to the previous step within the application (Zucker, 2007).

Besides, Ajax is dependency on JavaScript. Not all the browser can support JavaScript example like Ajax is not suitable for designing mobile application because mobile browser do not support JavaScript. Again, the implementation of JavaScript is different in various browsers, example like Google Chrome, Firefox, Internet Explorer and etc (Kanjilal, 2010).

With the implementation of Ajax, the length of the code will increase and this will be difficult to debug and may cause of the security threat (Kanjilal, 2010).


Consideration When Using Ajax

Linkage with Final Year Report

In my final year project I am doing a skin care sales system which consists of two applications, which are frontend and back-end applications. Both of the applications are using C# programming language to implement. Besides, these two applications are Web-based application.

The frontend system is an open public web application to the internet. Many users will attempt to use this application. So the design of the application must be attractive enough to attract the user. Therefore I use Ajax for the user interface designing. For example, a flashy menu bar used in frontend system. There is some animation when user moves the mouse hover on the menu.

Moreover, sort able table use in both of the application the purpose is I can sort the table without page refreshes. A flexible and extensible date picker is applied in date field, so that user can choose to select the date from the date picker or manually enter in to the text field and then Accordion will be use as side menu bar, when users select on the menu header, it will slide and the sub module will display in the panel for user to select. These Ajax components applied in both of the application in my final year project.

Besides, I used tooltip as a help tool in both of my applications as well, when mouse over a symbol like '?', some help information will display to the user inside a panel. Others Ajax component like grid, tab bar, Carousel and combo box may also used into my applications.

Back-end System

For my back-end system, Ajax is applied in sales, inventory and maintenance modules. The purpose it to make the application more like a desktop application, make it possible to less page refreshing. Beside that implement Ajax into my back-end system can increase the user interactivity and reduce the network latency by less of page refreshing.

Ajax applied in maintains inventory, member, staff and supplier module which is insert and update. The purpose is to validate the user input and hints to the user. For example, insert a new staff record. If user input invalid email address, it will give a hint to user how is the example of a valid email address without refreshing the page.

For the sales module, the page is not require to refresh when a new item it added into the order list, only the order list will be updated. If there is a page refreshing require for each new item added in the user may frustrated when using this application.

Frontend System

For my frontend system, Ajax is applied in member, supplier, reservation, online sales and payment modules.

In member module, Ajax applied in member registration form and update member details form. The purpose is to validate user input and hints to user. For example, when user enter their username, it will check whether the username is available or not and will give user the hint. Besides that, if user does not fill in the mandatory field, it will give user a hint as well. After user filled up the form with a validate information and press the submit button, the web page will process the form submission. After done the registration process, the page will not refresh and only the registration form area will be updated.

For the supplier module, Ajax is used for validation purpose that is applied in supplier details form. For example, when supplier input an invalid email address, it will give supplier a hint how is the example of a valid email address without refreshing the page.

For the reservation module, in step 1 after user had selected a date for treatment, it will display the time schedule of the selected date. And then user can select the available time and process to the step 2 which in fill up the reservation details form. From steps 1 to step 2 there are no require page refreshing with the implementation of Ajax.

For the online sales module, Carousel is applied in this module which user can scroll and view the product, in other way to view the large image without refreshing the page. Besides that, user can choose to view the product in a grid view or table view as well.


In my opinion, Ajax is good for implementation in Web-based application. The reason why use Ajax is because it is fast response and it communicate with server-side asynchronously, the server only process the data require by the client make and then send back to the client. Besides, it buffering the data before the client requires it, so client no needs to send the request to the server when they need the data. Moreover client can share the server workload, there are many things can be done in client side. For example form validation can do in client side before it uploads to the server.

Another reason why use Ajax, is because it is a good designer for Web-based application. Ajax is powerful and it can make a Web-based application look and feel like a desktop application. Because refreshing entire page is not require by an Ajax page, only part of the page are require reloaded when it acquire then response from the server.

Ajax do really provide us the benefit for user interaction decrease the traffic of network, yet only require simple studies in order to implement it. Besides of simple studies, the code are easy to understand and implementation. I do strongly support the usage of Ajax because it brings a lot of benefit to user.

From what I read from those article that written in references chapter, with the implementation of Ajax, it do help in improving the web site technology with controlling the data exchange by performing the data transmission for those necessary data only instead of whole page data transmission.


As the conclusion, the technologies of Ajax is a beneficial technologies that used to improve the designing of application and interface due to the system to reach asynchronously in term of interaction between user and the system.

Although Ajax has some disadvantages but the advantages for using Ajax is more than the disadvantages and that is the reason why a lot of web applications are using Ajax in the web site. Ajax can reduce the network latency and this could enable the application to perform faster to improve user experience when using it. Besides that, user can have more interaction with the web page in term of Ajax are refresh and process the necessary area of the page instead the whole page.

With the advantages that overcome the disadvantages, Ajax is strongly supported to use because by using Ajax, it improves user satisfaction by using the web site due to the desktop-like application by the implementation of Ajax.