Primero necesitas datos mi amigo usa este archivo llamado "x.xml"
el contenido es el siguiente:
Código PHP:
<xml id="msxml" style="display:none">
<worldcup>
<final>
<location>Uruguay</location>
<year>1930</year>
<winner>Uruguay</winner>
<winscore>4</winscore>
<loser>Argentina</loser>
<losscore>2</losscore>
</final>
<final>
<location>Italia</location>
<year>1934</year>
<winner>Italy</winner>
<winscore>2</winscore>
<loser>Czechoslovakia</loser>
<losscore>1</losscore>
</final>
</worldcup>
</xml>
Luego el HTML con el JavaScript(AJAX):
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript">
function ajaxLoader(url) {
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x){
x.onreadystatechange = function(){
if (x.readyState == 4 && x.status == 200){
return x.responseXML;
}
}
x.open("GET", url, true);
x.send(null);
}
}
var xDoc;
function verifySupport(xFile) {
if (document.implementation &&document.implementation.createDocument) {
xDoc = document.implementation.createDocument("","theXdoc", null);
} else if (typeof ActiveXObject != "undefined") {
//if (document.getElementById("msxml").async) {
xDoc = new ActiveXObject("Msxml.DOMDocument");
//}
}
if (xDoc && typeof xDoc.load != "undefined") {
xDoc.load(xFile);
return true;
} else {
var reply = confirm("No tienes soporte XMl en tu browser");
if (reply) {
history.back( );
}
}
return false;
}
function init(xFile) {
// confirma el soporte del browser
if (verifySupport(xFile)) {
setTimeout("drawTable('matchData')", 3000);
}
}
//dibuja en la tabla el arbol XML
function drawTable(tbody) {
var tr, td, i, j, oneRecord;
tbody = document.getElementById(tbody);
// nodo del arbol
var data = xDoc.getElementsByTagName("worldcup")[0];
// para el elemento td de la tabla
//var classes = ["ctr","","","","ctr"];
for (i = 0; i < data.childNodes.length; i++) {
// necesario para netscape
if (data.childNodes[i].nodeType == 1) {
oneRecord = data.childNodes[i];
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
//td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
//td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =oneRecord.getElementsByTagName("location")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
//td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
//td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
//td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue +" - " + oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
}
}
}
</script>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<body onload="init('x.xml');">
<table id="cupFinals">
<thead>
<tr><th>Year</th>
<th>Host Country</th>
<th>Winner</th>
<th>Loser</th>
<th>Score (Win - Lose)</th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table>
</BODY>
</HTML>
Y es todo:
Mira mi tutorial en mi site:
http://www.fuenteria.com/?external=35
Estoy armando un tutorial integral para este tipo de preguntas.
Por cierto: mi site esta hecho enteramente con
Saludos