Post on 22-Jan-2018
1
CHAPTER ONE
INTRODUCTION
Ajax, which consists of XML, JavaScript technology, DHTML, and DOM, is an
approach that helps developers transform clunky Web interfaces into interactive
Ajax applications (McLaughlin, 2005). Consider the choice of applications that
developers are writing such as desktop applications or Web applications.
Desktop applications usually come on a CD or can be downloaded from a Web
site and installed completely on any computer. They might use the Internet to
download updates, but the code that runs these applications resides on the
desktop. Web applications on the other hand run on a Web server somewhere
and can access the application with a Web browser. More important than where
the code for these applications runs, though, is how the applications behave and
how they can be interacted with. Desktop applications are usually quite fast as
they are running on a computer, therefore Internet connection speed is not an
issue, and they have great graphical user interfaces which usually interacts with
the operating system. All and all they are incredibly dynamic. Desktop
applications are extremely interactive these days, they can be clicked, pointed &
typed with almost no waiting around (McLaughlin, 2005).
On the other hand, Web applications are usually up to the second updated and
they provide services which could not be got on a desktop, a really good
example of this is eBay. However, with the power of the Web comes waiting,
waiting for a server to respond, waiting for a screen to refresh, waiting for a
request to come back and generate a new page. Again with the example of
eBay, how frustrating when an auction is nearing its end and the current bidder
is being outbid because of the length of time the page is taking to refresh before
they can enter a new bid again, most times they have lost the item they were
interested in (McLaughlin, 2006). Ajax attempts to bridge the gap between the
2
functionality and interactivity of a desktop application and the always-updated
Web application. This technology uses dynamic user interfaces and fancier
controls like that which are found on a desktop application, but now has become
available on a Web application. AJAX is also a key component of Web 2.0
applications such as Flickr, now part of Yahoo!, 37signals' applications
basecamp and backpack, as well as other Google applications such as Gmail
and Orkut (O’Reilly, 2006). Another definition of AJAX coined by Jesse James
Garrett on February 18, 2005 was that Ajax was not just one technology, but
several, each flourishing in its own right, each coming together in powerful new
ways. “The reason for this definition is because AJAX incorporates several
technologies including
Standards-based presentation using XHTML and CSS
Dynamic display and interaction using the Document Object Model
Data interchange and manipulation using XML and XSLT
Asynchronous data retrieval using XMLHttpRequest
And JavaScript binding everything together”
3
CHAPTER TWO
THEORITICAL BACKGROUND STUDY
2.1 HISTORY OF WEB SERVICES
Similar to almost every IT sector also in the part of Web services and
programming the development and innovation of technologies in the last few
decades was raised in a very significant way. As in 1989 Tim Berners Lee
invented the Hypertext Markup Language, nobody knew what kind of rapid
development it would lead to. In the first years HTML was only used for static
websites and for layout purposes. But HTML is still, like nearly twenty years
ago, also nowadays (today the XHTML 2.0 standard is common) hierarchically
structured and assembled by so called tags. This is a very important aspect for
the DOM – Document Object Model, which will be evaluated later in detail.
The more sites web designers and web programmers implemented, the more
the demand for dynamic web sites increased. In 1998 first implementations of
Dynamic HTML were published technically feasible with Java Script. These
were the first fore-riders of the new AJAX framework, which generally only
uses existing technologies. But not everyone was affected with that hype, one of
the problems was the Netscape Microsoft browser war. While Netscape
invented the JavaScript object based language, Microsoft countered with its
Jscript which had similar functionalities but for web programmers there were
too many problems with compatibility. Also nowadays it is not easy to create
Java Script applications compatible for every browser. While Microsoft uses the
Active X support in its Internet Explorer, the Gecko browsers (Mozilla, Firefox,
etc.) are not completely compatible to them.
Later websites gained interactivity and dynamic actions through Java applets
and Flash applications which all use the common browser-server request: a user
opens a browser, sends a request to a server, the server handles the request and
4
gives it back to the browser where the user waits for the answer. With the help
of AJAX a lot of these connections can be realized simultaneously while the
user is working.
In 2000 the establishment of XML allowed the describing of data. XML, which
is a meta language, forms the basis of many Web services and allows to
exchange 4 data in a standardized way. It also works with the use of tags, which
can, in contrast to HTML, be self invented. For the last few years more end
devices (mobiles, PDAs, etc.) have created a new challenge. Through these
developments and evolutions the next step - building interactive Web
applications was not very far away. Such interactive applications are the basis
of the new generation of the Web - Web 2.0.
2.2 WEB 2.0
The latest generation of the World Wide Web is the so called Web 2.0. Through
the development and the success of Web Services, information and several
providers like Wikipedia.org or Google the kind of information exchange in the
Web is changing and evolving. Interactive Web applications in which users
can be important interactors or can play parts within lead to eliminate the border
to desktop applications. An example for these developments is the online photo
shop and information service ’flickr’. Users can upload their own photos and
give them an XML-tag keyword they like. So others have the possibility to
search for photos with these keywords. Table 1 shows the evolution of the Web.
Another aspect of the new Web 2.0 generation is the trend away from personal
Websites to blogging information. A reason for the hype of Web 2.0 are that the
broadband has become mainstream and ubiquitous, resulting in an increased
usage of the Internet for even small tasks on different devices and so more
5
people go online for a variety of tasks and shopping-related activities. The
trends go to
A social phenomenon referring to an approach to creating and distributing
Web content itself, characterized by open communication,
decentralization of authority, freedom to share and re-use, and” the
market as a conversation”.
The transition of Websites from isolated information silos to sources of
content and functionality, thus becoming a computing platform serving
Web applications to end users
A more organized and categorized content, with a far more developed
deep linking Web architecture
Web 2.0 is a marketing term to differentiate new Web businesses from those
of the dot com boom, which due to the bust now seem discredited
The resurgence of excitement around the possibilities of innovative Web
applications and services that gained a lot of momentum around mid
2005.
2.3 JAVASCRIPT AND XML
Essentially taking each part of the acronym in isolation Asynchronous, means
that when you a request is sent, the user must wait for a response to come back,
but is free to do other things while they wait. The response probably does not
come back immediately, so the developer can set up a function that will wait for
it to be sent by the server, and react to it once it happens. The next stage is
JavaScript. This code is the core code running Ajax applications. It is used to
make a request to the server. Once the response is returned by the server, the
developer will generally use some more JavaScript to modify the current page’s
document object model (DOM) in some way to show the user that the
submission went through successfully. JavaScript is the scripting language of
6
the Web, it is used in millions of Web pages to improve the design, validate
forms, detect browsers, create cookies, and is the most popular scripting
language on the internet and works in all major browsers, such as Internet
Explorer, Mozilla, Firefox, Netscape, Opera etc. A big advantage for developers
is the fact that it is easy to learn (W3Schools, 2006). JavaScript is a prototype
based scripting language with a syntax loosely based on C. Like C, the language
has no input or output constructs of its own. Whereas C relies on standard I/O
libraries, a JavaScript engine relies on a host environment into which it is
embedded. There are many such host environment applications, of which web
technologies are the most well known examples. One major use of web based
JavaScript is to write functions that are embedded on or included from HTML
pages and interact with the Document Object Model of the page to perform
tasks not possible in HTML alone. The final component in AJAX is XML.
XML stands for Extensible Markup Language which is used as a way of
describing data. An XML file can contain the data too, similar to that of a
database. The primary purpose of XML is to facilitate the sharing of
information across different systems, particular those connected to the internet.
AJAX passes data to servers packaged up as snippets of XML code, so that it
can be easily processed with JavaScript. This data can be anything which is
needed, and as long as required. It is not a new technology as this is already
how the web works, the only difference is that now these requests can be made
from JavaScript. In short a file is requested and a page is received in response.
2.4 THE AJAX MODEL
Ajax is not a technology but rather a family of technologies that have been
available for years, each flourishing in their own right and coming together in
7
significant new ways (Garrett, 2005). Ajax incorporates standards-based
presentation using XHTML and CSS, the former is a stricter and cleaner version
of HTML, which is used to build Web forms and identify fields for use in
applications. The latter is CSS which stands for Cascading Style Sheets which
define how to display HTML elements in a web application. These standards
are W3C Recommendations which describe the communication protocols of
HTML, XML and other building blocks of the Web (Garrett, 2005). Also
incorporated in AJAX is dynamic display and interaction using the Document
Object Model, data interchange and manipulation using XML and Extensible
StyleSheet Language Transformations (XSLT), asynchronous data retrieval
using XMLHttpRequest and JavaScript binding everything together which gives
faster access, better support, and acceptance as a data structure in a Web
application. The preferred way to communicate with the server is by sending
data as XML but other methods can be used. Although XML provides two
enormous advantages as a data representation language, as it is text based and is
position independent. Unfortunately, XML is not well suited to data interchange
as it carries a lot of baggage, and it does not match the data model of most
programming languages. However there is another text notation that has all of
the advantages of XML, but is much better suited to data interchange. That
notation is JavaScript Object Notation (JSON). JSON is a lightweight computer
data interchange format. It is a subset of the object literal notation of JavaScript
but its use does not require Javascript. JSON's elegance and simplicity has
resulted in its widespread use, especially as an alternative to XML in Ajax. One
of the claimed advantages of JSON over XML as a data interchange format in
this context is that it is much easier to write a JSON parser. JSON parses ten
times quicker than XML, which is quite expensive to parse. In JavaScript itself,
JSON can be parsed trivially using the eval() procedure. This was important for
the acceptance of JSON within the Ajax programming community because of
JavaScript's ubiquity among web browsers.
8
For that reason JSON is typically used in environments where the size of the
data stream between the client and the server is of paramount importance hence
its use by Google, Yahoo, etc, which serves millions of users and the source of
the data can be explicitly trusted, and where the loss of fact access to c lient-side
XSLT processing for data manipulation or UI generation is not a consideration.
While JSON is often positioned against XML, it is not uncommon to see both
JSON and XML used in the same application. For example, a client-side
application which integrates Google Maps data with SOAP weather data
requires support for both data formats. (JSON, The Fat Free Alternative To
XML). Comparing XML and JSON on the attributes which are considered
important, the first is how simplistic JSON is, it has a much smaller grammar
and maps more directly onto the data structures used in modern programming
languages therefore less coding is required compared to XML. It it also easier
for humans to read and for machines to read and write. Secondly JSON is not
extensible because it does not need to be. JSON is not a document mark-up
language, so it is not necessary to define new tags or attributes to represent data
in it. JSON has the same interoperability potential as XML and lastly is at least
as open as XML, perhaps more so because it is not in the centre of
corporate/political standardisation struggles (Kelly, 2005). Whatever is used
XML or JSON, for developers to get the right look for an AJAX application,
Cascading Style Sheets (CSS), a World Wide Web Consortium (W3C) standard
is a crucial weapon in the AJAX developer's arsenal. CSS provides the
mechanism for separating the style and design of an application from the
content itself. Although CSS plays a prominent and important role in AJAX
applications, it also tends to be one of the bigger stumbling blocks in building
cross browser compatible applications since there are widely varying levels of
support from different browser vendors (Johnson, 2006)
9
Therefore the real complexity in JavaScript programming results from the
incompatibility of Web browsers' support for varied technologies and standards.
Building an application that runs on different browsers e.g. IE and Mozilla's
Firefox is a difficult task to say the least. To that end, several AJAX JavaScript
frameworks commercial and open source either generate JavaScript code based
on server side logic or tag libraries, or provide a client side JavaScript library to
facilitate cross browser AJAX development. Some of the more popular
frameworks include AJAX.Net, Backbase, Bitkraft, Django, DOJO, DWR,
MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.aculo.us. The browser
wars from a few years ago are still going on albeit on a much smaller scale.
Therefore the effect on Ajax applications as regards the XMLHttpRequest finds
itself one of the victims of this war. Consequently a few different things are
necessary to get an XMLHttpRequest object going. The key is to support all
browsers. No developer wants to write an application that works just on Internet
Explorer or an application that works just on non-Microsoft browsers. It’s a
poor answer to write an application twice, therefore code should combine
support for both Internet Explorer and non-Microsoft browsers in a multi
browser way. Modern browsers offer users the ability to change their security
levels, and to turn off JavaScript technology, disable any number of options in
their browser. Therefore, developers need to handle the problems associated
with these changes without letting the application fall over. Writing robust code
is a challenge for Ajax developers.
2.5 Web 2.0 and AJAX
There has been a lot of talk about the technology of Web 2.0, but only a little on
the impact these technologies will have on user experience apart from Ajax of
recent. The first "Real-World AJAX" event, held in New York City, featured 15
speakers in 11 sessions, including many of the world's most renowned AJAX
10
experts, and more than 400 delegates attended while more than 15,000 SYS-
CON.TV viewers tuned into the simulcast on March 13, 2006. At this seminar
Jesse James Garrett (Adaptive Path publications) declared ‘The biggest
challenges in creating Ajax applications are not technical. The core Ajax
technologies are mature, stable, and well understood. Instead, the challenges are
for the designers of these applications: to forget what we think we know about
the limitations of the Web, and begin to imagine a wider, richer range of
possibilities’. The impact of Ajax for Web applications covers a wide range of
issues, business strategy, technology, design, team structure and processes are
all potentially affected by the move to Ajax. (Garrett, 2005)
This middle of the road approach as opposed to screen based approaches which
mimic the sophistication of desktop applications, with Java, Flash or a similar
technology or page based approaches which force developers to deal with the
load-reload effect of normal web pages. Resulting in users who enter and
manipulate information in page based applications sitting through a page refresh
in order for their changes to take place. The Amazon.com checkout sequence,
Google search, and the eBay selling sequence are common examples of the
page based approach. While both approaches have proven successful, each has
drawbacks. Ajax on the other hand marries the benefits of both screen and
paged based approaches by allowing more sophisticated functionality using
easier to implement web standards. Ajax is a solid alternative for new interface
development and experts have already affirmed the viability of the web as a
standalone software development platform. Its popularity is certainly helped
with large companies like Google creating amazing applications using the Ajax
technology eg Google Maps, Google Gmail, and Google Suggest and another
reason is the continuing adoption of standards compliant browsers that support
Ajax technology, Firefox, Safari, Opera, and Internet Explorer 6 (Porter, 2005).
Most notably Firefox, for their support of Ajax software, eg ajaxWrite,
11
ajaxTunes which are all small rich web based applications which run on a
computer. These programs launch in 3-4 seconds and have all the interactivety
of Writely or Microsoft Office applications. Ajax131 has just 6-8 servers and
serves millions of people with their “service from servers” web based
applications. Their goal is to show all core applications from the Internet. They
believe that consumers don’t need to know anything about version compatibility
with their existing computer or operating system.
12
CHAPTER THREE
DISCUSSION
3.1 DEFINITION
Ajax (shorthand for asynchronous JavaScript and XML) is a group of
interrelated web development techniques used on the client-side to create
interactive web applications. With Ajax, web applications can retrieve data from
the server asynchronously in the background without interfering with the
display and behavior of the existing page. The use of Ajax techniques has led to
an increase in interactive or dynamic interfaces on web pages. Data are usually
retrieved using the XMLHttpRequest object. Despite the name, the use of XML
is not actually required, nor do the requests need to be asynchronous. Like
DHTML and LAMP, Ajax is not a technology in itself, but a group of
technologies. Ajax uses a combination of HTML and CSS to mark up and style
information. The DOM is accessed with JavaScript to dynamically display, and
to allow the user to interact with the information presented. JavaScript and the
XMLHttpRequest object provide a method for exchanging data asynchronously
between browser and server to avoid full page reloads.
3.2 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 required:
13
HTML or XHTML and CSS for presentation
the Document Object Model for dynamic display of and interaction with
data
XML and XSLT for the interchange, and manipulation and display, of
data, respectively
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 the definition of the term Ajax. In
particular, it has been noted that:
JavaScript is not the only client-side scripting language that can be used
for implementing an Ajax application. Other languages such as VBScript
are also capable of the required functionality. However JavaScript is the
most popular language for Ajax programming due to its inclusion in and
compatibility with the majority of modern web browsers.
XML is not required for data interchange and therefore XSLT is not
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.
Classic Ajax involves writing ad hoc JavaScript on the client. A simpler
if cruder alternative is to use standard JavaScript libraries that can
partially update a page, such as ASP.Net's UpdatePanel. Tools such as
Echo2 and ZK enable fine grained control of a page from the server,
using only standard JavaScript libraries.
14
3.3 WHY USE AJAX?
Mainly AJAX is used to build a fast, dynamic website, and also to save
resources. For improving sharing of resources, it is better to use the power of all
the client computers rather than just a unique server and network. Ajax allows
performing processing on client computer (in JavaScript) with data taken from
the server. The processing of web page formerly was only server-side, using
web services or PHP scripts, before the whole page was sent within the
network. But Ajax can selectively modify a part of a page displayed by the
browser, and update it without the need to reload the whole document with all
images, menus, etc. For example, fields of forms, choices of user, may be
processed and the result displayed immediately into the same page.
3.4 AJAX AS A COMBINATION OF 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:
HTML and CSS for presenting.
JavaScript for local processing, and DOM (Document Object Model) to access
data inside the page or to access elements of XML file read on the server
The XMLHttpRequest object is used to read or send data on the server
asynchronously
Optionally: DOM Parser may be used. PHP or another scripting language may
be used on the server. XML and XSLT to process the data if returned in XML
form
15
3.5 HOW AJAX WORKS?
Ajax uses a programming model with display and events. These events are user
actions; they call functions associated to elements of the web page.
Interactivity is achieved with forms and buttons. DOM allows to link elements
of the page with actions and also to extract data from XML files provided by the
server.
To get data on the server, XMLHttpRequest provides two methods:
Open: create a connection.
Send: send a request to the server.
Data furnished by the server will be found in the attributes of the
XMLHttpRequest object:
responseXml for an XML file or
responseText for a plain text.
Take note that a new XMLHttpRequest object has to be created for each
new file to load.
We have to wait for the data to be available to process it, and in this purpose,
the state of availability of data is given by the ready State attribute of
XMLHttpRequest.
States of readyState follow (only the last one is really useful):
0: not initialized.
1: connection established.
2: request received.
3: answer in process.
4: finished.
Before discussing how Ajax works, you should know how the old technologies
work. Why should you know how the old technologies work? The answer is
simply to observe the difference between the old technologies and Ajax. The
action is sent to the server by requesting an HTTP trigger and you, the internet
user, wait to the server to respond. It is also not that simple. The server will do
16
many jobs in each request. After doing some processing stuff the server will
respond to the client (see figure2).
Figure 2: AJAX versus the classic Web Application Model (Garrett, 2005)
This way is very technical but do you ask yourself this question: What you will
do when the server does its jobs? The answer is nothing but waiting for the jobs
to be done by the server. This is clearly a problem. It is wasting time and
money. on the other hand, Ajax will eliminate the number of interactions with
the server by asking the server to do some specific job(s). How Ajax does that?
This is done by putting Ajax Engine in the middle between the client and the
server. Ajax engine will make the application is less responsive. Furthermore,
after knowing that there is something called Ajax engine but you where it is or
17
how to get it. Do not worry, the user does not have to download this engine or
buy it. It is simply when the user tries to load the webpage, the Ajax engine will
be loaded instead. This engine is written in JavaScript. Rendering the visual
interface and interaction with the server is not a user’s responsibilities it is an
Ajax engine’s responsibilities. This whole processes take place asynchronously.
It is independent of communication with the server. So, if you want to re-load or
update the web page, then you do not have to start from an empty webpage. So,
the internet’s user will interact with Ajax engine instead of interacting with the
server.
3.6 THE ANATOMY OF AN AJAX INTERACTION
Now that we have discussed what Ajax is and what some higher-level issues
are, let's put all the pieces together and look at an Ajax-enabled Java
application.
Let's consider an example. A web application contains a static HTML page, or
an HTML page generated in JSP technology contains an HTML form that
requires server-side logic to validate form data without refreshing the page. A
server-side web component (servlet) named ValidateServlet will provide the
validation logic. Figure 1 describes the details of the Ajax interaction that will
provide the validation logic.
18
Figure 1: An Ajax Interaction Provides Validation Logic
The following items represent the setups of an Ajax interaction as they appear
in Figure 1.
1. A client event occurs.
2. An XMLHttpRequest object is created and configured.
3. The XMLHttpRequest object makes a call.
4. The request is processed by the ValidateServlet.
5. The ValidateServlet returns an XML document containing the result.
6. The XMLHttpRequest object calls the callback() function and processes the
result.
7. The HTML DOM is updated.
Now let's look at each step of the Ajax interaction in more detail.
19
3.6.1 A Client Event Occurs.
JavaScript technology functions are called as the result of an event. In this case,
the function validate() may be mapped to a onkeyup event on a link or form
component.
<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validate();">
This form element will call the validate() function each time the user presses a
key in the form field.
3.6.2 A XMLHttpRequest object is created and configured.
An XMLHttpRequest object is created and configured.
var req;
function validate() {
20
var idField = document.getElementById("userid");
var url = "validate?id=" + encodeURIComponent(idField.value);
if (typeof XMLHttpRequest != "undefined") {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
The validate() function creates an XMLHttpRequest object and calls the open
function on the object. The open function requires three arguments: the HTTP
method, which is GET or POST; the URL of the server-side component that the
object will interact with; and a boolean indicating whether or not the call will be
made asynchronously. The API is XMLHttpRequest.open(String method, String
URL, boolean asynchronous). If an interaction is set as asynchronous (true) a
callback function must be specified. The callback function for this interaction is
set with the statement req.onreadystatechange = callback;. See section 6 for
more details.
21
3.6.3 The XMLHttpRequest object makes a call.
When the statement req.send(null); is reached, the call will be made. In the case
of an HTTP GET, this content may be null or left blank. When this function is
called on the XMLHttpRequest object, the call to the URL that was set during
the configuration of the object is called. In the case of this example, the data
that is posted (id) is included as a URL parameter.
Use an HTTP GET when the request is idempotent, meaning that two duplicate
requests will return the same results. When using the HTTP GET method, the
length of URL, including escaped URL parameters, is limited by some browsers
and by server-side web containers. The HTTP POST method should be used
when sending data to the server that will affect the server-side application state.
An HTTP POST requires a Content-Type header to be set on the
XMLHttpRequest object by using the following statement:
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + encodeURIComponent(idTextField.value));
When sending form values from JavaScript technology, you should take into
consideration the encoding of the field values. JavaScript technology includes
an encodeURIComponent() function that should be used to ensure that localized
content is encoded properly and that special characters are encoded correctly to
be passed in an HTTP request.
22
3.5.4 The request is processed by the ValidateServlet.
A servlet mapped to the URI "validate" checks whether the user ID is in the user
database.
A servlet processes an XMLHttpRequest just as it would any other HTTP
request. The following example show a server extracting the id parameter from
the request and validating whether the parameter has been taken.
public class ValidateServlet extends HttpServlet {
private ServletContext context;
private HashMap users = new HashMap();
public void init(ServletConfig config) throws ServletException {
super.init(config);
this.context = config.getServletContext();
users.put("greg","account data");
users.put("duke","account data");
}
public void doGet(HttpServletRequest request, HttpServletResponse
response)
23
throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !users.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>valid</message>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>invalid</message>");
}
}
}
In this example, a simple HashMap is used to contain the users. In the case of
this example, let us assume that the user typed duke as the ID.
24
3.6.5 The ValidateServlet returns an XML document containing the
results.
The user ID duke is present in the list of user IDs in the users HashMap. The
ValidateServlet will write an XML document to the response containing a
message element with the value of invalid. More complex usecases may require
DOM, XSLT, or other APIs to generate the response.
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>invalid</message>");
The developer must be aware of two things. First, the Content-Type must be set
to text/xml. Second, the Cache-Control must be set to no-cache. The
XMLHttpRequest object will process only requests that are of the Content-Type
of only text/xml, and setting Cache-Control to no- cache will keep browsers
from locally caching responses for cases in which duplicate requests for the
same URL (including URL parameters) may return different responses.
3.5.6 The XMLHttpRequest object calls the callback() function and
processes the result.
The XMLHttpRequest object was configured to call the callback() function
when there are changes to the readyState of the XMLHttpRequest object. Let us
25
assume the call to the ValidateServlet was made and the readyState is 4,
signifying the XMLHttpRequest call is complete. The HTTP status code of 200
signifies a successful HTTP interaction.
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
}
}
}
Browsers maintain an object representation of the documents being displayed
(referred to as the Document Object Model or DOM). JavaScript technology in
an HTML page has access to the DOM, and APIs are available that allow
JavaScript technology to modify the DOM after the page has loaded.
Following a successful request, JavaScript technology code may modify the
DOM of the HTML page. The object representation of the XML document that
was retrieved from the ValidateServlet is available to JavaScript technology
code using the req.responseXML, where req is an XMLHttpRequest object. The
DOM APIs provide a means for JavaScript technology to navigate the content
from that document and use that content to modify the DOM of the HTML
page. The string representation of the XML document that was returned may be
accessed by calling req.responseText. Now let's look at how to use the DOM
26
APIs in JavaScript technology by looking at the following XML document
returned from the ValidateServlet.
<message>
valid
</message>
This example is a simple XML fragment that contains the sender of the message
element, which is simply the string valid or invalid. A more advanced sample
may contain more than one message and valid names that might be presented to
the user:
function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
The parseMessages() function will process an XML document retrieved from
the ValidateServlet. This function will call the setMessage() with the value of
the message element to update the HTML DOM.
27
3.6.7 The HTML DOM is updated.
JavaScript technology can gain a reference to any element in the HTML DOM
using a number of APIs. The recommended way to gain a reference to an
element is to call document.getElementById("userIdMessage"), where
"userIdMessage" is the ID attribute of an element appearing in the HTML
document. With a reference to the element, JavaScript technology may now be
used to modify the element's attributes; modify the element's style properties; or
add, remove, or modify child elements.
One common means to change the body content of an element is to set the
innerHTML property on the element as in the following example.
<script type="text/javascript">
...
function setMessage(message) {
var mdiv = document.getElementById("userIdMessage");
if (message == "invalid") {
mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
} else {
mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";
}
}
</script>
28
<body>
<div id="userIdMessage"></div>
</body>
The portions of the HTML page that were affected are re-rendered immediately
following the setting of the innerHTML. If the innerHTML property contains
elements such as <image> or <iframe>, the content specified by those elements
is fetched and rendered as well. Ajax applications such as Google Maps use this
technique of adding image elements using Ajax calls to dynamically build
maps.
The main drawback with this approach is that HTML elements are hardcoded as
strings in the JavaScript technology code. Hardcoding HTML markup inside
JavaScript technology code is not a good practice because it makes the code
difficult to read, maintain, and modify. Consider using the JavaScript
technology DOM APIs to create or modify HTML elements within JavaScript
technology code. Intermixing presentation with JavaScript technology code as
strings will make a page difficult to read and edit.
Another means of modifying the HTML DOM is to dynamically create new
elements and append them as children to a target element as in the following
example.
<script type="text/javascript">
...
function setMessage(message) {
29
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "invalid") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// if the messageBody element has been created simple replace it otherwise
// append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody,
userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
</script>
30
<body>
<div id="userIdMessage"></div>
</body>
The code sample shows how JavaScript technology DOM APIs may be used to
create an element or alter the element programmatically. The support for
JavaScript technology DOM APIs can differ in various browsers, so you must
take care when developing applications.
3.7 ADVANTAGES:
Bandwidth utilization: In many cases, related pages on a website consist of
much content that is common between them. Using traditional methods, that
content would have to be reloaded on every request. However, using Ajax, a
web application can request only the content that needs to be updated, thus
drastically reducing bandwidth usage and load time.
User interface: The use of asynchronous requests allows the client's Web
browser UI to be more interactive and to respond quickly to inputs, and sections
of pages can also be reloaded individually. Users may perceive the application
to be faster or more responsive, even if the application has not changed on the
server side.
More efficient: The use of Ajax can reduce connections to the server, since
scripts and style sheets only have to be requested once.
State can be maintained throughout a Web site. JavaScript variables will persist
because the main container page need not be reloaded.
31
3.8 CHALLENGES FACED WHEN USING AJAX
Complexity: Server-side developers will need to understand that
presentation logic will be required in the HTML client pages as well as in
the server-side logic to generate the XML content needed by the client
HTML pages. HTML page developers need to have a basic understanding of
JavaScript technology to create new Ajax functionality. Other options such
as Project jMaki and Project Dynamic Faces provide a way for Java
developers to better use Ajax functionality without requiring deep
knowledge of JavaScript technology.
Standardization of the XMLHttpRequest object: The XMLHttpRequest
object is not yet part of the JavaScript technology specification, which
means that the behavior may vary depending on the client. It's best to use
libraries such as Dojo, which provides fallback solutions for making Ajax
interactions transparently even on older browsers that do not support the
XMLHttpRequest Object:.
JavaScript technology implementations: Ajax interactions depend heavily
on JavaScript technology, which has subtle differences depending on the
client. See QuirksMode.org for more details on browser-specific differences.
Consider using a library such as Dojo, which addresses many of the
differences.
Debugging: Ajax applications are also difficult to debug because the
processing logic is embedded both in the client and on the server. Browser
add-ons such as Mozilla Firebug have emerged to make debuging easier.
Frameworks such as the Google Web Toolkit have emerged to allow for
client and server round-trip debugging.
32
Securing resources and protecting your data: You can view client-side
JavaScript technology simply by selecting View Source from an Ajax-
enabled HTML page. A poorly designed Ajax-based application could open
itself up to hackers or plagiarism. When providing Ajax services, you should
take care to make sure that those services are made available only to those
intended. See Restricting Access to Your Ajax Services for more
information on protecting your services.
3.9 SOME USES FOR AJAX INTERACTIONS ARE THE FOLLOWING:
Real-time form data validation: Form data such as user IDs, serial
numbers, postal codes, or even special coupon codes that require server-side
validation can be validated in a form before the user submits a form. See
Real time Form Validation for details.
Auto completion: A specific portion of form data such as an email address,
name, or city name may be auto completed as the user types.
Load on demand: Based on a client event, an HTML page can fetch more
data in the background, allowing the browser to load pages more quickly.
Sophisticated user interface controls and effects: Controls such as trees,
menus, data tables, rich text editors, calendars, and progress bars allow for
better user interaction and interaction with HTML pages, generally without
requiring the user to reload the page.
Refreshing data and server push: HTML pages may poll data from a
server for up-to-date data such as scores, stock quotes, weather, or
application-specific data. A client may use Ajax techniques to get a set of
current data without reloading a full page. Polling is not the most efficient
means of ensuring that data on a page is the most current. Emerging
techniques such as Comet are being developed to provide true server-side
33
push over HTTP by keeping a persistent connection between the client and
server. See this blog entry on Comet using Grizzly for more on the
development of server push with Java technology.
Partial submit: An HTML page can submit form data as needed without
requiring a full page refresh.
Mashups: An HTML page can obtain data using a server-side proxy or by
including an external script to mix external data with your application's or
your service's data. For example, you can mix content or data from a third-
party application such as Google Maps with your own application.
Page as an application: Ajax techniques can be made to create single-page
applications that look and feel much like a desktop application. See the
article on the use of Ajax and portlets for more on how you can use portlet
applications today.
34
CHAPTER FOUR
REAL WORLD AJAX APPLICATIONS
Google Live Search
Auto Complete
35
Chat Application
Dragging And Dropping
36
Instant Login Feedback
Google Earth : is a virtual globe, map and geographical information
program that was originally called EarthViewer 3D, and was created
byKeyhole, Inc, a company acquired by Google in 2004. It maps the
Earth by the superimposition of images obtained from satellite
imagery,aerial photography and GIS 3D globe
37
Google Enabled Yahoo!
38
CHAPTER FIVE
5.1 FUTURE:
Big applications of Ajax showed that it is not just a technical issues but it is a
real world application. As the seminar demonstrates earlier, Ajax has the ability
to grow. Ajax applications face some non-technical difficulties. For instance,
the programmers and the developers are not qualified yet to implement this
approach. However, big companies like Microsoft, Sun Microsystems Inc and
TIBCO Software Inc want to use Ajax in their applications . This step will make
Ajax is very popular. Microsoft wants to develop smart client strategy by
implementing Ajax . Microsoft Atlas is an Ajax based programming framework.
5.2 DRAWBACKS:
The ease of use of Ajax-powered interfaces often dramatically increases
the number of user-generated requests to web servers and their back-ends
(databases, or other). This can lead to slower response times and
additional hardware needs to support Ajax-powered interfaces.
Pages dynamically created using successive Ajax requests do not
automatically register themselves with the browser's history engine, so
clicking the browser's "back" button may not return the user to an earlier
state of the Ajax-enabled page, but may instead return them to the last full
page visited before it.
Because most web crawlers do not execute JavaScript code, publicly
indexable web applications should provide an alternative means of
39
accessing the content that would normally be retrieved with Ajax, to
allow search engines to index it.
Any user whose browser does not support Ajax or JavaScript, or simply
has JavaScript disabled, will not be able to use its functionality. Similarly,
devices such as mobile phones, PDAs, and screen readers may not have
support for JavaScript or the XMLHttpRequest object.
If JavaScript is not activated, Ajax can't works. The user must be asked to
set JavaScript from within options of the browser, with the "noscript" tag.
Since data to display are loaded dynamically, they are not part of the
page, and the Keywords inside are not viewed by search engines.
The asynchronous mode may change the page with delays (when the
processing on the Server takes some times), this may be disturbing. The
back button may be deactivated. This may be overcome.
5.3 SUMMARY
Web developers and programmers have to decide if AJAX will really be a
Common used standard in the next decade. Critics say there is nothing new
With AJAX, it’s only a marketing term for old dynamic HTML combined with
JavaScript. Through the common use of broadband internet connections the
more server connections in the background won’t be that slow, other criticism
is security and compatibility aspects because of Microsoft’s Active X standards.
It is not possible to use AJAX in every problem or with every Website but it
is a useful way to gain interactivity and it is easy to learn and extend. Not
everything can be done with AJAX but it is a new challenge and a step further
for disappearing the border between desktop applications and Web applications
and services. With the help of frameworks AJAX is a very powerful technique,
40
No matter if it’s only a term for well established technologies.
5.4 CONCLUSION
We have seen that Ajax interactions can solve many problems. Java technology
provides a good base to develop and deploy Ajax-based applications with APIs
for tying in HTTP processing, databases, web services, XML processing, and
business objects. With a better understanding of this interaction model, today's
applications can become more interactive, providing the end user with a better
experience.
Using Ajax requires that you use the latest browser versions that support the
XMLHttpRequest object needed for Ajax interactions. Using Ajax also requires
a great deal of client-side JavaScript technology and CSS. As an application
architect or developer, you will need to weigh the needs of having a rich
application against browser support, architecture complexity, and developer
training. As the Ajax programming model evolves, existing technologies and
frameworks will make this transition easier.
41
5.5 ABBREVIATIONS AND CONCEPTS
Ajax - Asynchronous Javascript And Xml, a technique used in web application
development.
ASP - Active Server Pages, a web-scripting interface by Microsoft.
ASP.NET - is a web application framework developed and marketed
by Microsoft to allow programmers to build dynamic web sites, web
applications and web services.
Backbase - AJAX framework using HTML, Javascript and CSS. Backbase
used the term Rich Internet Applications to classify its software.
CSS – Cascading Style Sheet is a style sheet language used to describe
the presentation semantics (the look and formatting) of a document written in
a markup language.
DOM – Document Object Model, a way to refer to XML or (X)HTML
elements as objects.
DHTML - Dynamic hypertext markup language, is an umbrella term for a
collection of technologies used together to create interactive and animated web
sites.
DOJO Toolkit - is an open source modular JavaScript library (or more
specifically JavaScript toolkit) designed to ease the rapid development of cross-
platform, JavaScript/Ajax-based applications and web sites.
DWR - a Java open source library.
JSON – Javascript Object Notation.
LAMP - (software bundle), a platform consisting of Linux, Apache, MySQL
and Perl/PHP/Python
42
MochiK - it is a light-weight Javascript library written and maintained by Bob
Ippolito.
PDA - Personal digital assistant, an electronic device which can include some
of the functions of a computer, a cellphone, a music player, and a camera Tag
(metadata) - a keyword or term associated with or assigned to a piece of
information.
PHP - Hypertext Preprocessor is a widely used, general-purpose scripting
language that was originally designed for web development to produce dynamic
web pages.
Rico - a JavaScript library for creating web applications.
Sajax(Simple Ajax Toolkit) - is an open source tool designed to
help websites using the Ajax framework (also known as XMLHttpRequest).
W3C - The World Wide Web Consortium (W3C) is the
main international standards organization for the World Wide Web (abbreviated
WWW or W3).
XHTML - Extensive Hypertext Markup Language
XML – Extensive Markup Language. is a set of rules for encoding documents
in machine-readable form. It is defined in the XML 1.0 Specification produced
by the W3C.
XMLHttpRequest (XHR) - is an API available in web browser scripting
languages such as JavaScript. It is used to send HTTP or HTTPS requests
directly to a web server and load the server response data directly back into the
script.
43
XSLT – Extensible StyleSheet Language Transformations. is
a declarative, XML-based language used for the transformation of XML
documents.
5.6 REFERENCES
1. Christian Wenz. Ajax. Entwicklerpress (2006), 2006.
2. Forschung Urstein. Tourimus Info Gate (TEC/TIGS). http://www.
tourimus-info-gate.at, 2006.
3. Gerhild Maier. Ajax von A bis X. http://krottmaier.cgv.tugraz.at/docs/
seminar/sem2005_ajax.pdf, 2006.
4. Google. Google Gmail. http://gmail.google.com, 2005.
5. Google. Google Suggest. http://www.google.com/webhp?hl=de, 2006.
6. Google. Google Maps. http://maps.google.com, 2006.
7. Microsoft. ATLAS. http://www.microsoft.com/germany/msdn/library/web/
AJAXUndASPNET.mspx?mfr=true, 2006.
8. W3C Community. DOM 3.0. http://www.w3.org/TR/2004/
NOTE-DOM-Level-3-XPath-20040226/, 2006.
9. Paul Miller. Web 2.0: Building the New Library. http://www.ariadne.ac.uk/
issue45/miller/, 2006.
10. Sarissa. Javascript Library. http://swik.net/Sarissa/, 2006.
11. www.wikepedia.com .
12. Simple Ajax Toolkit. SAJAX. http://www.modernmethod.com/sajax/, 2006.
13. The Web Word Processor. Writely. http://www2.writely.com/info/
WritelyOverflowWelcome.htm, 2006.
14. Tim O’Reilly. What is Web 2.0 ? http://www.oreillynet.com/pub/a/oreilly/
tim/news/2005/09/30/what-is-web-20.html (23.05.2006), 2006.
44
Research Paper help
https://www.homeworkping.com/