AJAX : Asynchronous JavaScript And XML

By: Mithun G Hegde

So what is Ajax ?
A programming language no A new technology not exactly So what else ?
AJAX is not a new programming language but a new way to use the existing standards

 AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page. In an ajax web application, these are two variations from the traditional web interaction. First, the communications from the browser to the server is asynchronous; that is, the browser need not wait for the server to respond, the browser user can continue whatever he or she was doing while the server finds and transmit the requested document and the browser renders the new document. Second, the document provided by the server usually is only a relatively small part of the displayed document, and therefore it takes less time to be transmitted and rendered. These two changes can result in much faster interaction between the browser and the server.

Technologies Used
AJAX uses:
Javascript (for altering the page) XML (for information exchange) ASP or JSP (server side)

Google Suggest

Google Map

Simple Processing
AJAX is based on Javascript, and the main functionality is to access the web server inside the Javascript code. We access to the server using special objects; we send data and retrieve data. When user initiates an event, a javascript function is called which accesses server using the objects. The received information is shown to the user by means of the Javascripts functions.

The Core Components :

HTML & CSS - for presenting. JavaScript - for local processing. Document Object Model (DOM) to access data inside the page or to access elements of an XML file on the server. XMLHttpRequest object to read/send data to the server asynchronously.

The process cycle

Classic and AJAX Web Application model

The XMLHttpRequest object

Allows interacting with the servers Attributes readystate: The code successively changes value from 0 to 4 that means for ready. Status: 200 is ok and 404 if the page is not found. responseText: Holds loaded data as a string of character. responseXml: Holds an XML loaded file, DOM method allows to extract data

Contd
onreadystatechange:
Property that takes a function as value that is invoked when the readystatechange event is dispatched.

Methods:
open(mode,url,boolean) mode: type of request, GET or POST url: the location of the file, with path. boolean: true(asynchronous)/false(synchronous) optionally, a login and password may be added to arguments. Send(string): Null for a GET command.

The readyState values

State 0 1 2 3 4 Description uninitialized loading loaded interactive complete

A few status values

Status 200 Description OK Bad Request File Not Found Internal Server Error HTTP version not supported

400
404 500 505

 Building a request, step by step

First step: create an instance This is just a classical instance of class, but two options must be tried, for browser compatibility. if (window.XMLHttpRequest) // Object of the current windows { xhr = new XMLHttpRequest(); // Firefox, Safari, ... } else if (window.ActiveXObject) // ActiveX version { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer } Or exceptions may be used instead:

Contd..
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Trying Internet Explorer } catch(e) // Failed { xhr = new XMLHttpRequest(); // Other browsers. }

 Second step: wait for the response The response and further processing are included in a function and the return of the function will be assigned to the onreadystatechange attribute of the object previously created. xhr.onreadystatechange = function() { // instructions to process the response };

 Third step: make the request itself Two methods of XMLHttpRequest are used: open: command GET or POST, URL of the document, true for asynchronous. send: with POST only, the data to send to the server. The request below read a document on the server. xhr.open('GET', 'http://www.xul.fr/somefile.xml', true); xhr.send(null);

if (xhr.readyState == 4) { // Received, OK } else { // Wait... }

Example: Get the text

<html> <head> <script> function submitForm() { var xhr; try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2) { try { xhr = new XMLHttpRequest(); } catch (e3) { xhr = false;

}}} xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) document.ajax.dyn="Received:" + xhr.responseText; else document.ajax.dyn="Error code " + xhr.status; } }; xhr.open(GET, "data.txt", true); xhr.send(null); } </script> </head> <body> <FORM method="POST" name="ajax" action=""> <INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()"> <INPUT type="text" name="dyn" value=""> </FORM> </body> </html>

HOW AJAX IS DIFFERENT

 Benefits of using Ajax

Helps to build fast, dynamic websites. Bandwidth utilization: In many cases, related pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time. User interface: The use of asynchronous requests allows the client's Web browser UI to be more interactive and to respond quickly to inputs, and sections of pages can also be reloaded individually. Users may perceive the application to be faster or more responsive, even if the application has not changed on the server side.

Contd..
More efficient: The use of Ajax can reduce connections to the server, since scripts and style sheets only have to be requested once. State can be maintained throughout a Web site. JavaScript variables will persist because the main container page need not be reloaded.

 A Few Drawbacks
If JavaScript is not activated, Ajax can't works. The user must be asked to set JavaScript from within options of the browser. Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines.
The asynchronous mode may change the page with delays (when the processing on the server takes more time), this may be disturbing. The back button may be deactivated.

CONCLUSION
Internet-applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. However, Internetapplications are not always as "rich" and user-friendly as traditional desktop applications. AJAX applications are browserindependent and platform-independent. With AJAX, Internet applications can be made richer and more user-friendly. AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. New applications use Ajax will be very popular.

ThanQ..

Any ?????