by Hayesha Somarathne

Just to refresh your mind on what we have discussed during the last few months: to start off we have gone through the history to identify who got involved, how things got started and how the related technologies got evolved to the present day status. Later did a quick rundown on the evolution of core technology that drives the WWW, which it the Hypertext Markup language. Then   I focus your attention on some of the important points to be lookout for as Web authors, content generators and regular users of Internet to spend our time effectively during our engagements because presently we can see a huge demand for being able go on-line while on the move. That is where the importance of Web Standards come into play in order to build effective and user-friendly   Web sites and cater for ever increasing demand with minimal effort.  Similarly the users' greatelt disfavors to spend longer time to see the results and likes to continue with the rest of the services offered on the Web page while the results were given.

AJAX: Is it a technology or a combination?

Asynchronous JavaScript and XML, is a web development technique for creating interactive Web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user requests a change. This is meant to increase the Web page's interactivity, speed, and usability.

The term AJAX itself doesn't speaks directly on a single technology, instead it deals with a combination of technologies:

·     XHTML (or HTML) and CSS, for marking up and styling information.

·     The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.

·     The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added

·     XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text, JSON and even EBML. These files may be created dynamically by some form of server-side scripting.

AJAX Architecture

Following diagram illustrates the traditional approach or the synchronous way of handling the user request from the server and the AXAJ the modern approach or simply called as asynchronous way of handling the user request from the server.

Instead of reloading the entire Web page per user request, the AJAX has provided a mechanism through its AJAX engine to render the part of the interface(the Web page) that user interact and asynchronously carries out the necessary communication with the server. This eliminates the user's requirement of waiting for the server's request to continue with the rest of the activities or services which the Web page provides.  Google Inc's array of products and services(GMail, Google Maps, Google Reader, Google Docs, etc..) are one good example of successfully utilized the benefit of this combination of  technologies.

Properties

Today we find several different kinds of Web browsers which runs under different operating environments. The present Web browsers use different mechanisms to render the content of the Web page based on its underlaying the architecture. Because of this inherent differences the Web

·     onreadystatechange – Event handler that fires when the state of the request object changes.

·     readyState – Returns values that indicate the current state of the object.

·     responseText – String version of the response from the server.

·     responseXML – DOM-compatible document object of the response from the server.

·     status – Status code of the response from the server.

·     statusText – Status message returned as a string.

Methods   

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5

·     Abort() – Cancels the current HTTP request.

·     getAllResponseHeaders() – Retrieves the values of all the HTTP headers.

·     getResponseHeader("headerLabel") – Retrieves the value of an HTTP header from the response body.

·     open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) – Initializes an MSXML2.XMLHTTP request, specifying the method, URL, and authentication information for the request.

·     send(content) – Sends an HTTP request to the server and receives a response.

·     setRequestHeader("label", "value") – Specifies the name of an HTTP header.

The Request Object Creation

To create the Request Object, you must first check whether the browser uses the XMLHttpRequest or the ActiveXObject. The primary difference between the objects is the Web browsers that use them. Windows IE 5 and above use the ActiveX object; Mozilla, Netscape 7, Opera, and Safari 1.2 and above use the XMLHttpRequest object. Another difference is the way in which you need to create the objects: Opera, Mozilla, Netscape, and Safari allow you to simply call the objects' constructor, but Windows IE requires the name of the object to be passed to the ActiveX constructor. Following is an example of how to write the code to determine which object to use and how to create it:

if(window.XMLHttpRequest){
  request = new XMLHttpRequest();
}
else if(window.ActiveXObject){
  request = new ActiveXObject("MSXML2.XMLHTTP");
}

Have a problem in mind of what I have discussed so far or feels like need further clarification, please feel free to bug me.

References:

http://www.adaptivepath.com/ideas/essays/archives/000385.php

http://en.wikipedia.org/wiki/AJAX

 Previous Article