HTML代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> window.onload = function () { var xhr = null; if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("get", "Book.xml", true); xhr.send(null); xhr.onreadystatechange = function (data) { if (xhr.readyState==4) { if (xhr.status == 200) { var data = xhr.responseXML; var bs = data.getElementsByTagName("bookstore")[0]; var books = bs.getElementsByTagName("book"); var li=""; for (var i = 0; i < books.length; i++) { var book = books[i]; var name = book.getElementsByTagName("name")[0]; var person = book.getElementsByTagName("person")[0]; var like = book.getElementsByTagName("like")[0]; li+='<li>'+getNodeText(name)+'<br/>'+getNodeText(person)+'<br/>'+getNodeText(like)+'<br/></li>' } var ul = document.createElement("ul"); ul.innerHTML = li; document.getElementById("book").appendChild(ul); } } } } function getNodeText(node) { if (window.ActiveXObject) { return node.text; } else { if (node.nodeType==1) { return node.textContent; } } } </script> </head> <body> <div id="book"></div> </body> </html>
XML数据
<?xml version="1.0" encoding="utf-8" ?> <bookstore> <book> <name>三生三世十里桃花</name> <person>杨幂</person> <like>yes</like> </book> <book> <name>楚乔传</name> <person>赵丽颖</person> <like>yes</like> </book> <book> <name>花千骨</name> <person>赵丽颖</person> <like>yes</like> </book> </bookstore>
运行结果：
