<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>解析xml </title>
<script>
function createXmlDomObject(){ //获取解析xml文档的对象
var xmlDoms;
if( window.ActiveXObject){ //IE 9 以上都是W3c标准
xmlDoms =new ACtiveXObject( "Microsoft.XMLDOM");
}else if(document.implementation && document.implementation.createDocument ){ //w3c
xmlDoms=document.implementation.createDocument("","",null);
}else {
throw new Error("对不起,您的浏览器不支持XML DOM ");
}
return xmlDoms;
}
function xmlDom(){
//IE :分同步和异步
var doc=createXmlDomObject();
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","books.xml",false);
xmlhttp.send(null);
if(xmlhttp.readyState==4){
doc =xmlhttp.responseXML.documentElement;
}
//同步
/* doc.async = false;
doc.load("books.xml");
//alert(doc.getElement.tagName);
alert(xmlDoms.xml);
*/
//异步
//当xml文件加载完成后, 怎么处理,在这个回调函数中指明
//获取方式以远程请求的方式去获取;
var tbody =document.getElementById("bookInfo");
var books =doc.getElementsByTagName("Book");
//创建行
var tr;
var td;
var bookInfo;
var len1=books.length;
for(var i =0 ; i<len1;i++ ){
tr = document.createElement("tr");
td = document.createElement("td");
td.appendChild(document.createTextNode( books[i].getAttribute("id") ) );
tr.appendChild(td);//将图书编号列放到当前行中
//获取当前book下的子节点
bookInfo = books[i].childNodes;
var len2=bookInfo.length;
for(var j = 0;j<len2;j++ ){
if(bookInfo[j].nodeType==1 ){
td.appendChild(document.createTextNode( bookInfo[j].firstChild.nodeValue ));
td.appendChild(td);
}
}
tbody.appendChild(tr); //将当前行放入到表格中
}
}
window.onload = function(){
xmlDom();
}
</script>
</head>
<body>
<table align="center" width="80%" border="1px">
<thead>
<tr>
<th>图书编号</th>
<th>图书名称</th>
<th>图书作者</th>
<th>出版编号</th>
<th>图书价格</th>
</tr>
</thead>
<tbody id="booksInfo" align="center">
</tbody>
</table>
</body>
<html>
<head>
<meta charset="utf-8">
<title>解析xml </title>
<script>
function createXmlDomObject(){ //获取解析xml文档的对象
var xmlDoms;
if( window.ActiveXObject){ //IE 9 以上都是W3c标准
xmlDoms =new ACtiveXObject( "Microsoft.XMLDOM");
}else if(document.implementation && document.implementation.createDocument ){ //w3c
xmlDoms=document.implementation.createDocument("","",null);
}else {
throw new Error("对不起,您的浏览器不支持XML DOM ");
}
return xmlDoms;
}
function xmlDom(){
//IE :分同步和异步
var doc=createXmlDomObject();
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","books.xml",false);
xmlhttp.send(null);
if(xmlhttp.readyState==4){
doc =xmlhttp.responseXML.documentElement;
}
//同步
/* doc.async = false;
doc.load("books.xml");
//alert(doc.getElement.tagName);
alert(xmlDoms.xml);
*/
//异步
//当xml文件加载完成后, 怎么处理,在这个回调函数中指明
//获取方式以远程请求的方式去获取;
var tbody =document.getElementById("bookInfo");
var books =doc.getElementsByTagName("Book");
//创建行
var tr;
var td;
var bookInfo;
var len1=books.length;
for(var i =0 ; i<len1;i++ ){
tr = document.createElement("tr");
td = document.createElement("td");
td.appendChild(document.createTextNode( books[i].getAttribute("id") ) );
tr.appendChild(td);//将图书编号列放到当前行中
//获取当前book下的子节点
bookInfo = books[i].childNodes;
var len2=bookInfo.length;
for(var j = 0;j<len2;j++ ){
if(bookInfo[j].nodeType==1 ){
td.appendChild(document.createTextNode( bookInfo[j].firstChild.nodeValue ));
td.appendChild(td);
}
}
tbody.appendChild(tr); //将当前行放入到表格中
}
}
window.onload = function(){
xmlDom();
}
</script>
</head>
<body>
<table align="center" width="80%" border="1px">
<thead>
<tr>
<th>图书编号</th>
<th>图书名称</th>
<th>图书作者</th>
<th>出版编号</th>
<th>图书价格</th>
</tr>
</thead>
<tbody id="booksInfo" align="center">
</tbody>
</table>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<Books>
<Book id="1">
<bookName>编程珠玑</bookName>
<bookAuthor>Jon Bentley</bookAuthor>
<bookISBN>7-5083-1914-1</bookISBN>
<bookPrice>28.0</bookPrice>
</Book>
<Book id="2">
<bookName>Java编程思想(第2版</bookName>
<bookAuthor>Bruce Eckel</bookAuthor>
<bookISBN>7-111-10441-2</bookISBN>
<bookPrice>99.0</bookPrice>
</Book>
<Book id="3">
<bookName>Inside VCL(深入核心VCL架构剖析)</bookName>
<bookAuthor>李维</bookAuthor>
<bookISBN>7-5053-9489-4</bookISBN>
<bookPrice>80.0</bookPrice>
</Book>
</Books>