Tutorial:
1. Put this inside <head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}
txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("event");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("img");
{
try
{
txt=txt + "<td><img src=" + xx[0].firstChild.nodeValue + ">";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("title");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("address");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;
}
</script>
2. Put this inside <body>
<div id="copy">
<button onclick="loadXMLDoc('data.xml')">Get data</button>
</div>
3. Here's xml sample data
<?xml version="1.0" encoding="utf-8"?>
<events>
<event>
<title>aaa</title>
<address>aaaaa</address>
<img>http://www.vendian.org/howbig/UnstableURLs/letter_a.gif</img>
<content>aaaaaaa</content>
</event>
<event>
<title>bbbbb</title>
<address>bbbbbbbb</address>
<img>http://www.daniellesplace.com/Images4/letterB.gif</img>
<content>bbbbbbbb</content>
</event>
</events>
Explanation:
1. This function is for loading the XMLHttp
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
2. If the above statement didn't return null, then the onResponse function will run in the background
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}
this here makes the column of each tag found on XML data
txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("event");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("img");
{
try
{
txt=txt + "<td><img src=" + xx[0].firstChild.nodeValue + ">";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("title");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("address");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
Here, the document get the "copy" id of div in <body>
document.getElementById('copy').innerHTML=txt;
}
3. The id is used to get the innerHTML in onResponse function. On button click, the page will show the data from the XML
<div id="copy">
<button onclick="loadXMLDoc('data.xml')">Get data</button>
</div>
4. The code on onResponse function will only get "event" tag's <title>, <address>, and <img>. The <content> will be passed
<?xml version="1.0" encoding="utf-8"?>
<events>
<event>
<title>aaa</title>
<address>aaaaa</address>
<img>http://www.vendian.org/howbig/UnstableURLs/letter_a.gif</img>
<content>aaaaaaa</content>
</event>
<event>
<title>bbbbb</title>
<address>bbbbbbbb</address>
<img>http://www.daniellesplace.com/Images4/letterB.gif</img>
<content>bbbbbbbb</content>
</event>
</events>
For more sources, go to:
1. http://www.xul.fr/en-xml-ajax.html
2. http://www.w3schools.com/Ajax/Default.Asp
3. http://www.dmoz.org/Computers/Programming/Languages/JavaScript/AJAX/
No comments:
Post a Comment