Web Design & Development Guide
Document Update Markup Language
Comparison between AJAX and Flex
Ajax, or AJAX, 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
asynchronous in that loading does not interfere with normal page loading.
Data retrieved using the technique is commonly formatted using XML, as reflected in
the naming of the
object from which Ajax is derived.
Ajax is a cross-platform technique usable on many different operating
systems, computer architectures, and Web browsers as it is based on open
Ajax uses a combination of:
- XHTML (or HTML) and
CSS, for marking up and styling information.
DOM accessed with a client-side scripting language, especially ECMAScript
- 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
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 XMLHttpRequest can eliminate
the need for page refreshes, other technologies have become more prominently
used and highlighted with this development approach.
more-enhanced "single-page" experience.
The first use of the term in public was by
Jesse James Garrett in February 2005.
Garrett thought of the term when he realized the need for a shorthand term to
represent the suite of technologies he was proposing to a client.
Although the term Ajax was coined in 2005, most of the technologies
that enable Ajax started a decade earlier with
Microsoft's initiatives in developing Remote Scripting. Referring to the idea as
Inner-Browsing, Netscape Evangelism published an article in 2003 which presented
ideas for implementing models in which "all navigation occurs within a single
page, as in a typical application interface." Techniques for the asynchronous
loading of content on an existing Web page without requiring a full reload date
back as far as the IFRAME element type (introduced in Internet Explorer 3 in
1996) and the LAYER element type (introduced in Netscape 4 in 1997, abandoned
during early development of Mozilla). Both element types had a src attribute
that manipulated the parent page, Ajax-like effects could be attained. This set
of client-side technologies was usually grouped together under the generic term
of DHTML. Macromedia's Flash could also, from version 4, load XML and CSV files from a remote server without requiring a browser to be refreshed.
Microsoft's Remote Scripting (MSRS), introduced in 1998, acted as a more
elegant replacement for these techniques, with data being pulled in by a Java
technique worked on both Internet Explorer version 4 and Netscape Navigator
version 4 onwards. Microsoft then created the XMLHttpRequest object in Internet
Explorer version 5 and first took advantage of these techniques using
XMLHttpRequest in Outlook Web Access supplied with the Microsoft Exchange Server 2000 release.
The Web development community, first collaborating via the
and later through blog aggregation, subsequently developed a range of techniques
for remote scripting to enable consistent results across different browsers. In
2002, a user-community modification
to Microsoft Remote Scripting was made to replace the Java applet with
Remote Scripting Frameworks such as ARSCIF
surfaced in 2003 not long before Microsoft introduced Callbacks in
In addition, the World Wide Web Consortium has several Recommendations that
also allow for dynamic communication between a server and user agent, though few
of them are well supported. These would include:
- The object element defined in HTML 4 for embedding arbitrary content
types into documents, (replaces inline frames under XHTML 1.1)
- The Document Object Model (DOM) Level 3 Load and Save Specification
The core justification for Ajax style programming is to overcome the page
loading requirements of HTML/HTTP-mediated web pages. Ajax creates the necessary
initial conditions for the evolution of complex, intuitive, dynamic,
data-centric user interfaces in web pages—the realization of that goal is still
a work in progress.
Web pages, unlike native applications, are
loosely coupled, meaning that the data they display are not tightly bound to
data sources and must be first marshaled (set out in proper order) into an HTML
page format before they can be presented to a user agent on the client machine. For this reason, web pages have to be re-loaded each time
a user needs to view different datasets. By using the XMLHttpRequest object to
request and return data without a re-load, a programmer by-passes this
requirement and makes the loosely coupled web page behave much like a tightly
coupled application, but with a more variable lag time for the data to pass
through a longer "wire" to the remote web browser.
For example, in a classic desktop application, a programmer has the choice of
populating a tree view control with all the data needed when the form initially loads, or with just
the top-most level of data—which would load more quickly, especially when the
dataset is very large. In the second case, the application would fetch
additional data into the tree control depending on which item the user selects.
This functionality is difficult to achieve in a web page without Ajax. To update
the tree based on a user's selection would require the entire page to re-load,
leading to a very jerky, non-intuitive feel for the web user who is browsing the
data in the tree.
Advantages of Ajax
By generating the HTML locally within the browser, and only bringing down
relatively quickly since the payload coming down is much smaller in size. 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 that have
complex logic and functionality.
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
- 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
- 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:
- 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.
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
Another issue is that dynamic web page updates make it difficult for a user
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 '#')
to keep track of, and allow users to return to, the application in a given
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, however, not a complete solution.
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, 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
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
different browsers or versions of a particular browser. Because of this, sites
one part for IE, another part for Mozilla compatibles, although this is less
differences from the web developer.
with more wide-spread use of tools like firebug, IE Developer Toolbar and
browser, thus disabling the functionality built into the page.
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
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.
Web development software
Web security exploits