Home

Ajax

Posted April 6th, 2011

AJAX stands for Asynchronous JavaScript and XML. Ajax is not a new programming or formating language. Instead it combines existing standard technologies to provide a powerful interactive user interface for users. The most important feature of Ajax is the ability to exchange data with a server without reloading the entire page.

Ajax uses XHTML and CSS for content presentation and formatting
Ajax uses DOM, XML, and XSLT for data interachange
Ajax uses XMLHttpRequest and XMLHttpResponse objects for asynchronous data exchange
Ajax uses JavaScript to tie all the technologies together

Ajax is not an experimental technology. It is widely used in many of our favorite applications like Google suggest, Gmail, Google Maps, etc.

Ajax code is very tedious and cryptic to write and debug. For example, the following code allows user to replace text on screen with text from a file on the server:

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==300) {
        document.getElementById("xDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="xDiv"><h2>text text text</h2></div>
<button type="button" onclick="loadXMLDoc()">Switch to data</button>

</body>
</html>

info.txt file

data data data

Ajax programming is tedious but fortunately, there are numerous Ajax libraries such as jQuery which greatly simply Ajax programming.

jQuery ›