AJAX – Asynchronous JavaScript and
XML
Working and Architecture
AJAX is a technique for creating fast and dynamic web pages with
the help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS
for presentation, along with Document Object Model and JavaScript for dynamic
content display. XML is commonly used as the format for receiving server data,
although any format, including plain text, can be used.
Ajax makes it possible to update parts of a web page, without
reloading the whole page. AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the scenes.
Usually in web applications, the user enters the data into
the form and then clicks on the submit button to submit the request / data to
the server. Server processes the request / data and returns the result in new
page (by reloading the whole page). This process is inefficient and time
consuming.
Example in user registration after entering all data, the
server checks the availability of the user name and if not available, reloads
the whole page and user has to retype all information with new user name.
Alternatively, with the help of Ajax you can tune your application to check the
availability of the user name without refreshing the whole page.
Benefits of Ajax
1. AJAX
is a web browser technology independent of web server software
2. Ajax
can be used for creating rich, web-based applications that look and works like
a desktop application
3. Ajax
is based on JavaScript and existing technologies like XML, CSS, DHTML. etc. and hence is very easy to learn
4. Ajax
can be used to develop web applications that can update the page data
continuously without refreshing the whole page
Technologies used in
AJAX include:
- XML,
DOM and CSS – In AJAX, data is exchanged with the
help of XML files. Alternate techniques like CSV, JSON etc. are also
available. Object oriented representation of XML & HTML documents, and
provides an API for changing the content, structure and style. In AJAX it
is very useful to use CSS. Example – in a registration form use CSS to
change the color on validation.
- XMLHttpRequest – Unlike other usual web pages,
with AJAX, JavaScript communicates with server using JavaScript's XMLHttpRequest object. With the help of XMLHttpRequest a web page can send request and get a
response from the server without refreshing the page. This object is
supported by all the leading web browsers.
3.
JavaScript
– JavaScript is the pivot point of AJAX. IT performs the following role in
AJAX:
1.
Handling
XMLHttpRequest made HTTP requests
2.
Using
DOM, XSLT or any other method, parsing the response come from the server.
3.
Presenting
the response from server to user interface.
AJAX Client – Server Architecture
AJAX
Working
When user first visits the page, the Ajax
engine is initialized and loaded. From that point of time user interacts with
Ajax engine to interact with the web server. The Ajax engine operates
asynchronously while sending the request to the server and receiving the
response from server.
Ajax life cycle within the web browser can be
divided into following stages:
1.
User
Visit to the page: User visits the URL by typing URL in browser or
clicking a link from some other page.
2.
Initialization
of Ajax engine: When a page is initially loaded, the Ajax engine is also
initialized and it continuously refreshes the page content without reloading
the whole page.
3.
Event
Processing Loop:
a.
Browser
event may instruct the Ajax engine to send request to server and receive the response
data
b.
Server
response - Ajax engine receives the response from the server. Then it calls the
JavaScript call back functions
c.
Browser
update – JavaScript request call back functions is used to update the browser.
DHTML and CSS is used to update the browser display.
