Wednesday, April 29, 2009

The characteristics of Ajax applications

The characteristics of Ajax applications

The underlying technologies behind classic Web applications (HTML) are pretty simple and straightforward. This simplicity, however, comes with a certain cost. Classic web pages has very little intelligence and lack of dynamic and interactive behaviors.
Ajax, Asynchronous JavaScript and XML, changes the landscape. Ajax is not a specific
product or technology. Instead, it refers to a set of technologies and techniques that allow web pages be interactive like desktop applications. Different from classic HTML web applications, Ajax applications have the following characteristics.

The Web Page as Application
Ajax blurs the boundary between web pages and applications. In classic web applications, a web page is an HTML document that can be rendered by a browser for information display purpose. It has limited or often zero intelligence on its own.
In an Ajax application, the HTML page the server sends to the browser includes code that allows the page to be a lot "smarter". This code runs in the background acting as the "brain" while the HTML document is rendered in the browser window. The code can detect events such as key strokes or mouse clicks and perform actions responding to these events, without making a round trip to the server.
Through Ajax, a web page feels like a desktop application. It responds fast, almost
immediately to user actions, without full page refresh. It can further continuously
update the page by asynchronously fetching data from the server in the background,
achieving desktop application experience.

Servers are For Data, Not PagesAjax changes the role of web pages from being merely HTML documents into "applications" that have both HTML markup as well as code. Similarly, Ajax changes the role of "server" from merely serving HTML pages to serving data as well. In classic web applications, web servers serve HTML web pages. Some of the pages are static while others are generated dynamically by server side logic. In particular, when the application has dynamic data, the server much convert such data into HTML markup and send them to the browser for display as HTML pages. In this regard, the server is merely serving "screen images" to the client side while the client side browser is merely a screen images rendering engine.
In Ajax web applications, servers do not need to convert data into HTML markup. Server can send data to the client side directly. The client side code will process the data inside the browser and dynamically update the HTML display accordingly. This eliminates significant overhead on the server side for generating HTML pages from dynamic data, leverages the client-side processing powers and delivers better performance and scalability.



In fact, having the server serving data instead of generating and serving HTML pages is the right way to architect Ajax applications. Putting data on the client side gives the client side a lot more flexibility, avoids unnecessary network request/responses and improves performance. Such architecture can further enable offline capable applications.

Dynamic and Continuous User Experiences
An important characteristic of Ajax is in its first letter “A” – a user experience that is “asynchronous”. “Asynchronous” means that users continue to interact with the
application while the browser is communicating with the server. No more “click, wait and page refresh”, the Ajax user experience is dynamic and continuous.
Classic web applications deliver a “click, wait and page refresh” user experience.
Because the Web was originally designed for browsing HTML documents, a Web browser
responds to user actions by discarding the current HTML page and sending an HTTP request back to the Web server. After performing some processing, the server returns a new HTML page to the browser, which then displays the new page. The cycle of “browser requests, server responds” is synchronous, meaning that it happens in real-time rather than “in the background” so that the user must wait and cannot perform other tasks.



XML HTTP Request object

Internet Explorer on Windows, Safari on Mac OS-X, Mozilla on all platforms, Konqueror in KDE, IceBrowser on Java, and Opera on all platforms including Symbian provide a method for client side javascript to make HTTP requests. From the humble begins as an oddly named object with few admirers, it's blossomed to be the core technology in something called AJAX.

Creating the object

In Internet Explorer, you create the object using new ActiveXObject("Msxml2.XMLHTTP") or new ActiveXObject("Microsoft.XMLHTTP") depending on the version of MSXML installed. In Mozilla and Safari (and likely in future UA's that support it) you use new XMLHttpRequest() IceBrowser uses yet another method the window.createRequest() method.

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}


Make a request?

Making a HTTP request is very simple. You tell the XML HTTP request object what sort of HTTP request you want to make and which url you want to request. Provide a function to be called when as the request is being made, and finally what, (if any) information you want sent along in the body of the request.

The following script makes a GET request for the relative url "text.txt" (relative to the calling page) It provides the function, which checks the readyState property each time it's called and when it has the value 4 - meaning the load is complete, it displays the responseText to the user with an alert.

xmlhttp.open("GET", "test.txt",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}
}
xmlhttp.send(null)