How to Create Web2.0 Applications using AJAX and Clientside HTTP Requests
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!
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 !
See more from Web Design
Other Pages You Might Enjoy...
The Meissen Porcelain Manufactory
For more than 300 years the Meissen Porcelain Manufactory has been a central figure in European porcelain. It was at Meissen that the first true hard-paste porcelain was manufactured outside of China, and the story of that accomplishment has the high drama of fiction - all the more intriguing because it is true.
Pirated Glassware that Collectors Want to Own
The 1996 discovery of what is believed to be the wreckage of Blackbeard’s ship Queen Anne’s Revenge, is providing historians and collectors new information about the fragile and transparent objects that came onto the North American Continent before arrival of the first piece of cut glass.
Collecting Antique Furniture
Of all the collectible antiques, the broad category of furniture is perhaps the most widely held and most satisfying. Frequently handed down through generations, the various chairs, tables, cabinets and other pieces are often in use, adding character and constancy to our daily lives. This guide includes an overview of the significant styles and historical periods, and other important information for collectors.
Collecting Antique Clocks and Watches
Information for collectors of antique clocks and watches. Includes a history of clock and watchmaking, an overview of styles, and important terminology.
Collecting Antique Jewelry
Embodying the wealth and treasure of bygone days, the antique jewelry pieces available today include some of the world's most valuable artifacts. Includes a history of jewelry making, an overview of the major historical periods, and a glossary of antique jewelry terminology.
Javascript Chatterbot Workshop
Home of the Do It Yourself Chatterbot Project. Has a ready to go chatterbot shell and full instructions on how to program it.
An Unorthodox Javascript Form Submission
Describes three fixes in handling an unorthodox Javascript form submission. Executing Javascript before submitting the data to the server; altering the behavior of the PHP running on the server so that it would return to the original page; and restarting animated GIFs.
Update Your Navigation and Other Content Automatically with JavaScript
Learn to use this simple JavaScript technique to change content and make instant updates across your entire site. Whether you update five pages or thousands, this handy web tip is a must read!
Tips for Improving Website Navigation
A business often has more than one target audience it wants to reach with its website. Different customers mean different sales appeals and a homepage needs to be able to direct visitor traffic to go to the right places to get information or make a sale.
Choosing the Right Color for Your Web Site
When people build a web site for their business (or hire a web design company to make it for them), not much thought is put into deciding what color their web site will be as most would rather focus on more important tasks like creating content, web site optimization and promotion. Most simply choose the most web-friendly colors, others use their company’s logo as base while some decide to just use their favorite color.
A Longest Common Substring Function for Javascript
Here is a down and dirty Javascript function that returns the longest substring shared by two string variables.
Beginning at the Beginning - File Systems and Plain Text Files
Getting up and running with HTML, Javascript, and a host of other technologies requires an understanding of file systems and text editing tools. This page is for people who need to come up-to-speed on the basics before moving on to introductory markup and coding.
HTML For the Absolute Beginner
The intent of this tutorial is to provide a basic introduction to making web pages for the person who has never studied HTML before. Once one has worked through this material they should be able to create a bare bones HTML file and be ready to move on to learning to build web pages.