|
Ajax, or AJAX, (Asynchronous JavaScript and XML)
is a web development technique used for creating
interactive web applications. The intent is to
make web pages feel more responsive by exchanging
small amounts of data with the server behind the
scenes, so that the entire web page does not have
to be reloaded each time the user requests a change.
This is intended to increase the web page's interactivity,
speed, functionality, and usability.
Ajax is asynchronous in that extra
data is requested from the server and loaded in
the background without interfering with the display
and behaviour of the existing page. JavaScript
is the scripting language in which Ajax function
calls are usually made. Data is retrieved using
the XMLHttpRequest object that is available to
scripting languages run in modern browsers. There
is, however, no requirement that the asynchronous
content is formatted in XML.
Ajax is a cross-platform technique
usable on many different operating systems, computer
architectures, and web browsers as it is based
on open standards such as JavaScript and the DOM.
There are free and open source implementations
of suitable frameworks
Ajax uses a combination of:
XHTML (or HTML) and CSS, for marking
up and styling information.
The DOM accessed with a client-side scripting
language, especially ECMAScript implementations
such as JavaScript and JScript, to dynamically
display and interact with the information presented.
The XMLHttpRequest object is used to exchange
data asynchronously with the web server. In some
Ajax frameworks and in certain situations, an
IFrame object is used instead of the XMLHttpRequest
object to exchange data with the web server, and
in other implementations, dynamically added <script>
tags may be used.
XML is sometimes used as the format for transferring
data between the server and client, although any
format will work, including preformatted HTML,
plain text and JSON. These files may be created
dynamically by some form of server-side scripting.
Like DHTML, LAMP, and SPA, Ajax is not a technology
in itself, but a term that refers to the use of
a group of technologies.
The "core" and defining
element of Ajax is the XMLHttpRequest object,
which gives browsers the ability to make dynamic
and asynchronous data requests without having
to unload and reload a page. Given that XMLHttpRequest
can eliminate the need for page refreshes, other
technologies have become more prominently used
and highlighted with this development approach.
Besides XMLHttpRequest, the use of
DOM, CSS, and JavaScript provides a more-enhanced
"single-page" experience.
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 Realtime Form
Validation for details.
Autocompletion: A specific portion of form data
such as an email address, name, or city name may
be autocompleted 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 push over HTTP by
keeping a persistent connection between the client
and server.
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.
Advantages of Ajax
Bandwidth usage
By generating the HTML locally within the browser,
and only bringing down JavaScript calls and the
actual data, Ajax web pages can appear to load
relatively quickly since the payload coming down
is much smaller in size, and the rest of the layout
does not have to be redrawn on each update. An
example of this technique is a large result set
where multiple pages of data exist. With Ajax,
the HTML of the page (e.g., a table structure
with related TD and TR tags) can be produced locally
in the browser and not brought down with the first
page of the document. In addition to "load
on demand" of contents, some web-based applications
load stubs of event handlers and then load the
functions on the fly. This technique significantly
cuts down the bandwidth consumption for web applications.
Separation of data, format, style,
and function
A less specific benefit of the Ajax approach is
that it tends to encourage programmers to clearly
separate the methods and formats used for the
different aspects of information delivery via
the web. Although Ajax can appear to be a jumble
of languages and techniques, and programmers are
free to adopt and adapt whatever works for them,
they are generally propelled by the development
motive itself to adopt separation among the following:
Raw data or content to be delivered,
which is normally embedded in XML and sometimes
derived from a server-side database.
Format or structure of the webpage, which is almost
always built in HTML or XHTML and is then reflected
and made available to dynamic manipulation in
the DOM.
Style elements of the webpage: everything from
fonts to picture placement are derived by reference
to embedded or referenced CSS.
Functionality of the webpage, which is provided
by a combination of:
Javascript on the client browser (also called
DHTML),
Standard HTTP and XMLHttp or client-to-server
communication, and
Server-side scripting and/or programs using any
suitable language preferred by the programmer
to receive the client's specific requests and
respond appropriately.
Disadvantages
Browser integration
The dynamically created page does not register
itself with the browser history engine, so triggering
the "Back" function of the users' browser
might not bring the desired result.
Developers have implemented various
solutions to this problem. These solutions can
involve using invisible IFRAMEs to invoke changes
that populate the history used by a browser's
back button. Google Maps, for example, performs
searches in an invisible IFRAME and then pulls
results back into an element on the visible web
page. The World Wide Web Consortium (W3C) did
not include an IFRAME element in its XHTML 1.1
Recommendation; the Consortium recommends the
object element instead.
Another issue is that dynamic web
page updates make it difficult for a user to bookmark
a particular state of the application. Solutions
to this problem exist, many of which use the URL
fragment identifier (the portion of a URL after
the '#'[6][7]) to keep track of, and allow users
to return to, the application in a given state.
This is possible because many browsers allow JavaScript
to update the fragment identifier of the URL dynamically,
so that Ajax applications can maintain it as the
user changes the application's state. This solution
also improves back-button support. It is not,
however, a complete solution.
Response-time concerns
Network latency — or the interval between
user request and server response — needs
to be considered carefully during Ajax development.
Without clear feedback to the user,[8] smart preloading
of data and proper handling of the XMLHttpRequest
object, users might experience delays in the interface
of the web application, something which they might
not expect or understand. Additionally, when an
entire page is rendered there is a brief moment
of re-adjustment for the eye when the content
changes. The lack of this re-adjustment with smaller
portions of the screen changing makes the latency
more apparent. The use of visual feedback (such
as throbbers) to alert the user of background
activity and/or preloading of content and data
are often suggested solutions to these latency
issues.
Search engine optimization
Websites that use Ajax to load data which should
be indexed by search engines must be careful to
provide equivalent Sitemaps data at a public,
linked URL that the search engine can read, as
search engines do not generally execute the JavaScript
code required for Ajax functionality. This problem
is not specific to Ajax, as the same issue occurs
with sites that provide dynamic data as a full-page
refresh in response to, say, a form submit (the
general problem is sometimes called the hidden,
or deep web).
Reliance on JavaScript
Ajax relies on JavaScript, which is often implemented
differently by different browsers or versions
of a particular browser. Because of this, sites
that use JavaScript may need to be tested in multiple
browsers to check for compatibility issues. It's
common to see JavaScript code written twice, one
part for IE, another part for Mozilla compatibles,
although this is less true with the release of
IE7 and with the now-common use of JavaScript
abstraction libraries like the Prototype JavaScript
Framework. Such libraries abstract browser-specific
differences from the web developer.
The level of IDE support for JavaScript
used to be poor, although it is changing with
more wide-spread use of tools like firebug, IE
Developer Toolbar and Venkman.
An issue also arises if the user has
switched off JavaScript support in the browser,
thus disabling the functionality built into the
page.
Web analytics
Many web analytics solutions are based on the
paradigm of a new page being loaded whenever new
or updated content is displayed to the user, or
to track a series of steps in a process such as
a check-out. Since Ajax alters this process, care
must be taken to account for how to instrument
a page or a portion of a page so that it can be
accurately tracked. Analytics systems which allow
for the tracking of events other than a simple
page view, such as the click of a button or link,
are the ones most likely to be able to accommodate
a site which heavily utilizes Ajax.
Accessibility
Non-Ajax users would ideally continue to load
and manipulate the whole page as a fallback, enabling
the developers to preserve the experience of users
in non-Ajax environments (including all relevant
accessibility concerns) while giving those with
capable browsers a much more responsive experience.
For this reason it is advised to first develop
a full application without Ajax, and implement
Ajax enhancements as an addition only. The same
counts for javascript in general, as this can
be disabled in most browsers, thereby hindering
a user in websites that rely on these technologies.
|
