AJAX
Basic Example – responseXML
Here
is a basic AJAX example which write to demonstrate get the response
by XML.
Out
put -
Once
click the “Example” button the AJAX response as follow.
Below
are the steps for the above example.
1.
AjaxBasicResponseText.html
<!DOCTYPE
html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>AJAX
Basic - ResponseXML</title>
<style
type="text/css">@IMPORT
url("css/AjaxBasic.css");</style>
<script>
function
loadXMLDoc()
{
var
xmlhttp;
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");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4
&& xmlhttp.status==200){
xmlDoc =
xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("examples");
for
(i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("AJAXExampleDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","resource/ajaxCatlog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX
→ Asynchronous JavaScript and XML</h2>
<p>*
AJAX is a mechanism of exchanging data with a server, and updating
parts of a web page, without reloading the whole page.</p>
<p>*
What is AJAX ?.</p>
<p
class="redfont">AJAX
is a technique for creating fast and dynamic web pages</p>
Examples
of applications using AJAX:<br>
<div
id="AJAXExampleDiv"
class="bluefont"></div>
<br>
<button
onclick="loadXMLDoc()">Example</button>
</body>
</html>
2.
AjaxBasic.css
@CHARSET
"UTF-8";
body{
font-size:
12px;
font-family:
sans-serif;
}
.redfont{
color:
red;
}
.bluefont{
color:
blue;
}
.h1Gray{
color:
gray;
}
3.
ajaxCatlog.xml
<?xml
version="1.0"?>
<ajaxexamples>
<examples>Goolge
Maps</examples>
<examples>Gmail</examples>
<examples>Youtube</examples>
</ajaxexamples>
