Transcript

1.
Responsive Web Applications Using Ajax
Matthew J. Travi
Abstract II. Overview of Ajax
This paper is a survey of the Ajax Ajax presents a new web application
methodology and how it can be used to model which enables the development of
improve the user experience for web responsive web applications. When the internet
applications. The Ajax web application model was first developed, it was intended to provide
effectively removes the breaks in workflow a means for many users to share documents
from the user interface through intelligent use without much consideration for full
of only existing web technologies. This applications. The process of loading the entire
methodology can be applied to improve page was very logical when a user wanted to
existing applications or used to create powerful view a new document. However, web
new applications. applications have continued to follow this
model as the internet has evolved beyond
I. Introduction
sharing documents.
The web has become an important
As web developers create more
platform for application development. With its
complicated applications, the web browser
worldwide reach, the internet has been
cannot respond to user interactions fast enough
recognized as a means to deploy applications to
using the traditional web model. The
a large number of users without actually
traditional web model requires the server to
installing the applications on the users’
respond to every request for updates with a
computers. A major drawback of web
complete web page, including the HTML
applications has been the speed and
markup and any images, stylesheets,
responsiveness of the interface used to interact
JavaScript, or other items that are required for
with these applications. Ajax has recently
that page. When a full page refresh occurs with
become popular as a means to improve the user
each user interaction, the workflow is
experience of web applications by removing
interrupted as shown in Figure 1 and the user
the requirement of loading a new page when
wastes time waiting for the numerous pages to
accessing data on the web server. Web
load. In order to make the web interface more
applications have been an effective means of
responsive, the web application model must be
accomplishing tasks for some time, but the
modified so that it no longer requires the entire
improvements added by Ajax allow users to be
page to be downloaded with every update.
more productive and can make the interfaces
friendly enough to use for long periods of time.
Section II of this paper describes the
technologies used in the Ajax methodology and
shows how a more responsive user interface
can be achieved with the use of Ajax. It is
assumed that the reader has a basic
understanding of these technologies; therefore,
implementation details of each will not be
described. Section III highlights some areas
that developers and design teams should be
aware of that can be different than traditional
web applications. Knowledge of these issues Figure 1: A sequence diagram of the traditional web
can help to prevent unexpected problems in the application model with breaks in the workflow [1]
development of Ajax applications.

2.
Asynchronous JavaScript and XML, or
Ajax, is a new methodology for making the
web interface more responsive. Ajax is not a
new technology, but rather a new technique
named by Jesse James Garrett of Adaptive Path
[1] that uses existing technologies already in
use in traditional web applications. Using these
technologies together in a specified manner
allows Ajax to request new information from
the server without interrupting the interface
presented to the user in the browser. The
technologies used by this methodology are:
• Standard Extensible Hyper-text Markup
Language (HTML) and Cascading Style
Sheets (CSS) to build the user interface
(UI) Figure 2: A comparison of the traditional and Ajax
web application models showing the additional layer in
• A client-side scripting language, such as the Ajax model [1]
JavaScript, to create what can be
referred to as an Ajax engine, which The Ajax methodology coordinates the
becomes a new layer between the UI technologies in such a way that a new layer of
and the server abstraction, shown in Figure 2, is added to the
• An XMLHttpRequest object to expose client side of the traditional web application
HTTP transport functionality to the model. Rather than generating a Hyper-text
Ajax engine Transfer Protocol (HTTP) request for each
interaction with the user interface, a JavaScript
• A standard data format, such as XML, call is made to the Ajax Engine to invoke a
to delimit the data that is returned from specified JavaScript function. This function
the server since the response body is uses the XMLHttpRequest object to make a
sent as a single text string request to the server if necessary and alters the
Although JavaScript and XML are user interface with the updated data by
commonly used in Ajax applications, other manipulating the Document Object Model
scripting languages and data formats can be (DOM).
used to accomplish the same tasks. Because of The DOM is an Object Oriented
this fact, Garrett explains that Ajax is not meant representation of the HTML markup in a
to be an acronym, but rather a name that hierarchical tree structure. Document elements
establishes a common vocabulary for the can be directly accessed through the DOM and
technique [2]. JavaScript and XML may be manipulated as needed with JavaScript. Once
used throughout this document to refer to the DOM has been updated, the browser
components of Ajax rather than a more general renders these changes to present them to the
term; however, these specific languages are not user.
required to implement this methodology.
Manipulating the DOM to modify the user
interface was common even before Ajax was
practiced. The process is known as Dynamic
HTML (DHTML) and is commonly used to
create such things as drop down menus and
sortable tables. The major distinguishing factor

3.
between DHTML and Ajax is the fact that easily, but returning multiple values in a single
server communication is possible with Ajax. response becomes slightly more complicated.
A standard data format must be used to delimit
Ajax requests are sent to the server over
multiple variable names and values from each
the standard HTTP transport. An
other. Although XML is part of the Ajax name
XMLHttpRequest object is used to expose the
and is very commonly used in Ajax, it is by no
JavaScript function to this functionality, and
means the only data format that can be used to
the server processes the request as a standard
send response values in an Ajax application.
HTTP request. Since this request can be
The format can be as simple as a pipe-delimited
asynchronous and the Ajax engine is handling
string as long as the client side is set up to parse
the request rather than the browser, the user
the string correctly.
interface is not interrupted as shown in Figure
3, and the user can continue working. JavaScript Object Notation (JSON) is
another popular data format in use in many
Ajax applications. This format is understood
by JavaScript as a standard array. This saves
processing time on the client side because there
is no parsing to be done. This format is also
slightly leaner than XML, so it can be sent
between the server and the client faster than
XML.
Since the Ajax engine does not wait for the
response from the server, something must be
done to inform the engine that the response has
arrived. When creating the Ajax request, a
callback function is assigned to handle the
Figure 3: Sequence diagram of the Ajax web HTTP response once it is returned from the
application model showing the continuous workflow server. This function is called when the ready
and asynchronous nature of this methodology [1] state of the response changes and is responsible
for parsing the response body and updating the
Once the server has received the request UI appropriately.
from the Ajax engine, the request is processed
as a standard HTTP request. Server software is Since there are multiple changes in
independent of the Ajax methodology, so Java, ready-state before the response is completely
PHP, etc. can all be used with as much success downloaded, the callback function must check
as with a standard web application. The to see that the ready state is 4 (Completed).
distinguishing factor with the server side of an The ready states are:
Ajax application is the body of the HTTP
• 0: Uninitialized
response. An Ajax application needs only the
requested data to be returned, without wrapping • 1: Loading
it in an HTML document. This can make the
• 2: Loaded
response body leaner, reducing the load on the
server and allowing better performance. • 3: Interactive
With only data in the response body, care • 4: Completed
must be taken so that the data is usable once it
Once the ready state has been verified as
has been downloaded to the client. The
complete, the callback function should also
response body contains only a single text
check the status of the response from the
string. A single value can be returned quite
server. A HTTP status code of “200” (OK)

4.
means that the request was successfully against the World Wide Web Consortium
processed and did not encounter a server error. (W3C) standards. Since these are not compiled
With this status, the function can continue on files, the validators made available by the W3C
with the processing necessary to parse the data can point out the syntax errors that would
and update the user interface correctly. It is a normally be caught by a compile time debugger
good practice to also alert the user in some way in a compiled language. Although the web
if a status other than 200 was received. The page may appear to render correctly, there can
function can check for other specific status be errors that are easily corrected by validation
codes and handle each individually or together but could lead to problems later if not
with a generic alert. It is up to the developer to corrected.
determine what is most appropriate for the Beyond basic rendering of the web page in
application. the browser, there can be differences in how the
Many of the low level details of common JavaScript code is executed. This adds
Ajax functions can be abstracted from the additional testing time to the project to ensure
developers through the use of one of the many expected results from the application. In
frameworks that have been developed. It is addition, it is possible for users to disable
beyond the scope of this document to give JavaScript within their browser even though the
instruction on the use of these frameworks, but current major browsers have JavaScript support
a few that are worth looking into further are enabled by default. It is the responsibility of
Prototype [3], Rico [4], Dojo [5], and Direct the development team to ensure that the Ajax
Web Remoting (DWR) [6]. DWR could be application is degradable to a version that does
especially useful with Deere’s extensive use of not require the use of the scripting language in
Java Servlets because it provides Remote these cases. If an alternate version is not
Procedure Call (RPC) functionality to directly presented in these cases, the users are not
access methods in the servlet from the alerted that the JavaScript portion of the Ajax
JavaScript on the client side. application has been disabled in their browser,
but are instead simply presented with a broken
III. Concerns of Ajax Use
application.
There is more to writing Ajax applications
On a similar note, it is very important to
than understanding the methodology. There are
leave a space between the opening and closing
several issues that a development team must
<script> tags in the HTML file that
consider. Ajax can be incrementally added to
existing applications or built from scratch, and references a script file with the src attribute.
each approach has its advantages and problem Without this space, some browsers will not
areas. even load the JavaScript file. Tracking down
the error in that browser can be quite difficult
As with all web applications, the browser without knowledge of this issue [7].
acts as an interpreter for the code sent from the
server. Since not all browsers interpret the The browser introduces other unexpected
code in the same way, web applications are less behavior that may not be evident until the first
predictable than a precompiled application that attempts are made to use the newly developed
has been installed on the client machine. Ajax Ajax application. Issues such as client-side
applications require more of the logic to caching and back button functionality require
execute on the client side, making this a much great care to ensure expected results.
bigger concern. Neglecting issues like these will cause the user
to become frustrated when the UI does not
The first step to accomplish cross-browser respond to his action as expect.
compatibility is to ensure that the HTML and
CSS files used for each page are validated

5.
Web browsers cache the GET requests current browser is used. This can even make
made with the XMLHttpRequest object [8]. application history more useful in properly
Because of this attempt by the browser to developed Ajax applications because the
conserve repetitive downloads, developers must developer can choose exactly when history
take additional steps to ensure that new entries are made.
information is returned from the server with Code management becomes a big issue as
each request to the same URL. There are two Ajax applications are developed. One of the
approaches that effectively correct this issue. nicest things about Ajax functionality is that it
One requires action on the server side, and the can easily be added to existing web
other requires action on the client side. The applications. As additional Ajax features are
server side approach involves setting the cache added, however, the client-side code becomes
control headers, such as “Cache-Control” and more complex and better organization is
“Pragma,” to require the browser to send a new warranted. The authors of [11] give a good
request to the server each time. The client side explanation of how client-side code can be
approach adds a URL variable to the request refactored and how design patterns should be
that is changed with each request so that the
applied to make the client-side code more
browser interprets the request as going to a new maintainable and reusable.
URL each time.
IV. Related Work
History functionality is handled by the
browser by making an entry to a history file Another web application model, proposed
each time that it loads a new web page. Since by Alex Russell, is called Comet and further
an Ajax application does not need to load a new improves the updating abilities of the user
page each time that it requests new data from interface of web applications [12]. An
the server, the URL does not change and the application using Comet maintains the
browser’s history is not updated. Therefore, connection between the server and client,
when the user attempts to use the browser’s allowing updates to be pushed to the user
back button to return to a previous state, they immediately rather than waiting for a request
are instead taken back to a point before the from the user for these updates. This can be
page containing the Ajax application was especially useful in applications that use
originally loaded. polling to request updates from the server in
close to real-time.
There are various techniques to improve
the functionality of the back button with Ajax V. Conclusion
applications. Each technique only works with Ajax is a methodology that improves the
certain browsers, however. Hidden inline responsiveness of web applications while only
frames can be useful in certain browsers, while requiring a standard, JavaScript enabled
an anchor hash or fragment identifier (#) works browser. Ajax applications can be easily
well with another set of browsers. Complicated created from existing web applications.
solutions like this can be difficult to accomplish Although building from the ground up can
for all situations and can be simplified greatly produce a powerful Ajax application, it is not
with the various frameworks that have already necessary to rebuild an existing application to
been developed. One open source solution add Ajax functionality. With the correct
suggested in [9] is a JavaScript library named planning and management, Ajax can be a very
“Really Simple History” (RSH) [10]. This effective method for web development,
framework returns both back button providing responsive and friendly interfaces to
functionality and bookmarking to the many users of the application.
states of an Ajax application. The developer
simply instructs the RSH framework to add a
history entry and the best method for the