核心部分
- <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
- <script language="javascript">
- //创建Dom对象
- function createDocument() {
- var aVersions = ["MSXML2.DOMDocument.5.0",
- "MSXML2.DOMDocument.4.0",
- "MSXML2.DOMDocument.3.0",
- "MSXML2.DOMDocument",
- "Microsoft.XmlDom"
- ];
- for (var i = 0; i < aVersions.length; i++) {
- try {
- var oXmlDom = new ActiveXObject(aVersions[i]);
- return oXmlDom;
- } catch (oError) {
- }
- }
- throw new Error("MSXML is not installed.");
- }
- function init() {
- var oXmlDom = createDocument();
- oXmlDom.async = true;
- oXmlDom.onreadystatechange = function () {
- if (oXmlDom.readyState == 4) {
- if (oXmlDom.parseError.errorCode == 0) {
- parseBookInfo(oXmlDom);
- }else{
- var str = "An error occurred!!/n" +
- "Description: " + oXmlDom.parseError.reason + "/n" +
- "File: " + oXmlDom.parseError.url + "/n" +
- "Line: " + oXmlDom.parseError.line + "/n" +
- "Line Position: " + oXmlDom.parseError.linePos + "/n" +
- "Source Code: " + oXmlDom.parseError.srcText;
- alert(str);
- }
- }
- };
- oXmlDom.load("books.xml");
- }
- //文档解析
- function parseBookInfo(oXmlDom) {
- var oRoot = oXmlDom.documentElement;
- var oFragment = document.createDocumentFragment();
- var aBooks = oRoot.getElementsByTagName("book");
- //遍历生成每个信息
- for (var i = 0; i < aBooks.length; i++) {
- var sIsbn = aBooks[i].getAttribute("isbn");
- var sAuthor, sTitle, sPublisher;
- var oCurrentChild = aBooks[i].firstChild;
- do {
- switch (oCurrentChild.tagName) {
- case "title":sTitle = oCurrentChild.text; break;
- case "author":sAuthor = oCurrentChild.text; break;
- case "publisher":sPublisher = oCurrentChild.text; break;
- default: break;
- }
- }while(oCurrentChildoCurrentChild = oCurrentChild.nextSibling);
- //---------------生成显示页面--------------
- //生成每个xml元素的基本容器
- var divContainer = document.createElement("div");
- var imgBookCover = document.createElement("img");
- var divContent = document.createElement("div");
- var sOdd = (i % 2)?"":"-odd";
- divContainer.className = "bookContainer" + sOdd;
- //封面信息
- imgBookCover.src = "images/" + sIsbn + ".jpg";
- imgBookCover.className = "bookCover";
- divContainer.appendChild(imgBookCover);
- //标题
- var h3Title = document.createElement("h3");
- h3Title.appendChild(document.createTextNode(sTitle));
- divContent.appendChild(h3Title);
- //作者
- divContent.appendChild(document.createTextNode("Written by: " + sAuthor));
- divContent.appendChild(document.createElement("br"));
- divContent.appendChild(document.createTextNode("ISBN: #" + sIsbn));
- //出版社
- var divPublisher = document.createElement("div");
- divPublisher.className = "bookPublisher";
- divPublisher.appendChild(document.createTextNode("Published by: " + sPublisher));
- divContent.appendChild(divPublisher);
- //组装
- divContent.className = "bookContent";
- divContainer.appendChild(divContent);
- oFragment.appendChild(divContainer);
- document.body.appendChild(oFragment);
- }
- }
- </script>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Book XML Exercise</title>
- <link rel="stylesheet" type="text/css" href="books.css" />
- <script type="text/javascript" src="zxml.js"></script>
- </head>
- <body onload="init()">
- </body>
- </html>
books.xml
-
- <?xml version="1.0" encoding="utf-8"?>
- <bookList>
- <book isbn="0471777781">
- <title>Professional Ajax</title>
- <author>Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett</author>
- <publisher>Wrox</publisher>
- </book>
- <book isbn="0764579088">
- <title>Professional JavaScript for Web Developers</title>
- <author>Nicholas C. Zakas</author>
- <publisher>Wrox</publisher>
- </book>
- <book isbn="0764557599">
- <title>Professional C#</title>
- <author>Simon Robinson, et al</author>
- <publisher>Wrox</publisher>
- </book>
- <book isbn="1861006314">
- <title>GDI+ Programming: Creating Custom Controls Using C#</title>
- <author>Eric White</author>
- <publisher>Wrox</publisher>
- </book>
- <book isbn="1861002025">
- <title>Professional Visual Basic 6 Databases</title>
- <author>Charles Williams</author>
- <publisher>Wrox</publisher>
- </book>
- </bookList>
- css
-
- body{
- font-size:12px;
- text-align:left;
- }
- div{
- }
- .bookContainer-odd{
- background-color:#CCCCFF;
- border:1px solid #000000;
- padding:5px;
- margin:5px;
- width:600px;
- }
- .bookContainer{
- background-color:#CC99FF;
- border:1px solid #000000;
- padding:5px;
- margin:5px;
- width:600px;
- }
- .bookCover{
- max-height:160px;
- max-width:200px;
- border:none;
- }