javascript读取xml文件

 

核心部分

1. <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
2. <script language="javascript">
4.     //创建Dom对象
5.     function createDocument() {
6.         var aVersions = ["MSXML2.DOMDocument.5.0",
7.                         "MSXML2.DOMDocument.4.0",
8.                         "MSXML2.DOMDocument.3.0",
9.                         "MSXML2.DOMDocument",
10.                         "Microsoft.XmlDom"
11.                         ];
12.           for (var i = 0; i < aVersions.length; i++) {
13.              try {
14.                  var oXmlDom = new ActiveXObject(aVersions[i]);
15.                  return oXmlDom;
16.              } catch (oError) {
18.           }
19.         }
20.         throw new Error("MSXML is not installed.");
21.     }
23. function init() {
24.     var oXmlDom = createDocument();
25.     oXmlDom.async = true;
26.     oXmlDom.onreadystatechange = function () {
27.         if (oXmlDom.readyState == 4) {
28.                 if (oXmlDom.parseError.errorCode == 0) {
29.                     parseBookInfo(oXmlDom);
30.                 }else{
31.                     var str = "An error occurred!!/n" +
32.                     "Description: " + oXmlDom.parseError.reason + "/n" +
33.                     "File: " + oXmlDom.parseError.url + "/n" +
34.                     "Line: " + oXmlDom.parseError.line + "/n" +
35.                     "Line Position: " + oXmlDom.parseError.linePos + "/n" +
36.                     "Source Code: " + oXmlDom.parseError.srcText;
37.                     alert(str);
38.                 }       
39.             }
40.     };
41.     oXmlDom.load("books.xml");
42. }   
43.     //文档解析
44.     function parseBookInfo(oXmlDom) {
45.         var oRoot = oXmlDom.documentElement;
46.         var oFragment = document.createDocumentFragment();
47.         var aBooks = oRoot.getElementsByTagName("book");
48.         //遍历生成每个信息
49.         for (var i = 0; i < aBooks.length; i++) {
50.             var sIsbn = aBooks[i].getAttribute("isbn");
51.             var sAuthor, sTitle, sPublisher;
52.             var oCurrentChild = aBooks[i].firstChild;
53.             do {
54.                 switch (oCurrentChild.tagName) {
55.                     case "title":sTitle = oCurrentChild.text;           break;
56.                     case "author":sAuthor = oCurrentChild.text;         break;
57.                     case "publisher":sPublisher = oCurrentChild.text;   break;
58.                     default: break;
59.                 }
60.             }while(oCurrentChildoCurrentChild = oCurrentChild.nextSibling);
61.             
62.             //---------------生成显示页面--------------
63.             //生成每个xml元素的基本容器
64.             var divContainer = document.createElement("div");
65.             var imgBookCover = document.createElement("img");
66.             var divContent = document.createElement("div");
67.             var sOdd = (i % 2)?"":"-odd";
68.             divContainer.className = "bookContainer" + sOdd;
69.             
70.             //封面信息
71.             imgBookCover.src = "images/" + sIsbn + ".jpg";
72.             imgBookCover.className = "bookCover";
73.             divContainer.appendChild(imgBookCover);
74.             //标题
75.             var h3Title = document.createElement("h3");
76.             h3Title.appendChild(document.createTextNode(sTitle));
77.             divContent.appendChild(h3Title);
78.             //作者
79.             divContent.appendChild(document.createTextNode("Written by: " + sAuthor));
80.             divContent.appendChild(document.createElement("br"));
81.             divContent.appendChild(document.createTextNode("ISBN: #" + sIsbn));
82.             //出版社
83.             var divPublisher = document.createElement("div");
84.             divPublisher.className = "bookPublisher";
85.             divPublisher.appendChild(document.createTextNode("Published by: " + sPublisher));
86.             divContent.appendChild(divPublisher);
87.             //组装
88.             divContent.className = "bookContent";
89.             divContainer.appendChild(divContent);
90.             oFragment.appendChild(divContainer);
91.             
92.             document.body.appendChild(oFragment);
93.     }
94. }
95. </script>
97.     
99.     
100. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
101. <html xmlns="http://www.w3.org/1999/xhtml" >
102. <head>
103.     <title>Book XML Exercise</title>
104.     <link rel="stylesheet" type="text/css" href="books.css" />
105.     <script type="text/javascript" src="zxml.js"></script>
106. </head>
107.     <body onload="init()">
108.     </body>
109. </html>

 

books.xml

2. 1. <?xml version="1.0" encoding="utf-8"?>
   2. <bookList>
   3.     <book isbn="0471777781">
   4.        <title>Professional Ajax</title>
   5.        <author>Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett</author>
   6.        <publisher>Wrox</publisher>
   7.     </book>
   8.     <book isbn="0764579088">
   9.        <title>Professional JavaScript for Web Developers</title>
   10.        <author>Nicholas C. Zakas</author>
   11.        <publisher>Wrox</publisher>
   12.     </book>
   13.     <book isbn="0764557599">
   14.         <title>Professional C#</title>
   15.         <author>Simon Robinson, et al</author>
   16.         <publisher>Wrox</publisher>
   17.     </book>
   18.     <book isbn="1861006314">
   19.        <title>GDI+ Programming: Creating Custom Controls Using C#</title>
   20.        <author>Eric White</author>
   21.        <publisher>Wrox</publisher>
   22.     </book>
   23.     <book isbn="1861002025">
   24.        <title>Professional Visual Basic 6 Databases</title>
   25.        <author>Charles Williams</author>
   26.        <publisher>Wrox</publisher>
   27.   </book>
   28. </bookList>
3. css
4. 1. body{
   2.     font-size:12px;
   3.     text-align:left;
   4. }
   6. div{
   8. }
   10. .bookContainer-odd{
   11.     background-color:#CCCCFF;
   12.     border:1px solid #000000;
   13.     padding:5px;
   14.     margin:5px;
   15.     width:600px;
   16. }
   17. .bookContainer{
   18.     background-color:#CC99FF;
   19.     border:1px solid #000000;
   20.     padding:5px;
   21.     margin:5px;
   22.     width:600px;
   23. }
   25. .bookCover{
   26.     max-height:160px;
   27.     max-width:200px; 
   28.     border:none;
   29. }