首先XML文件内容cd.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<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>
</CATALOG>
然后ajax代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">获取CD的详细信息</button>
<table border="1px solid #ccc" cellpadding="5" cellspacing="0" align="center">
<thead>
<tr>
<th>TITLE</th>
<th>ARTIST</th>
<th>COUNTRY</th>
<th>COMPANY</th>
<th>PRICE</th>
<th>YEAR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var oBtn=document.getElementById("btn");
var tbody=document.getElementsByTagName("tbody")[0];
function loadDoc(){
//第一步创建一个xhr对象
var xhr;
var xmlDoc;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP"');
}
// 第二步 感知AJAX的状态
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
xmlDoc=xhr.responseXML;
//解析xmlDoc
var cd=xmlDoc.getElementsByTagName('CD');
for(var i=0;i<cd.length;i++){
var title=cd[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue;
var artist=cd[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue;
var country=cd[i].getElementsByTagName('COUNTRY')[0].childNodes[0].nodeValue;
var company=cd[i].getElementsByTagName('COMPANY')[0].childNodes[0].nodeValue;
var price=cd[i].getElementsByTagName('PRICE')[0].childNodes[0].nodeValue;
var year=cd[i].getElementsByTagName('YEAR')[0].childNodes[0].nodeValue;
tbody.innerHTML +="<tr><td>"+title+"</td><td>"+artist+"</td><td>"+country+"</td><td>"+company+"</td><td>"+price+"</td><td>"+year+"</td></tr>";
}
}
}
//第三步 创建请求 并设置地址
xhr.open('get','cd.xml',true);
//第四步 发送请求
xhr.send();
return xmlDoc;
}
oBtn.onclick=function(){
loadDoc();
}
</script>
</body>
</html>