Sunday, August 26, 2012

AJAX

What is Ajax?

AJAX
=A+JA+X
=Asynchronous +JavaScript+XML
= Asynchronous + (JavaScript+XML)
=Group of interrelated web development techniques to create asynchronous web application

Definition
AJAX is group of technologies which implements web application that communicates with the server in the background without interfering with the current state of page.

UI Shifting

                             
Why Ajax?

When we use HTML for web application each client action required that the page be re-loaded from the server. In this process all page content disappears then reappears. Each time a page is reloaded due to a partial change, all of the content must be re-sent instead of only the changed information. If we want to display some specific part of the page, we have to reload the page. This leads additional load on the server and use excessive bandwidth.

To avoid this complexity, a new technology came into web picture that implements the web application in the background without interfering the exiting states of page.

Component of Ajax
Ajax is having following components
1. JavaScript
2. HTML and CSS
3. XML
4. DOM
5. XmlHttpRequest object

Here HTML and CSS is used as markup and style information.DOM is used to display dynamically and allow user to interact with the information.DOM is used with JavaScript. JavaScript and XmlHttpRequest object provide a method for exchanging the data asynchronously between client and server to avoid full page reload. JavaScript brings these technologies together.

What is postback?
When a client sends a request to a server, the server sends a response back to the client. This entire process of request and response is called postback. There are two types of postback.


Synchronous Postback
This is normal postback. Here the entire content of webpage is sent to the server and in response the server sends the required response to the client.


Asynchronous Postback
Asynchronous means we make a request to a server and perform other actions while the server is processing your request -- and on the arrival of the response required actions is performed. Here instead of sending entire information to the server, only the specific information is sent to the server as a request. So only a particular portion of webpage is updated with the new information and rest of the page remains same. This is called partial update. In this process web page uses XmlHttpRequest object to send the request to the server.

Architecture of AJAX

When a client sends initial request to server, in response page is loaded with AJAX Engine. Then after client send request to AJAX Engine through JavaScript call and AJAX Engine forward request to the server through XmlHttpRequest object. The server send response as Xml response and AJAX Engine parse the response and sends to the client as HttpResponse.Here AJAX Engine is only JavaScript function which uses XmlHttpRequest to sends the request to the server.


No comments:

Copyright © Codingnodes,2014.All Rights Reserved.