Table of Contents
What is AJAX?
- AJAX = Asynchronous JavaScript and XML
- AJAX is a technique for creating fast and dynamic web pages
- AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes
- This means that it is possible to update parts of a web page, without reloading the whole page
- Classic web pages, (which do not use AJAX) must reload the entire page if the content should change
- Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs
- AJAX is based on Internet Standards, and uses a combination of:
- XMLHttpRequest object (to exchange data asynchronously with a server)
- JavaScript/DOM (to display/interact with the information)
- CSS (to style the data)
- XML (often used as the format for transferring data)
Ajax Request used in this sample application
- Javascript code loadXMLDoc() to trigger an Ajax Request
function loadXMLDoc()
{
var xmlhttp;
var xmlf=document.getElementById('xmlf').value;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*
* Only a specific devision named "myDiv" of our HTTP page will be updated
*/
document.getElementById("myDiv").innerHTML="Inside loadXMLDOC -> XML File to load: " + xmlf;
/*
* For details using onreadystatechange Event please read :
* http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
*/
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState === 4 )
{
if ( xmlhttp.status === 200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
else
{
document.getElementById("myDiv").innerHTML='Error loading XML file: ' + xmlf + ' HTTP Status Code: ' + xmlhttp.status;
}
}
};
xmlhttp.open("GET",xmlf,true);
xmlhttp.send();
}
Function Details:
- The function loadXMLDoc() starts an asyncronous Ajax request
- Parameter xmls points to XM file cd.xml which gets loaded during this request
- xmlhttp.open(“GET”,xmlf, true) means we use an HTTP GET request to load cd.xml. True means the load request is asyncronous.
- xmlhttp.send() actually sends the HTTP request
- xmlhttp.onreadystatechange function() gets invoked when HTTP response is ready
- x=xmlDoc.getElementsByTagName(“ARTIST”) scans the XML document for ARTISTS attribute
- txt=txt + x[i].childNodes[0].nodeValue + “<br>” adds the artists to our result string
- Finally document.getElementById(“myDiv”).innerHTML=txt updates the only myDiv part of our WEB page
- In case of an error [ You may just change cd.xml to cdd.xml for testing ]
document.getElementById(“myDiv”).innerHTML=’Error loading XML file: ‘ + xmlf + ‘ HTTP Status Code: ‘ + xmlhttp.status;
returns some error like: Error loading XML file: cdd.xml HTTP Status Code: 404 - For further details you may read following article :
Implementing a Page TimeOut using JavaScript
- This is quite simple – For details please read function checkdelay() in JavaScript Code published below.
- JavaScript Code :
JavaScript Code
<!DOCTYPE html>
<html>
<head>
<script>
function redirect()
{
window.location="https://google.de";
}
function redirecttohome()
{
window.location="http://localhost:8180/JavaScriptandAjax-1.0/";
}
function redirectdelay()
{
actdelay = delay;
checkdelay();
}
function checkdelay()
{
/*
* As long we don't reach the timeout value we need to reschedule checkdelay()
* every second !
*/
document.getElementById("myDiv").innerHTML="This page wil be redirected in " + actdelay + " seconds !";
actdelay = actdelay - 1 ;
if ( actdelay >= 0 )
setTimeout('checkdelay()', 1000);
else
redirecttohome();
}
function clean()
{
document.getElementById("myDiv").innerHTML="";
}
function loadXMLDoc()
{
var xmlhttp;
var xmlf=document.getElementById('xmlf').value;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*
* Only a specific devision named "myDiv" of our HTTP page will be updated
*/
document.getElementById("myDiv").innerHTML="Inside loadXMLDOC -> XML File to load: " + xmlf;
/*
* For details using onreadystatechange Event please read :
* http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
*/
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState === 4 )
{
if ( xmlhttp.status === 200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
else
{
document.getElementById("myDiv").innerHTML='Error loading XML file: ' + xmlf + ' HTTP Status Code: ' + xmlhttp.status;
}
}
};
xmlhttp.open("GET",xmlf,true);
xmlhttp.send();
}
// global Javascript values
var delay=10;
var actdeley;
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<input name="XMLFile" type="text" maxlength="16" id="xmlf" value="cd.xml" />
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<button type="button" onclick="clean()">Clean Display</button>
<button type="button" onclick="redirect()">Page Redirect to Google </button>
<button type="button" onclick="redirectdelay()">Delayed Page Redirect to our Home Page </button>
</body>
</html>
XML File used in this sample : cd.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>RCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1982</YEAR> </CD> </CATALOG>
Reference
Most Info of this POST are just copied from: