What is Ajax?
 
  • It is all about XMLHTTPRequest
     
  • Ajax (Asynchronous Javascript And XML) is a combination of techniques for submitting a compiled request to the server  and receiving information from the server to the user without  waiting for a page being reloaded .
Simple Javascript

<html><head>
<title>Simple Javascript</title>
<script language="javascript">
function click_me()
{
document.write("hello world");
}
</script>
</head><body >
Simple Javascript <br>
<input type="button" value="click_me" onclick="click_me()">
</body></html>

  
Note the first line "Simple JavaScript"
Now note the back gound and text output after you click "click_me".
Now consider this case, here  Front Page was used  as a debugger, the function

Now consider this script

<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function showChanges(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}
</script> </head>

<body text="#000080" bgcolor="#C0C0C0">

Fetching data with Ajax : without reloading the page<br/>

<form>
<input type = "button" value = "Click_Me"
onclick = "showChanges('message.txt', 'targetDiv')">
</form>
This is division: The line below will change when button is clicked
<div id="targetDiv" style="border: 1px solid #000080; width: 300px;">
<p>The default text that will load with the web page.</p>
</div> </body>

</html>
 
now open :