ABSTRACT

AJAX, a shorthand for Asynchronous Java And XML, is a technique

which uses this XMLHttpRequest object of the browser features plus the Document
Object Model and DHTML and provides for making highly interactive web
applications in which the entire web page need not be changed by a user action, only
parts of the page are loaded dynamically by exchanging information with the server.
This approach has been able to enhance the interactivity and speed of the web
applications to a great extent. Interactive applications such as Google Maps, Orkut,
Instant Messengers are making extensive use of this technique. This report presents an
overview of the basic concepts of AJAX and how it is used in making web
applications. Creating Web applications has been considered as one of the most
exciting jobs under current interaction design. But, Web interaction designers can't
help feel a little envious of their colleagues who create desktop software. Desktop
applications have a richness and responsiveness that has seemed out of reach on the
Web. The same simplicity that enabled the Web's rapid proliferation also creates a
gap between the experiences that can be provided through web applications and the
experiences users can get from a desktop application.

AJAX is a set of technologies combined in an efficient manner so that the web

application runs in a better way utilizing the benefits of all these simultaneously.
AJAX incorporates:
1. standards-based presentation using XHTML and CSS.
2. dynamic display and interaction using the Document Object Model.
3. And JavaScript bindS everything together

i
 LIST OF FIGURES

Figure No Figure Name Page no

1 Ajax Working 2

2 Classic vs Ajax Web 5

Application Model
3.1 Synchronous 6
3.2 Synchronous Architecture 6
3.3 Asynchronous 7
3.4 Asynchronous Architecture 7
4 Javascript working 10
5 Ajax Engine working 11

ii
 1. INTRODUCTION
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new
technique for creating better, faster, and more interactive web applications with the
help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS for
presentation, along with Document Object Model and JavaScript for dynamic content
display. Conventional web applications transmit information to and from the sever
using synchronous requests. It means you fill out a form, hit submit, and get directed
to a new page with new information from the server. With AJAX, when you hit
submit, JavaScript will make a request to the server, interpret the results, and update
the current screen. In the purest sense, the user would never know that anything was
even transmitted to the server. XML is commonly used as the format for receiving
server data, although any format, including plain text, can be used.

1.1 What is AJAX?

AJAX is not a programming language. AJAX just uses a combination of:

 A browser built-in XMLHttpRequest object (to request data from a web

server)
 JavaScript and HTML DOM (to display or use the data)

AJAX is a misleading name. AJAX applications might use XML to transport data,
but it is equally common to transport data as plain text or JSON text. AJAX allows
web pages to be updated asynchronously by exchanging data with a web server
behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.

1.2 How AJAX Works

 An event occurs in a web page (the page is loaded, a button is clicked)

 An XMLHttpRequest object is created by JavaScript
 The XMLHttpRequest object sends a request to a web server
 The server processes the request
 The server sends a response back to the web page
 The response is read by JavaScript

1
  Proper action (like page update) is performed by JavaScript

Fig 1.0 Ajax Working

1.3 How AJAX is different
An Ajax application eliminates the start-stop-start-stop nature of interaction on the
Web by introducing an intermediary — an Ajax engine — between the user and the
server. It seems like adding a layer to the application would make it less responsive,
but the opposite is true.
Instead of loading a webpage, at the start of the session, the browser loads an
Ajax engine — written in JavaScript and usually tucked away in a hidden frame.
This engine is responsible for both rendering the interface the user sees and
communicating with the server on the user’s behalf.
The Ajax engine allows the user’s interaction with the application to happen
asynchronously — independent of communication with the server. So the user is
never staring at a blank browser window and an hourglass icon, waiting around for
the server to do something.

2
1.4 Who’s Using AJAX
Google is making a huge investment in developing the Ajax approach. All of
the major products Google has introduced over the last year — Orkut, Gmail, the
latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax
applications. (For more on the technical nuts and bolts of these Ajax implementations,
check out these excellent analyses of Gmail, Google Suggest, and Google Maps.)
Others are following suit: many of the features that people love in Flickr depend on
Ajax, and Amazon’s A9.com search engine applies similar techniques.

3
 2. AJAX HISTORY
2.1 HISTORY
In the early-to-mid 1990s, most Web sites were based on complete HTML
pages. Each user action required that a complete new page be loaded from the server.
This process was inefficient, as reflected by the user experience: all page content
disappeared, then the new page appeared. Each time the browser reloaded a page
because of a partial change, all of the content had to be re-sent, even though only
some of the information had changed. This placed additional load on the server and
made bandwidth a limiting factor on performance.
In 1996, the iframe tag was introduced by Internet Explorer; like
the object element, it can load or fetch content asynchronously. In 1998, the
Microsoft Outlook Web Access team developed the concept behind
the XMLHttpRequest scripting object. It appeared as XMLHTTP in the second
version of the MSXML library, which shipped with Internet Explorer 5.0 in March
1999.
The ActiveX version is still supported in Internet Explorer, but not
in Microsoft Edge. The utility of these background HTTP requests and asynchronous
Web technologies remained fairly obscure until it started appearing in large scale
online applications such as Outlook Web Access (2000) and Oddpost (2002).

2.2 Rich Internet Application Technology

AJAX is the most viable Rich Internet Application (RIA) technology so far. It
is getting tremendous industry momentum and several tool kit and frameworks are
emerging. But at the same time, AJAX has browser incompatibility and it is
supported by JavaScript, which is hard to maintain and debug.

2.3 Classic vs. AJAX web application model

Most user actions in the interface trigger an HTTP request back to a web
server. The server does some processing — retrieving data, crunching numbers,
talking to various legacy systems — and then returns an HTML page to the client. It’s
a model adapted from the Web’s original use as a hypertext medium, but as fans
of The Elements of User Experience know, what makes the Web good for hypertext
doesn’t necessarily make it good for software applications.

4
 Fig 2 Classic vs Ajax Web Application Model

This approach makes a lot of technical sense, but it doesn’t make for a great user
experience. While the server is doing its thing, what’s the user doing? That’s right,
waiting. And at every step in a task, the user waits some more. Obviously, if we were
designing the Web from scratch for applications, we wouldn’t make users wait
around. Once an interface is loaded, why should the user interaction come to a halt
every time the application needs something from the server? In fact, why should the
user see the application go to the server at all?

5
 3. Synchronous vs. Asynchronous

3.1 Synchronous (Classic Web-Application Model):

A synchronous request blocks the client until operation completes i.e. browser
is unresponsive. In such case, java script engine of the browser is blocked.

Fig 3.1 Synchronous

As you can see in the above image, full page is refreshed at request time and user is
blocked until request completes.

Fig 3.1Synchronous architecture

3.2 Asynchronous (AJAX Web-Application Model)
An asynchronous request doesn’t block the client i.e. browser is responsive. At that
time, user can perform another operations also. In such case, java script engine of the
browser is not blocked.

6
 Fig 3.3 Asynchronous
As you can see in the above image, full page is not refreshed at request time and user
gets response from the Ajax engine.

Fig 3.4 Asynchronous architecture

3.3 AJAX is Based on Open Standards

AJAX is based on the following open standards −

 Browser-based presentation using HTML and Cascading Style Sheets (CSS).

 Data is stored in XML format and fetched from the server.

 Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.

 JavaScript to make everything happen.

7
 4. CLIENTS-SERVER PROTOCOLS
When searching the web for true AJAX samples (I don’t call pure client side
scripting an AJAX sample – but some people do) you may see that there are as many
protocol definitions as there are samples and frameworks. Even if they mention to use
JSON on the network layer the samples differ in many ways. I see no specific
standard that is bound to AJAX web applications. Seeing this situation I asked myself
why not to use WebServices because I had a lot of experience with SOAP and already
had implemented a SOAP client in JavaScript some years ago.
4.1 Best Practices for a WebService implementation:
Using a WebServices client is not so hard to do if you have a layer that takes
care of building the valid XML for the network layer so the client should be
implemented as you expect or know it from other platforms and languages by
providing a stub function on the client that. You can use this local function from
JavaScript to call the corresponding function on the server and pass the parameters.
This is called a RPC network layer. When using the (non-multitasking) JavaScript
interpreter in the browser there is need for an asynchronous mechanism too. It’s
because waiting for an answer a call to a server can fail in many ways:

 Packets my get lost.

 The network may be unreliable

 The server may be overloaded

 And many more pitfalls.

4.2 Using WebServices in AJAX applications:
There are still some disadvantages with many available AJAX frameworks on the web
and also with my preceding implementation:

 For every function you want to implement a special page must be realized.

 The URL may exceed a length of more than a few 100 chars and will bring up
problems.

 The implementation on the server consists of code fragments used for the
communication of parameters and the return value together with the
application specific code.

8
  We need to implement a big part of the framework ourselves, for example
parsing the parameters and converting them to the native types. This seems to
be an easy job but there have been security leaks in (too simple) AJAX
implementations.
Here it is obvious that using the server side communication infrastructure of
WebServices brings in some huge advantages:

 The same functionality can also be used from other WebService enabled
applications like Excel.

 Multiple methods can be implemented together in one class so it is possible to

choose the right granularity for bigger collections of WebServices.
4.3 A SOAP client for JavaScript:
Calling a server from JavaScript is a fundamental part of AJAX applications.
Using WebServices with SOAP and WSDL is easy if proxy objects and methods are
available in the browser. From the languages and programming environments like C,
the .NET CLR and Java we are know proxy generation mechanisms based on IDL and
RPC for a long time. These generated classes and files enable the programmer to call
a server-side method by calling a local method with the same name.
The implementation of the network transfer is taken off your application code.
If you want to implement a communication from JavaScript to WebServices using
SOAP it is very important to use an approach that needs only a small amount of code.
Complex and long scripts tend to be buggy. This Proxy generator can be used on its
own but is also part of the AJAXEngine framework. Some AJAX implementations
use their own way to transport the information between the client and the server. This
implementation uses the standard SOAP protocol and works on Internet Explorer and
the Firefox browser.

9
 Fig 4 Javascript working
How it works -
WebServices can be described by using the formal description standard for
WebServices called WSDL (WebService Description Language). Everything we need
to know for calling a WebService is available in this XML formatted information.
Based on this service description it is possible to generate JavaScript source code that
contains methods and some descriptive information. Because WSDL is formatted in
XML the transformation can be done by using the XSLT technology.

10
 5. AJAX ENGINE
The basic elements for an application using the AJAX technologies JavaScript
and XMLHttpRequest are not difficult to realize. However, the selection from the
available technologies as well as a suitable abstraction in using these elements is
important for the success of the realization of an application. One main goal behind
the architecture of this AJAX engine was to build an AJAX framework that you can
reuse every time you want some asynchronous processing or when you need a smart
way to refresh information on the current web page will help a lot. When targeting
applications with some hundred sides and WebServices and with in sum about a
thousand methods the developer must have a clear and simple kind and pattern for
coding the JavaScript code on the client to avoid errors and to not think about the
implementation details. Only by using a simple approach a good quality and
maintenance can be achieved.
The blue print of the AJAX engine has the following connected components:

Fig 5 Ajax Engine working

HTML form and elements:
The static or dynamically provided HTML of objects e.g. < input > elements become
for the interaction with the user used.
Buttons & Events:
The buttons and events that start the AJAX functionality must only call a simple
JavaScript function. This can be used for example using inline code in an onclick
attribute. This starts then the processing of the steps that should be executed.
Web methods and proxies:

11
The proxy framework is used on the client to call the server-side methods. The
individual methods to call a Web Service is generated by a WSDL to JavaScript
Compiler and the core functionality for building SOAP messages is available in
ajax.js.
Web Services:
The communication between the client and the server is realized by using the standard
Web Services infrastructure with SOAP messages and WSDL services descriptions
instead of building a new server-side mechanism for good reasons.
 Writing a server side framework must not be done. There are already a lot of
them but the Web Service based on SOAP and WSDL is widely accepted as a
standard.
 Before implementing a new proprietary core feature with a high complexity I
think it makes sense to search for existing technology in the common
frameworks that I can rely on.
5.1 AJAX Action Reference
Every action on the page is described with the assistance of an object that holds all
information together. The properties of this object are:
action.prepare(option)
This property defines a function that is used directly before sending the SOAP of
package to the server. This function has to return the data that is used as the argument
of the call to the server. If this function is not defined then a serverside method
without parameters is called. The option that was passed to the ajax.Start function is
also available in the prepare function as a parameter.
action.call()
This property refers to a function that was generated by the proxy generator to a
WebService. action.finish(option)
This property defines a function that will retrieve the result of the call. This property
may be zero. The option that was passed to the ajax.Start function is also available in
the prepare function as a parameter.
5.2 Starting an AJAX Action
ajax.Start(action, option)
By calling the Start function of the global ajax object a defined action will be started.
With the option parameter it is possible to define an option for a specific execution

12
that will be passed to various functions that are defined through the action definition.
This value is stored into the queue of the AJAX engine together with the fist
parameter specifying the action.
ajax.Cancel()
This method cancels the execution of the currently running action. If a timeout value
is specified in the action options this method is called automatically.
ajax.CancelAll()
This method cancels the execution of the currently running and all the pending
actions.
5.3 Handling Exceptions
proxies.alertException(ex):
This method shows the exception object in a readable format using an alert box. This
method can be used in proxies.service.method.onException as well as in
action.onException.

13
 6. AJAX Technologies
The term Ajax has come to represent a broad group of Web technologies that can be
used to implement a Web application that communicates with a server in the
background, without interfering with the current state of the page. In the article that
coined the term Ajax, Jesse James Garrett explained that the following technologies
are incorporated:

 HTML (or XHTML) and CSS for presentation

 The Document Object Model (DOM) for dynamic display of and interaction with
data
 JSON or XML for the interchange of data, and XSLT for its manipulation
 The XMLHttpRequest object for asynchronous communication
 JavaScript to bring these technologies together

Since then, however, there have been a number of developments in the technologies
used in an Ajax application, and in the definition of the term Ajax itself. XML is no
longer required for data interchange and, therefore, XSLT is no longer required for
the manipulation of data. JavaScript Object Notation (JSON) is often used as an
alternative format for data interchange, although other formats such as preformatted
HTML or plain text can also be used. A variety of popular JavaScript libraries,
including JQuery, include abstractions to assist in executing Ajax requests.

Asynchronous HTML and HTTP (AHAH) involves using XMLHTTPRequest to

retrieve (X)HTML fragments, which are then inserted directly into the Web page.

6.1 XML or JSON

 For carrying data to and from server. JSON (Javascript Object Notation) is
like XML but short and faster than XML.

6.2 JavaScript

 Loosely typed scripting language.

 JavaScript function is called when an event occurs in a page.

 Glue for the whole AJAX operation.

14
  For carrying data to and from server. JSON (Javascript Object Notation) is
like XML but short and faster than XML.

6.3 DOM

 API for accessing and manipulating structured documents.

 Represents the structure of XML and HTML documents.

 It is used for dynamic display and interaction with data.

6.4 CSS

 Allows for a clear separation of the presentation style from the content and
may be changed programmatically by JavaScript

 These technologies are used for displaying content and style. It is mainly used
for presentation.

6.5 XMLHttpRequest
JavaScript object that performs asynchronous interaction with the server.

The XMLHttpRequest object is the key to AJAX. It has been available

ever since Internet Explorer 5.5 was released in July 2000, but was not
fully discovered until AJAX and Web 2.0 in 2005 became popular.
XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript,
VBScript, and other web browser scripting languages to transfer and manipulate
XML data to and from a webserver using HTTP, establishing an independent
connection channel between a webpage's Client-Side and Server-Side.

The data returned from XMLHttpRequest calls will often be provided by back-end
databases. Besides XML, XMLHttpRequest can be used to fetch data in other
formats, e.g. JSON or even plain text.

You already have seen a couple of examples on how to create an XMLHttpRequest

object.

Listed below are some of the methods and properties that you have to get familiar
with.

15
6.5.1 XMLHttpRequest Methods
 abort()

Cancels the current request.

 getAllResponseHeaders()

Returns the complete set of HTTP headers as a string.

 getResponseHeader( headerName )

Returns the value of the specified HTTP header.

 open( method, URL )

 open( method, URL, async )

 open( method, URL, async, userName )

 open( method, URL, async, userName, password )

Specifies the method, URL, and other optional attributes of a request.

The method parameter can have a value of "GET", "POST", or "HEAD".

Other HTTP methods such as "PUT" and "DELETE" (primarily used in
REST applications) may be possible.

The "async" parameter specifies whether the request should be handled

asynchronously or not. "true" means that the script processing carries on after
the send() method without waiting for a response, and "false" means that the
script waits for a response before continuing script processing.

 send( content )

Sends the request.

 setRequestHeader( label, value )

Adds a label/value pair to the HTTP header to be sent.

6.5.2 XMLHttpRequest Properties

 onreadystatechange

An event handler for an event that fires at every state change.

16
  readyState

The readyState property defines the current state of the XMLHttpRequest

object.

The following table provides a list of the possible values for the readyState
property –

State Description

0 The request is not initialized.

1 The request has been set up.

2 The request has been sent.

3 The request is in process.

4 The request is completed.

readyState = 0 After you have created the XMLHttpRequest object, but before you
have called the open() method.

readyState = 1 After you have called the open() method, but before you have called
send().

readyState = 2 After you have called send().

readyState = 3 After the browser has established a communication with the server,
but before the server has completed the response.

readyState = 4 After the request has been completed, and the response data has been
completely received from the server.

 responseText

Returns the response as a string.

17
 responseXML

Returns the response as XML. This property returns an XML document

object, which can be examined and parsed using the W3C DOM node tree
methods and properties.

 status

Returns the status as a number (e.g., 404 for "Not Found" and 200 for "OK").

 statusText

Returns the status as a string (e.g., "Not Found" or "OK").

18
 7. APPLICATIONS
AJAX has come to the forefront as the next "buzzword complaint" thing on
the internet. Sometimes it seems that in order to be taken seriously, your site has to
have some kind AJAX functionality built in. But, much like Flash and other such
tools, AJAX should be used sparingly to compliment the design, function and content
of a website -- not dominate it. With this ethos in mind, I'd like to take a look at a few
sites that use AJAX correctly, in hopes that other developers may do the same.
Sliders and Other Controls:
The web is not simply used to load up a page of static content and display it.
This should be obvious, and if it isn't, well...you should just turn off your computer
and go outside to play with your cat. Sometimes you need to let the user decide how
and/or what content is displayed on the page. A control fills this need perfectly. The
user manipulates a control on a site to modify the content that is displayed in front of
them. This may sound like just a worthless extra, but it can be very useful.
Draggable Content:
Web applications often have a "user homepage" which displays all relevant
information and links for that user. I remember way back to when I first
discovered myYahoo; I thought it was so cool thar I could customize how a website
looked to me. It was so...personal. But back then, you customized your page through
3 multiple dropdown boxes and some clever JavaScript. But not anymore; now we
have AJAX.
Suggestions:
Never assume anything from your users. This especially applies to security,
where you need to hold all user collected content with a 500' pole away from your site
until you've scrubbed away all of its nasty XSS/Injection bits. But you should also
never assume that your user knows what they're looking for. The world is a big place,
and misunderstandings are common -- especially when traveling. But it doesn't have
to be that way! Now we have AJAX, and it is here to offer up suggestions.

19
 8. CONCLUSION
In each of the preceding examples, their functionality can be accomplished
AJAX-free. Some may argue that this is the preferred method, as the usability of
AJAX is still debated in some web standards and usability circles. And while it may
be true that not everyone on the internet is going to be able to use every single AJAX
feature, that doesn't mean they shouldn't be implemented. They help drive forward
user interface and web functionality to places beyond the standard flat HTML page.
At the same time, AJAX can be obtrusive and used "just because." While
poking around Netflix, I found out that after you add a movie to your queue via the
"Add" button, a box occupying 80% of the screen comes up offering additional
suggestions for me to take a look at. You have another click to get it closed or to go
back to the main site. I find this annoying -- especially since the same suggestion
functionality is available in another place on their site. The AJAX gets in the way and
becomes a blockage to content, not a complimentary player on the site.
When used correctly, AJAX is a very nice tool in the web developers arsenal. It
allows quick and easy completion of repetitive tasks, complete customization of a
site's layout by a user, and offers helpful suggestions. Just remember the golden rule:
content. Without it, you're just stringing pearls on a manatee.

20
 REFERENCES

1. Jesse James Garrett (18 February 2005). "Ajax: A New Approach to Web
Applications". AdaptivePath.com. Retrieved 19 June 2008.
2. "Ajax - Web developer guides". MDN Web Docs. Retrieved 2018-02-27.
3. Jump up to Ullman, Chris (March 2007). Beginning Ajax. wrox. ISBN 978-0-
470-10675-4. Archived from the original on 5 July 2008. Retrieved 24
June 2008.
4. "JSON: The Fat-Free Alternative to XML". www.json.org. Retrieved 2017-
02-17.
5. Jump up to "Article on the history of XMLHTTP by an original developer".
Alexhopmann.com. 31 January 2007. Archived from the original on 23 June
2007. Retrieved 14 July 2009.
6. “Specification of the IXMLHTTPRequest interface from the Microsoft
Developer Network". Msdn.microsoft.com. Retrieved 2009-07-14.
7. Dutta, Sunava (2006-01-23). "Native XMLHTTPRequest object". IEBlog.
Microsoft. Retrieved 2006-11-30.
8. "Dynamic HTML and XML: The XMLHttpRequest Object". Apple Inc.
Retrieved 25 June2008.
9. Hopmann, Alex. "Story of XMLHTTP". Alex Hopmann’s Blog. Archived
from the original on 30 March 2010. Retrieved 17 May 2010.

21
22