On one side where a desktop application means a responsibility, solid purpose, powerful possessing, richness and a focused & complete solution to a problem, Web Application caters remote access, handy information, simplicity and Glamour.
Few years back, web was limited to search, emails, chatting and first hand information whereas desktop applications catered everything else, but now the scenario has changed, the gap between the two is narrowing. The increasing internet speed- faster broadband and rapid change in the web technologies will make the whole personal and commercial computing to shift to the web, including the Operating system which is currently a platform for desktop applications.
With Google’s Gmail, suggest and maps, XMLHttpRequest made its way to the new era, era in which there is a direct on fly- interaction between client side and server side of an application which not only makes the system faster but adds glamour too and hence narrowed the above said gap. This approach of application is what the guys at Adaptive Path calls AJAX, short for asynchronous JavaScript and XML and the people at Oldskoolers named it remote scripting.
AJAX: What is it??
Ajax is a technique of developing highly interactive web application by combining the power of the following technologies:
-
HTML / XHTML / CSS / flash for designing the interface.
-
DOM (Document Object Model) for dynamic display and interaction manipulated through JavaScript.
-
Data interchange using XML and XSLT (preformatted HTML, plain Text, JSON and even EBML will work too). Asynchronous data retrieval using XMLHttpRequest, though sometimes an IFrame object is also used to exchange data with the web server.
For almost 99% tasks on the web, only a small amount of data is supposed to be transferred from client to server and vice-versa. A classic web application model generates a new Http request each time a new information is required and hence, the complete page was required to be refreshed resulting in a slower function and wastage of bandwidth. On the other hand, in an AJAX based model, the page need only be incrementally updated in the user’s browser by making asynchronous requests usually using XML or SOAP and retrieving only needed data and the JavaScript on the client side process it, and may then modify the document’s content through the DOM to show the user that an action has been completed, thus making it much faster and reducing load on server by sharing it on the client.
Models:
Ajax in Use:
The following is the well commented small authentication code showing the use of XmlHttpRequest(). The code is a complete system sub divided in three files/parts:
sample.html
<html>
<head>
<script type=”text/javascript” src=”samplejs.js”></script>
<style type=”text/css”>
<!--
.samplecss{font-size:12px}
-->
</style>
</head>
<body>
<form name="sampleform" method="post" onSubmit="auth(); return false;">
<table>
<tr>
<td>Username : </td>
<td><input id="uname" type="text" name="uname"></td>
</tr>
<tr>
<td>Password : </td>
<td><input id="pword" type="text" name="pword"></td>
</tr>
<tr>
<td><input type="submit" value=”submit” name="Submit"></td>
</tr>
<tr>
<td><span class=”samplecss” id=”dynamicwritehere”></span></td>
</tr>
</table>
</form>
</body>
</html>
HTML (sample.html): The above code is a general html form code which accepts username and password from the user and calls function auth() when user clicks submit. The spam id=”dynamicwritehere” is the location where the AJAX system will dynamic write to the page. It should be noted that auth() is a javascript function present in samplejs.js file which has also been included into sample.html file in head.
//samplejs.js
var http = getHTTPObject(); // http variable declaration
function getHTTPObject() //function definition to link the http form
//variables with JavaScript variables
{
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
function auth() //function which was called from html page
{
var username = document.getElementById("uname"); //username
//variable of JS gets location of uname variable of html form.
var password = document.getElementById("pword"); //password
//variable of JS gets location of pword variable of html form.
var objPut = document.getElementById("dynamicwritehere");//same as
//above two
objPut.innerHTML = "Authenticating...";//Writes Authenticating...
//in the html form, at location spam id=dynamicwritehere
authenticate(username.value,password.value);//calls function
//authenticating with values as those entered by user in html form
}
function authenticate(uname,pword)//function with 2 arguments
{
var query = "sampleauth.php?user=" + uname + "&pass=" + pword;
//variable with string to location of php page after passing
//username and password
http.open("GET", query, true);//a new http call with url as query
http.onreadystatechange = handleHttpResponse;//call to a function
http.send(null);
}
function handleHttpResponse()
{
var objPut = document.getElementById("dynamicwritehere");
if (http.readyState == 4) //reason of 4 will explain later
{
objPut.innerHTML = http.responseText;//put the response from
//the php page on the html form dynamically
}
}
|
