Published:
06 Aug 2007
|
Abstract
In this article Rajdeep provides a brief overview of Asynchronous JavaScript and XML (AJAX), its features, benefits and applicability in web application development. |
|
by Rajdeep Mukherjee
Feedback
|
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days):
40421/
61
|
|
|
Introduction |
AJAX promises to be the technology of choice for building
fast and responsive web applications. AJAX was primarily designed and developed
with the intent of addressing the challenges faced for developing high
performance web applications. Although Ajax is independent of the technology
with which it is implemented, it can be implemented for web applications using
Java, PHP or Microsoft .NET.
|
Why Ajax? |
Web application developers used to face immense challenges
on developing a fast and responsive User Interface. These applications
generally used to provide slow response time and culminate in a
not-so-acceptable piece of work. AJAX was fundamentally designed and developed
with the objective of providing a fast and responsive user interface and in turn
addressed these challenges. The basic objective of AJAX is to make more
responsive web pages by exchanging minimal data with the backend server so that
the web page as a whole need not be reloaded every time the user requests a
change.
|
An overview of AJAX |
AJAX stands for "Asynchronous JavaScript and XML."
It is a technology that facilitates the development of responsive web
applications. AJAX function calls are made of Java Script, the popular client
end programming language. The data retrieved through AJAX is formatted using
XML. The asynchronous behavior of AJAX goes with the fact that loading does not
get in the way of normal page loading.
AJAX is a "cross-platform" technology and can be
used across various operating systems, computer architectures and different web
browsers as it is based on XML and JavaScript that are open standards. It also
supports open source implementations of other technologies. AJAX was used to
implant great interactive features in Apple’s website.
AJAX is a technique for developing faster, better and more
interactive web applications. In AJAX, you can have JavaScript communicate
directly with the server, using the JavaScript "XMLHttpRequest"
object. Using this object, the JavaScript can exchange data with a web server
without reloading the pages. AJAX uses HTTP requests between the web server and
the browser, permitting web pages to request small bits of information from the
server against whole pages.
|
History of AJAX |
The transition of technology with time, culminating into the
evolution of AJAX can be discussed as follows.
During the initial days of browser innovation, Netscape
added a feature known as "LiveScript" that permitted the software
developers to embed small scripts in web pages so that they can continue doing
things even after these are downloaded.
LiveScript became JavaScript, a more powerful scripting tool.
This again led to a new technology called as Dynamic HTML (DHTML). DHTML
allowed making things soar around the screen and get changed in response to
user inputs. DHTML implementations did not have much weight and was cumbersome
too.
Netscape presented another new technique called Dynamic XML
just before the time when web application development almost died out. Within
this period Microsoft had made available a function called
"XMLHttpRequest" to Internet Explorer version 5. This was followed by
Mozilla and this function stayed unused for a long time awaiting the
development world to take its best advantage and usability.
XMLHttpRequest permitted the JavaScript embedded within the
web pages to fetch more data. This was something new as prior to this, getting
more data would require another web page to be sent. The JavaScript within a
web page was unable to talk to the external world. This has been changed by
XMLHttpRequest as it is permitted to fetch more data from server as and when
required.
This new technique was named AJAX (acronym for “Asynchronous
JavaScript and XML”) by Jesse James Garrett of “Adaptive Path” during February
2005. The technique became popular within a very short time. JavaScript toolkit
became more effective in making this development easier. And thereafter, AJAX became a buzzword in the web application development.
|
The AJAX Technology Components |
AJAX is not a technology by itself but is a combination of a
group of technologies (similar to DHTML, SPA, etc). The nucleus of AJAX is the XMLHttpRequest object that enables different web browsers to make dynamic and
asynchronous data requests without reloading the page. AJAX is comprised of the
following:
·
HTML or XHTML, and CSS - for information on style and mark-up
·
XMLHttpRequest object – Used to interchange data with the web server
in an asynchronous mode; in some cases and for some AJAX frameworks, an IFrame
object is used instead of XMLHttpRequest object for exchanging data with the
web server.
·
XML is many times used for transferring data between the server
and the client. Other formats will also work (for example: JSON, plain text,
pre-formatted HTML).
·
The DOM is being accessed by client side scripting language like
JavaScript to display dynamically and interact with the information being
presented.
|
Features of AJAX |
AJAX provides a lot of powerful features.
·
Minimizing round trips to the web server
·
Web page updates in real time
·
Language independence
·
Rendering of web pages in a faster pace
·
Reduced consumption of server resources
In the AJAX based web application development, the server
receives the requests only for the data that is required. The entire web page
is not submitted to the web server at one go.
AJAX makes use of XML, XSLT, XMLHttpRequest, JavaScript,
HTML, and DHTML technologies.
|
Available ASP.NET AJAX Frameworks |
|
Benefits and Drawbacks of Ajax |
This section outlines the benefits and drawbacks of AJAX.
Benefits
Low usage of bandwidth – AJAX facilitates faster web page
renderings by reducing the web server hits. AJAX pages can load much faster
when the payload coming down is lesser in size. This is achieved by generating
the HTML locally within the browser and also the JavaScript calls and actual
data is brought down. A large result set having data from multiple pages can be
a good example in this regard. AJAX allows loading the HTML content of the page
(with table structures and its tags) locally in the web browser. Additionally,
some web applications load stubs of event handlers and subsequently “load the
functions on the fly.” All of these help in managing the optimal consumption of
bandwidth for applications having complex functions and logic.
Usage of XMLHttpRequest – It is able to make requests to
pages not set up for AJAX, can set or get all HTTP headers, can make HTTP
requests using any type (GET, POST, PROPFIND, and so on), supports full control
over POST requests and allows for any type of data encoding.
Drawbacks
Response Time – AJAX based development should take care of
the response time between client requests and server response as it normally
gets delayed due to the fact that smart preloading of data and proper handling
of XMLHttpRequest object may cause delay in lining up with the web application.
Back button in the web browser does not work – In AJAX based
development, the pages that are created dynamically do not get stored into the
browser history and the “Back” button in the user’s browser will not work in
this case.
JavaScript Dependency – AJAX based development depends on
JavaScript to a great extent. JavaScript is implemented differently in different
web browsers and proper caution needs to be taken to ensure that the web pages
behave the same in different browsers.
|
Suggested Readings |
|
Conclusion |
AJAX promises to be the technology of choice for building
fast and responsive web applications. You can use Ajax in ASP.NET and even in
Java since it is language and platform independent. AJAX has introduced
significant changes in the current day’s web application development processes
and methodologies. We expect more and more enhancements on this technology in
the near future that would open various avenues and make web programming even
more flexible and effective.
|
|
|
|
User Comments
Title:
Great
Name:
Debdutta Chakraborty
Date:
2007-08-08 8:55:17 AM
Comment:
This is a nice and wonderful article for those who are new in AJAX technology. Great references with short yet enough description gives the core idea on this technology. I liked the suggested reading section.
Thanks
|
Title:
wonderful
Name:
Akram
Date:
2007-08-08 4:35:08 AM
Comment:
Its very useful information for those who making dynamic web applicaton .
|
|
|
|