How to Create Web2.0 Applications using AJAX and Clientside HTTP Requests
|
|
|
| 1.0/5.0 (1 votes total) |
|
|
|
Lucas Green May 07, 2007
|
Lucas Green |
This article was written by Lucas Green, a professional private web developer who lives off his internet income. To visit his website and learn more about how he is creating multiple streams of passive income using the internet, please visit www.lucasgreen.com ! |
Lucas Green
has written 1 articles for JavaScriptSearch. |
View all articles by Lucas Green... |
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! |