AJAX - Working and Architecture

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:

1. 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.
2. 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.