<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html> |
<head> |
<title>responseXML</title> |
<style> |
<!-- |
.datalist{ |
border:1pxsolid#744011; /*表格边框*/ |
font-family:Arial; |
border-collapse:collapse; /*边框重叠*/ |
background-color:#ffd2aa; /*表格背景色*/ |
font-size:14px; |
} |
.datalistth{ |
border:1pxsolid#744011; /*行名称边框*/ |
background-color:#a16128; /*行名称背景色*/ |
color:#FFFFFF; /*行名称颜色*/ |
font-weight:bold; |
padding-top:4px;padding-bottom:4px; |
padding-left:12px;padding-right:12px; |
text-align:center; |
} |
.datalisttd{ |
border:1pxsolid#744011; /*单元格边框*/ |
text-align:left; |
padding-top:4px;padding-bottom:4px; |
padding-left:10px;padding-right:10px; |
} |
.datalisttr:hover,.datalisttr.altrow{ |
background-color:#dca06b; /*动态变色*/ |
} |
input{ /*按钮的样式*/ |
border:1pxsolid#744011; |
color:#744011; |
} |
--> |
</style> |
<script language="javascript"> |
varxmlHttp; |
functioncreateXMLHttpRequest(){ |
if(window.ActiveXObject) |
xmlHttp=newActiveXObject("Microsoft.XMLHttp"); |
elseif(window.XMLHttpRequest) |
xmlHttp=newXMLHttpRequest(); |
} |
functiongetXML(addressXML){ |
varurl=addressXML+"?timestamp="+newDate(); |
createXMLHttpRequest(); |
xmlHttp.onreadystatechange=handleStateChange; |
xmlHttp.open("GET",url); |
xmlHttp.send(null); |
} |
functionaddTableRow(sName,sClass,sBirth,sConstell,sMobile){ |
//表格添加一行的相关操作,可参看7.2.1节 |
varoTable=document.getElementById("member"); |
varoTr=oTable.insertRow(oTable.rows.length); |
varaText=newArray(); |
aText[0]=document.createTextNode(sName); |
aText[1]=document.createTextNode(sClass); |
aText[2]=document.createTextNode(sBirth); |
aText[3]=document.createTextNode(sConstell); |
aText[4]=document.createTextNode(sMobile); |
for(vari=0;i<aText.length;i++){ |
varoTd=oTr.insertCell(i); |
oTd.appendChild(aText[i]); |
} |
} |
functionDrawTable(myXML){ |
//用DOM方法操作XML文档 |
varoMembers=myXML.getElementsByTagName("member"); |
varoMember="",sName="",sClass="",sBirth="",sConstell="",sMobile=""; |
for(vari=0;i<oMembers.length;i++){ |
oMember=oMembers[i]; |
sName=oMember.getElementsByTagName("name")[0].firstChild.nodeValue; |
sClass=oMember.getElementsByTagName("class")[0].firstChild.nodeValue; |
sBirth=oMember.getElementsByTagName("birth")[0].firstChild.nodeValue; |
sConstell=oMember.getElementsByTagName("constell")[0].firstChild.nodeValue; |
sMobile=oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue; |
//添加一行 |
addTableRow(sName,sMobile); |
} |
} |
functionhandleStateChange(){ |
if(xmlHttp.readyState==4&&xmlHttp.status==200) |
DrawTable(xmlHttp.responseXML); //responseXML获取到XML文档 |
} |
</script> |
</head> |
|
<body> |
<input type="button" value="获取XML" onclick="getXML('9-4.xml');"><br><br> |
<table class="datalist" summary="listofmembersinEEStuday" id="member"> |
<tr> |
<th scope="col">Name</th> |
<th scope="col">Class</th> |
<th scope="col">Birthday</th> |
<th scope="col">Constellation</th> |
<th scope="col">Mobile</th> |
</tr> |
</table> |
</body> |
</html> |