<html>
<head>
<script>
/**
* 定义一个装载XML文档的通用函数
* 参数:url 要装载的XML文档 
* 参数:handler 一个引用,引用另一个函数
*【注意】
 * 文档不是瞬间装载的,所以对loadXML()的调用将在装载文档之前返回。
* 因此,我们传递给loadXML()一个引用,它引用另一个函数,该函数在文档装载完毕时调用
*/
function loadXML(url, handler)
{
//如果当前浏览器支持,就使用标准的2级DOM技术
if (document.implementation && document.implementation.createDocument)
{
          alert("使用标准的2级DOM技术,创建Document文档");
          //创建新的Document对象
 var xmldoc = document.implementation.createDocument("", "", null);
/////////////////////////////////////////////////////////////////////////////////////////
//疑问:
//是不是xmldoc还没装载完毕,"语句■"就不会被执行(即使"语句■"在"语句◆"上面,)。
//那么当"语句◆"执行完以后"语句■"还会被执行吗?
//而在makeTable()函数中执行了以下操作,数据是如何获取的?
//xmldoc.getElementsByTagName("employee");
//在语句■中,xmldoc作为参数传递给makeTable时,不是还没有装载吗?
/////////////////////////////////////////////////////////////////////////////////////////
                  //设置装载完毕时发生的情况
xmldoc.onload = function() { handler(xmldoc, url); }//语句■
        
//开始装载
xmldoc.load(url);//语句◆
}
//否则,使用IE专有的API
else if (window.ActiveXObject)

alert("使用IE专有的API,创建Document文档");
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.onreadystatechange = function()
{
//设置onload
if(xmldoc.readyState == 4)
 {
handler(xmldoc, url);
 }
 }
        
//开始装载
xmldoc.load(url);
}
}

/**
* 创建一个<table>,用xmldoc的内容填充该<table>
*/
function makeTable(xmldoc, url)
{
var table = document.createElement("table");
table.setAttribute("border", "1");
document.body.appendChild(table); var row = table.insertRow(0);
row.insertCell(0).appendChild(document.createTextNode("Name"));
row.insertCell(1).appendChild(document.createTextNode("Job"));
row.insertCell(2).appendChild(document.createTextNode("Salary"));
    
var allEmployee = xmldoc.getElementsByTagName("employee");

for(var i = 0; i < allEmployee.length; i++)
{
var e = allEmployee[i];
var name = e.getAttribute("name");
var job = e.getElementsByTagName("job")[0].firstChild.data;
var salary = e.getElementsByTagName("salary")[0].firstChild.data;
var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(job));
row.insertCell(2).appendChild(document.createTextNode(salary));
}
}
</script>
</head>
<body onload="loadXML('data.xml', makeTable)">
</body>
</html>
-------------------------------------------------
data.xml
<employees>
<employee name="WangWu">
<job>Programmer</job>
<salary>5000</salary>
</employee>

<employee name="ZhangSan">
<job>Sales</job>
<salary>8000</salary>
</employee>

<employee name="Lisi">
<job>Ceo</job>
<salary>10000</salary>
</employee>
</employees>