您的位置:首页 > Web前端 > JavaScript

javascript读取xml文件

2008-11-01 01:39 399 查看
核心部分

<%@ 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;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: