Introdction To Ajax
Published by Unknown on Tuesday, July 31, 2007 at 6:15 AM.
Here I'll try to explain " What Is AJAX" in simple terms , so that budding programmers get a fairly good Basic Knowledge to follow thru and understand AJAX easily.
What Is AJAX
AJAX, is a web development technique used for creating interactive web applications.The name is an acronym standing for Asynchronous JavaScript and XML (Asynchronous JavaScript + XML = AJAX).
AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get its content and load them into your existing page without having to refresh the whole page. This means that services like email don't have to reload the whole page every time you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.
The Main advantages of using AJAX are that, It provides a mechanism to mix and match xml with xhtml,It significantly reduces having to continually fetch things from a server ),It overcomes some speed bottlenecks that traditional Web development has fallen prey too. In most instances ( I hate to say always ) an Ajax based site will load quicker than a comparable traditional Web site.When done well, it significantly reduces initial load times.
The HAndiness of Ajax is dat it doesnt require a complicated and continuous interaction with the webserver.This is Obtained By putting a JavaScript (and usually tucked away in a hidden frame) between the user and the server .{ advanced program geeks call it an Ajax engine,but for time being we call it jus javascripting becose the engine is nothing but a collection of javascript code}
These javascripts are responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf.
the advantage here is that the user does not wait for any response from the sever after asigning any tasks.
The core of Ajax is the xmlhttprequest object and its Microsoft's activeX equivalent. It is this object that allows data to be transferred asynchronously (ie it can handle processes independently from other processes).
To give you A brief example of Ajax,see this simple code. This code goes between the [head] [/head] tags. {replace [ and ] with < and > respectively }
[code start]
function loadurl(dest) {
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
xmlhttp.onreadystatechange = triggered;
xmlhttp.open("GET", dest);
xmlhttp.send(null);
}
function triggered() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}
[code end]
Now to Call it on An Html Page use this >>
[body] [div id="output" onclick="loadurl('/testdir/helloworld.txt')"]click here to See " Hello World " in this div[/div] [/body]
Note : In this Html code , Replace " [ " and " ] " with ' < ' and ' > ' respectively.
here "helloworld.txt" is a Text file on the directory "testdir".
Now remmember to put the destination url (here >> /testdir/helloworld.txt) in the same domain, otherwise errors may come.
What The Above code does is that while clicking the link on the div, The contents of the text file "helloworld.txt" will be displayed on the same web page without refreshing.
What Is AJAX
AJAX, is a web development technique used for creating interactive web applications.The name is an acronym standing for Asynchronous JavaScript and XML (Asynchronous JavaScript + XML = AJAX).
AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get its content and load them into your existing page without having to refresh the whole page. This means that services like email don't have to reload the whole page every time you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.
The Main advantages of using AJAX are that, It provides a mechanism to mix and match xml with xhtml,It significantly reduces having to continually fetch things from a server ),It overcomes some speed bottlenecks that traditional Web development has fallen prey too. In most instances ( I hate to say always ) an Ajax based site will load quicker than a comparable traditional Web site.When done well, it significantly reduces initial load times.
The HAndiness of Ajax is dat it doesnt require a complicated and continuous interaction with the webserver.This is Obtained By putting a JavaScript (and usually tucked away in a hidden frame) between the user and the server .{ advanced program geeks call it an Ajax engine,but for time being we call it jus javascripting becose the engine is nothing but a collection of javascript code}
These javascripts are responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf.
the advantage here is that the user does not wait for any response from the sever after asigning any tasks.
The core of Ajax is the xmlhttprequest object and its Microsoft's activeX equivalent. It is this object that allows data to be transferred asynchronously (ie it can handle processes independently from other processes).
To give you A brief example of Ajax,see this simple code. This code goes between the [head] [/head] tags. {replace [ and ] with < and > respectively }
[code start]
function loadurl(dest) {
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
xmlhttp.onreadystatechange = triggered;
xmlhttp.open("GET", dest);
xmlhttp.send(null);
}
function triggered() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}
[code end]
Now to Call it on An Html Page use this >>
[body] [div id="output" onclick="loadurl('/testdir/helloworld.txt')"]click here to See " Hello World " in this div[/div] [/body]
Note : In this Html code , Replace " [ " and " ] " with ' < ' and ' > ' respectively.
here "helloworld.txt" is a Text file on the directory "testdir".
Now remmember to put the destination url (here >> /testdir/helloworld.txt) in the same domain, otherwise errors may come.
What The Above code does is that while clicking the link on the div, The contents of the text file "helloworld.txt" will be displayed on the same web page without refreshing.
