How To Create Web2.0 Applications Using AJAX And Clientside HTTP Requests

Web2.0 is a term coined to refer to web applications that run without visible page refreshes. A normal website functions by delivering pages of information, with links that allow a user to move from page to page. A web 2.0 application, or AJAX application, runs on a single web page, and uses clientside javascript to initiate and process additional requests to the server. The additional requests run in the background and are invisible to the user; the end result is that the web application appears very similar to a normal computer program, and the user can continue to manipulate the application and application interface without having to wait for the additional requests sent to the server to complete.

AJAX is an acronym that stands for Asynchronous Javascript and XML. The interesting thing about AJAX is that the XML component is actually unnecessary, or rather optional. The important component is asynchronous javascript -- this is the meat of how web2.0 applications work and the XML component is just one possible format for sending and receiving the additional data requests to the server. However, since this processing happens in the background and is invisible to the end user, you can actually build a web2.0 application using any format for the data requests that you wish.

The key to implementing an AJAX web2.0 application is in the XMLHTTP Object. The XMLHTTP objects exists in many forms, both server-side and client-side, and the purpose of it is to allow retrieval and processing of external web pages from within the coding application. Since we are trying to build a client-side web2.0 application, and since Javascript is the most widely available scripting application for web browsers, AJAX is the ideal implementation, and a good cross-browser Javascript code for instantiating the XMLHTTP Object is as follows:

if (document.all) req=new ActiveXObject("Microsoft.XMLHTTP");
else req=new XMLHttpRequest();

When creating a web2.0 application, the idea is that whenever you would normally send data to the server and receive a response in return by submitting a form, or using a link to an external page, instead you implement it by using the XMLHTTP object to send the request or form in the background, and process the resulting data without causing the browser to reload. The XMLHTTP Object allows you to send requests synchronously or asynchronously, but since we are creating an AJAX application you will use asynchronous mode in almost all cases. When submitting form data, you can use either the GET or POST method, but in this article I will show you how to use POST with the XMLHTTP Object as that allows you the widest possible uses.

Once you instantiate the XMLHTTP object, there are four simple commands to creating a web2.0 application. The "onreadystatechange" property is used for asynchronous mode to define a function that is executed whenever the state of the request changes (such as when it completes). The "open" method creates the request and the "send" method send the request. Also, the "setRequestHeader" method is used to specify the format of the data that is being submitted. Here is some example code that shows how a basic AJAX application would work:

if (document.all) req=new ActiveXObject("Microsoft.XMLHTTP");
else req=new XMLHttpRequest();
req.onreadystatechange=ajaxProcess;
req.open('POST','http://'+location.host+'/ajax.asp',true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.send('p1='+escape(p1)+'&p2='+escape(p2));

In this example, "/ajax.asp" is the page that is being retrieved, and "ajaxProcess()" is the function that is executed once the page is retrieved. The variables "p1" and "p2" are sent to the page as form data. You can of course send whatever data you wish according to what you need to do; just make sure that the ajax.asp file processes them correctly and returns the results. Define the ajaxProcess() function so that it processes the returned results, and updates the user interface to indicate that the request has been completed and updates the appropriate variables and/or the user with the new data. If you would like to see an AJAX web2.0 application in action, you can check out the web2.0 RPG I created, Apocalypse, found at www.apocrpg.com .

Using these methods, you can in fact send whatever data you want to the server and process the results, just as if you had used a normal HTTP request. The difference is that when done normally, the end user has to wait for each page to be loaded, which can be unacceptable if the user is on dialup and there are a large number of actions to be performed independently (multiple page reloads). By using AJAX in a web2.0 application, you can execute these actions in the background, and the user never notices the delays as he is able to continue manipulating your user interface while the page requests are processing in the background, invisible.

This type of web application wasn't possible in the past, for two reasons. Primarily, the XMLHTTP object wasn't available until recently, and also Javascript was not widely supported by almost all browsers as it is today. Now that background page requests are possible, it is likely that in the future all web applications will be converted or migrated to web2.0 / clientside AJAX applications. There are also innumerable web applications that simply weren't possible or feasible under the old model, that we will undoubtedly be see appearing in the next few years, that could potentially be very successful. Your website could be one of these, so get started!