脚本操作xml

14.1  读取XML文件

随着XML的流行，JavaScript开发者也迫切希望在客户端Web开发中应用XML，本节将介绍如何通过XML DOM对象和XMLHttpRequest对象读取XML文件。

实例350   使用XML DOM对象读取XML文件

实例说明

在制作网站时，有时需要在页面上显示商品或其他信息的列表，这时，如果是动态网站可以将列表信息保存到数据库中，但如果是静态网站，制作和维护起来就很麻烦。解决该问题的方法是将要显示的信息保存到XML文件中，然后再通过JavaScript读取并显示该XML文件中的内容。运行本实例，在页面中将以表格的形式显示XML文件中的商品信息，如图14.1所示。

图14.1  使用XML DOM对象读取XML文件

技术要点

本实例主要应用XML DOM技术实现读取XML文件。虽然XML和DOM已经变成Web开发的重要组成部分，但是目前仅有IE和Mozilla两个浏览器支持客户端处理XML。下面将分别介绍在IE和Mozilla中创建DOM并载入XML的方法。

l 在IE中创建DOM并载入XML

（1）创建XML DOM对象的实例

Microsoft在JavaScript中引入了用于创建ActiveX对象的ActiveXObject类，通过该类可以创建XML DOM对象的实例，代码如下：

var xmldoc = new ActiveXObject("Microsoft.XMLDOM");

（2）载入XML

Microsoft的XML DOM有两种载入XML的方法：load()和loadXML()，本实例中使用的是load()。

load()方法用于从服务器上载入XML文件，load()方法的语法格式如下：

xmldoc.load(url);

参数说明

l     xmldoc：为XML DOM对象的实例。

l     url：为XML文件的名称。需要注意的是：load()方法只可以载入同包含JavaScript的页面存储于同一服务器上的文件。

在载入时还可以采用同步或异步两种模式，默认情况下，文件按照异步模式载入，如果需要进行同步载入，可以设置async属性为False。本实例采用的是默认模式，即异步模式。

在异步载入文件时，还需要使用readyState属性和onreadystatechange事件处理函数，这样可以保证在DOM完全载入后执行其他操作（例如本例，调用自定义的JavaScript函数createTable()将载入到DOM中的XML取出来并以表格的形式显示在页面中），代码如下：

xmldoc.onreadystatechange = function() {

if(xmldoc.readyState == 4) createTable(xmldoc);

}

loadXML()方法可直接向XML DOM输入XML字符串，例如：

xmldoc.loadXML("<root><son/></root>");

在Mozilla中创建DOM并载入XML。

（1）创建XML DOM对象的实例

DOM标准指出使用document.implementation对象的createDocument()方法可以创建XML DOM对象的实例，代码如下：

var xmldoc = document.implementation.createDocument("", "", null);

createDocument()方法包括3个参数，第一个参数用于指定文件的命名空间URL；第二个参数用于指定文件元素的标签名；第3个参数用于指定文档类型对象（因为Mozilla中还没有对文档类型对象的支持，所以总是null）。

（2）载入XML

Mozilla只支持一种载入XML的方法：load()。Mozilla中的load()方法和IE中的load()方法工作方式一样，只要指定载入的XML文件，以及是同步还是异步模式载入即可。

Mozilla的XML DOM会在文件完全载入后触发load事件，也就是说必须使用onload事件处理函数来判断DOM何时完全载入，这样可以保证在DOM完全载入后执行其他操作（例如本例，调用自定义的JavaScript函数createTable()将载入到DOM中的XML取出来并以表格的形式显示在页面中），代码如下：

xmldoc.οnlοad=function(){

xmldoc.onload =  createTable(xmldoc);

}

实现过程

（1）编写自定义的JavaScript函数createTable()，用于将载入到DOM中的XML取出来并以表格的形式显示在页面中。该函数只包括一个参数xmldoc，用于指定载入到DOM中的XML，无返回值。代码如下：

<script language="javascript">

function createTable(xmldoc) {

var table = document.createElement("table");

table.setAttribute("width","100%");

table.setAttribute("border","1");

table.borderColor="#FFFFFF";

table.cellSpacing="0"; 

table.cellpadding="0";         

table.borderColorDark="#FFFFFF";

table.borderColorLight="#AAAAAA";   

parentTd.appendChild(table);     //在指定位置创建表格

var header = table.createTHead();

header.bgColor="#EEEEEE";  //设置表头背景

var headerrow = header.insertRow(0);

headerrow.height="27";  //设置表头高度

headerrow.insertCell(0).appendChild(document.createTextNode("商品名称"));

headerrow.insertCell(1).appendChild(document.createTextNode("类别"));

headerrow.insertCell(2).appendChild(document.createTextNode("单位"));

headerrow.insertCell(3).appendChild(document.createTextNode("单价"));

var goodss = xmldoc.getElementsByTagName("goods");

for(var i=0;i<goodss.length;i++) {

var g = goodss[i];

var name = g.getAttribute("name");

var type = g.getElementsByTagName("type")[0].firstChild.data;

var goodsunit = g.getElementsByTagName("goodsunit")[0].firstChild.data;

var price = g.getElementsByTagName("price")[0].firstChild.data;

var row = table.insertRow(i+1);

      row.height="27";     //设置行高

      row.insertCell(0).appendChild(document.createTextNode(name));

      row.insertCell(1).appendChild(document.createTextNode(type));

      row.insertCell(2).appendChild(document.createTextNode(goodsunit));

      row.insertCell(3).appendChild(document.createTextNode(price));

   }

}

</script>

（2）编写自定义的JavaScript函数readXML()，用于读取XML文件并显示在页面中。在该函数中，首先实现在IE或Mozilla浏览器中创建DOM，然后把指定的XML文件载入到DOM中，最后调用自定义的JavaScript函数createTable()在页面的指定位置显示XML文件的内容，代码如下：

<script language="javascript">

function readXML() {

var url = "goodss.xml";

   if(window.ActiveXObject) {      //IE

      var xmldoc = new ActiveXObject("Microsoft.XMLDOM");

      xmldoc.onreadystatechange = function() {

            if(xmldoc.readyState == 4) createTable(xmldoc);

      }

      xmldoc.load(url);

   }

// Mozilla......

else if(document.implementation&&document.implementation.createDocument) {

var xmldoc = document.implementation.createDocument("", "", null);

xmldoc.οnlοad=function(){

xmldoc.onload =  createTable(xmldoc);

       }

xmldoc.load(url);

   }

}

</script>

（3）将用于显示新创建表格的单元格的id属性设置为parentTd，关键代码如下：

<td valign="top" id="parentTd">&nbsp;</td>

（4）在<body>标记的onLoad事件中调用自定义函数readXML()读取XML文件并显示在页面中，关键代码如下：

<body onLoad="readXML()">

举一反三

根据本实例，读者可以：

  将XML文件以表格形式显示，并改变表格的样式；

  读取XML文件并以下拉列表框显示。

实例351   使用XMLHttpRequest对象读取XML文件

实例说明

实例350已经介绍过如何使用XML DOM对象读取XML文件，本实例将介绍如何使用XMLHttpRequest对象读取XML。运行本实例，在页面中将以表格的形式显示XML文件中的客户信息，如图14.2所示。

图14.2  使用XMLHttpRequest对象读取XML

技术要点

本实例主要应用AJAX技术中的XMLHttpRequest对象实现。XMLHttpRequest是XMLHTTP组件的一个对象，通过对该对象的调用可以实现像桌面应用程序一样的与服务器进行数据层面的交换，而不需要每次请求都刷新整个页面，也不需要将每次的数据操作都交付给服务器去完成。在使用XMLHttpRequest对象进行异步处理之前，需要对该对象进行初始化操作，下面将介绍如何在IE浏览器和Mozilla浏览器中初始化XMLHttpRequest对象。

在IE中初始化XMLHttpRequest对象的代码如下：

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

在Mozilla中初始化XMLHttpRequest对象的代码如下：

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType("text/xml");

}

实现过程

（1）编写自定义的JavaScript函数createTable()，用于将载入到DOM中的XML取出来并以表格的形式显示在页面中。该函数只包括一个参数xmldoc，用于指定载入到DOM中的XML，无返回值。代码如下：

<script language="javascript">

function createTable(xmldoc) {

var table = document.createElement("table");

table.setAttribute("width","620");

table.setAttribute("border","1");

table.borderColor="#FF0000";

table.cellSpacing="0"; 

table.cellpadding="0";         

table.borderColorDark="#FFFFFF";

table.borderColorLight="#000000";       

parentTd.appendChild(table);     //在指定位置创建表格

var header = table.createTHead();

header.bgColor="#EEEEEE";  //设置表头背景

var headerrow = header.insertRow(0);

headerrow.height="27";  //设置表头高度

headerrow.insertCell(0).appendChild(document.createTextNode("客户名称"));

headerrow.insertCell(1).appendChild(document.createTextNode("联系地址"));

headerrow.insertCell(2).appendChild(document.createTextNode("电话"));

headerrow.insertCell(3).appendChild(document.createTextNode("邮政编码"));

headerrow.insertCell(4).appendChild(document.createTextNode("开户银行"));

headerrow.insertCell(5).appendChild(document.createTextNode("银行账号"));       

var customers = xmldoc.getElementsByTagName("customer");

for(var i=0;i<customers.length;i++) {

var cus = customers[i];

var name = cus.getAttribute("name");

var address = cus.getElementsByTagName("address")[0].firstChild.data;

var tel = cus.getElementsByTagName("tel")[0].firstChild.data;

var postcode = cus.getElementsByTagName("postcode")[0].firstChild.data;

var bank = cus.getElementsByTagName("bank")[0].firstChild.data;

var bankcode = cus.getElementsByTagName("bankcode")[0].firstChild.data;          

var row = table.insertRow(i+1);

      row.height="27";     //设置行高

      row.insertCell(0).appendChild(document.createTextNode(name));

      row.insertCell(1).appendChild(document.createTextNode(address));

      row.insertCell(2).appendChild(document.createTextNode(tel));

      row.insertCell(3).appendChild(document.createTextNode(postcode));

      row.insertCell(4).appendChild(document.createTextNode(bank));

      row.insertCell(5).appendChild(document.createTextNode(bankcode));         

   }

}

</script>

（2）搭建AJAX开发框架，具体代码如下：

<script language="javascript">

var http_request = false;

function createRequest(url) {

//初始化对象并发出XMLHttpRequest请求

http_request = false;

if (window.XMLHttpRequest) { // Mozilla......

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType("text/xml");

      }

} else if (window.ActiveXObject) { // IE浏览器

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

     }

  }

if (!http_request) {

alert("不能创建XMLHTTP实例!");

return false;

   }

http_request.onreadystatechange = dealresult;    //指定响应方法

//发出HTTP请求

http_request.open("GET", url, true);

http_request.send(null);

}

</script>

（3）编写自定义的JavaScript函数dealresult()，用于处理服务器返回的信息。在该函数中，将调用自定义的JavaScript函数createTable()在页面的指定位置显示XML文件的内容，代码如下：

<script language="javascript">

function dealresult() {    //处理服务器返回的信息

if (http_request.readyState == 4) {

if (http_request.status == 200) {

var xmldoc = http_request.responseXML;

createTable(xmldoc);

} else {

alert('您请求的页面发现错误');

     }

  }

}

</script>

（4）将用于显示新创建表格的单元格的id属性设置为parentTd，关键代码如下：

<td width="96%" id="parentTd">

（5）在<body>标记的onLoad事件中调用自定义函数createRequest()读取XML文件并显示在页面中，关键代码如下：

<body  onLoad="createRequest('customers.xml')">

举一反三

根据本实例，读者可以：

  将XML文件以表格形式显示，并改变表格的样式；

  实现基于XML的留言簿中的留言显示信息页面。

 

14.2  显示XML文档

要显示XML文档内容，不但可以借助外部CSS样式表或外部XSL样式表实现，而且也可以借助一些客户程序实现。本节将介绍如何通过CSS、XSL或IE XML数据岛显示XML文档。

实例352   使用CSS显示XML文档

实例说明

XML文档在IE 5.0及以上版本的浏览器中可以像普通Web页面一样直接打开。如果XML文档没有引用外部CSS文件或是XSL文件，那么IE将只显示整个文档的文本，相反加入引用样式表文件，将按样式表文件指定的样式显示XML文档。例如本实例，将index.xml文件中的“<?xml-stylesheet href="style.css" type="text/css"?>”语句删除后，在IE中打开的结果如图14.3所示；将“<?xml-stylesheet href="style.css" type="text/css"?>”语句加入后，在IE中打开的结果如图14.4所示。

图14.3  没有引用样式表文件的运行结果

图14.4  引用样式表文件的运行结果

技术要点

在XML文档中引用外部CSS样式表文件的语句如下：

<?xml-stylesheet href="style.css" type="text/css"?>

其中，style.css代表CSS样式表文件的名称。

实现过程

（1）编写CSS样式表文件style.css，在该样式表文件中指定XML文档中各元素的显示样式，代码如下：

book{

border:1px solid;

width:100%;

font-size:12px;

}

ISBN{

display: none;

}

bookname{

font-size:12px;

display: inline;

font-weight: bold;

width: 200px;

border-right:1px solid;

height:27px;

padding:5px;

}

author{

font-size:12px;

display: inline;

font-style: italic;

width: 200px;

border-right:1px solid;

height:27px;

text-align:center;

padding:5px;

}

publishing{

font-size:12px;

display: inline;

color: red;

width: 100px;

height:27px;

padding:5px;

}

（2）编写index.xml文件，在该文件中创建一个books根元素，该元素由多个book元素组成，代码如下：

<?xml version="1.0" encoding="gb2312" ?>

<books>

<book>

<ISBN>7-115-14873-2</ISBN>

<bookname>ASP程序开发范例宝典</bookname>

<author>明日科技</author>

<publishing>人民邮电出版社</publishing>

</book>

<book>

<ISBN>7-115-14547-4</ISBN>

<bookname>JSP数据库系统开发完全手册</bookname>

<author>王国辉、李文立 杨亮</author>

<publishing>人民邮电出版社</publishing>

</book>

<book>

<ISBN>7-115-14689-6</ISBN>

<bookname>JSP数据库系统开发案例精选</bookname>

<author>王国辉、王易</author>

<publishing>人民邮电出版社</publishing>

</book>

<book>

<ISBN>7-111-15531-9</ISBN>

<bookname>ASP数据库开发实例解析</bookname>

<author>王国辉 于亚芳</author>

<publishing>机械工业出版社</publishing>

</book>

</books>

（3）在index.xml文件的第二行加入如下引用CSS样式表文件的代码。

<?xml-stylesheet href="style.css" type="text/css"?>

举一反三

根据本实例，读者可以：

  将保存商品信息的XML文档格式化输出；

  将保存留言信息的XML文档格式化输出。

实例353   使用XSL显示XML文档

实例说明

在实例352中已经介绍了如何使用CSS外部样式表文件显示XML文档，本实例将介绍如何使用XSL显示XML文档。运行本实例，在页面中将按XSL文件指定样式显示XML文档的内容，如图14.5所示。

图14.5  使用XSL显示XML文档

技术要点

在XML文档中引用外部XSL样式表文件的语句如下：

<?xml-stylesheet href="style.xsl" type="text/xsl"?>

其中，style.xsl代表XSL样式表文件的名称。

实现过程

（1）编写XSL样式表文件style.css，在该文件中将XML的<book>标签转换为表格的TR标记；<book>标签下的子元素转换为表格的TD标记，并将整个文档作为HTML输出，代码如下：

<?xml version='1.0' encoding='gb2312'?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<head>

<title>使用XSL显示XML文档</title>

<style>

td {

font-size: 9pt ;     color: #000000;

}

body {

margin: 0px;

}

.tableBorder {

border: #aaaaaa 1px solid

}

</style>

</head>

<body>

<table width="780"  border="0" align="center" cellpadding="0" cellspacing="0"

background="Images/bg.jpg" class="tableBorder">

<tr>

<td width="26%" height="112" valign="top"> </td>

</tr>

<tr>

<td height="248" align="center" valign="top"><table width="90%" border="1"

bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#999999"

cellpadding="0" cellspacing="0">

<tr height="27">

<td align="center">书号</td>

<td align="center">书名</td>

<td align="center">作者</td>

<td align="center">出版社</td>

</tr>

<xsl:for-each select="books/book">

<tr height="27">

<td><xsl:value-of select="ISBN"/></td>

<td><xsl:value-of select="bookname"/></td>

<td><xsl:value-of select="author"/></td>

<td><xsl:value-of select="publishing"/></td>

</tr>

</xsl:for-each>

</table></td>

</tr>

<tr>

<td height="69" valign="top"> </td>

</tr>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

（2）编写index.xml文件，在该文件中创建一个books根元素，该元素由多个book元素组成，代码如下：

<?xml version="1.0" encoding="gb2312" ?>

<books>

<book>

<ISBN>7-115-14873-2</ISBN>

<bookname>ASP程序开发范例宝典</bookname>

<author>明日科技</author>

<publishing>人民邮电出版社</publishing>

</book>

<book>

<ISBN>7-115-14547-4</ISBN>

<bookname>JSP数据库系统开发完全手册</bookname>

<author>王国辉、李文立 杨亮</author>

<publishing>人民邮电出版社</publishing>

</book>

<book>

<ISBN>7-115-14689-6</ISBN>

<bookname>JSP数据库系统开发案例精选</bookname>

<author>王国辉、王易</author>

<publishing>人民邮电出版社</publishing>

</book>

<book>

<ISBN>7-111-15531-9</ISBN>

<bookname>ASP数据库开发实例解析</bookname>

<author>王国辉 于亚芳</author>

<publishing>机械工业出版社</publishing>

</book>

</books>

（3）在index.xml文件的第二行加入如下引用XSL样式表文件的代码。

<?xml-stylesheet href="style.xsl" type="text/xsl"?>

举一反三

根据本实例，读者可以：

  将保存客户信息的XML文档格式化输出；

  将保存员工信息的XML文档格式化输出。

实例354   使用IE XML数据岛输出XML文档

实例说明

在实例353中已经介绍了如何使用CSS XSL显示XML文档，本实例将介绍如何使用IE XML数据岛输出XML文档。运行本实例，在页面中将以表格的形式显示通过XML数据岛获取的朋友圈信息，如图14.6所示。

图14.6  使用IE XML数据岛输出XML文档

技术要点

使用IE XML数据岛输出XML文档的基本思路是：首先使用一个XML数据岛载入外部XML文档，然后将一个HTML的表格绑定到此数据岛上，最后将HTML表格内部的<span>标记使用datafld属性和XML文档对应的XML元素相互绑定。

实现过程

（1）编写friends.xml文件，在该文件中创建一个friends根元素，该元素由多个friend元素组成，代码如下：

<?xml version="1.0" encoding="gb2312"?>

<friends>

<friend>

<name>无语</name>

<address>长春市***街66号</address>  

<postcode>130031</postcode>

<tel>32768***</tel>

<qq>623912076</qq>

</friend>

<friend>

<name>辉儿</name>

<address>长春市***街77号</address>  

<postcode>130031</postcode>     

<tel>36895****</tel>

<qq>2124***12</qq>

</friend>

</friends>

（2）使用一个XML数据岛（id=f）载入friends.xml文档，并将其绑定到HTML表格（datasrc=#f）上，再将<span>标记的datafld属性和XML文档对应的XML元素相互绑定，关键代码如下：

<xml id="f" src="friends.xml"></xml>

<table width="90%" border="1" datasrc="#f" cellpadding="0" cellspacing="0" 00

  bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#999999">

<thead>

<tr>

<td align="center">名称</td>

<td align="center">联系地址</td>

<td align="center">邮政编码</td>

<td align="center">联系电话</td>

<td align="center">OICQ号码</td>

</tr>

</thead>

<tr>

<td><span datafld="name"></span></td>

<td><span datafld="address"></span></td>

<td><span datafld="postcode"></span></td>

<td><span datafld="tel"></span></td>

<td><span datafld="qq"></span></td>

</tr>

</table>

举一反三

根据本实例，读者可以：

  将保存主题或回复信息的XML文档以表格形式输出；

  将保存留言信息的XML文档以表格形式输出。

 

14.3  操作XML

通过JavaScript可以对XML文档进行控制。本节将介绍如何用JavaScript控制XML文档的分页显示和通过XML实现留言簿。

实例355   用JavaScript控制XML文档的分页显示

实例说明

本实例将介绍如何使用JavaScript控制XML文档的分页显示。运行本实例，如图14.7所示，在页面中将显示第一篇从XML文档中获取的博客文章，单击“下一篇”超级链接，即可查看下一篇博客文章，单击“上一篇”超级链接，即可查看上一篇文章。

图14.7  用JavaScript控制XML文档的分页显示

技术要点

本实例主要通过XML数据岛的recordset对象的absoluteposition属性、recordcount属性、movenext()方法和moveprevious()方法实现数据的分页导航功能。下面分别进行介绍。

l     absoluteposition：该属性用于返回当前记录的记录号。

l     recordcount：该属性用于返回总记录数。

l     movenext()：该方法用于将记录指针移动到下一条记录。

l     moveprevious()：该方法用于将记录指针向前移动一条记录。

实现过程

（1）编写doc.xml文件，在该文件中创建一个docs根元素，该元素由多个doc元素组成，代码如下：

<?xml version="1.0" encoding="gb2312"?>

<docs>

<doc>

<id>1</id>

<author>无语</author>       

<datetime>2007-03-03 11：50：12</datetime>

<topic>祝福</topic>

<content>你现在好吗？今天快乐吗？我从远方送你的祝福收到了吗？</content>

</doc>

<doc>

<id>2</id>

<author>wgh</author>

<datetime>2007-03-15 10：20：42</datetime>

<topic>春天</topic>

<content>东风来了，春天的脚步近了.....</content>

</doc>

</docs>

（2）首先使用一个XML数据岛（id=d）载入doc.xml文档，然后使用<span>标记的datasrc属性与id为d的XML数据岛进行绑定，再使用<span>标记的datafld属性与XML文档对应的XML元素进行绑定，关键代码如下：

<xml id="d" src="doc.xml" async="false"></xml>  

<table width="90%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"

bordercolordark="#FFFFFF" bordercolorlight="#999999">

<tr>

<td height="25" colspan="2">博客ID号：<span datasrc="#d"

datafld="id"></span></td>

<td width="35%">作者：<span datasrc="#d" datafld="author"></span></td>

<td width="43%">发表日期：<span datasrc="#d" datafld="datetime"></span></td>

</tr>

<tr>

<td height="25" colspan="4">博客主题：<span datasrc="#d"

datafld="topic"></span></td>

</tr>

<tr>

<td width="11%" height="25">文章内容</td>

<td height="25" colspan="3"><span datasrc="#d" datafld="content"></span></td>

</tr>

</table>

（3）编写自定义的JavaScript函数moveNext()，用于向后移动一条记录，代码如下：

<script type="text/javascript">

function moveNext(){

x=d.recordset;

if (x.absoluteposition < x.recordcount){

x.movenext();

   }

}

（4）编写自定义的JavaScript函数movePrevious()，用于向前移动一条记录，代码如下：

function movePrevious(){

x=d.recordset;

if (x.absoluteposition > 1){

x.moveprevious();

   }

}

</script>

（5）在页面的适当位置添加“上一篇”和“下一篇”超级链接，并在其onClick事件中调用相应方法，代码如下：

<a href="#" onClick="movePrevious()">上一篇</a>&nbsp;

<a href="#" onClick="moveNext()">下一篇</a>

举一反三

根据本实例，读者可以：

  实现网上社区中的文章浏览；

  实现分页显示留言信息。

实例356   通过操作XML数据岛实现添加、删除留言信息

实例说明

本实例将介绍如何通过操作XML数据岛实现添加、删除留言信息。运行本实例，在“留言人”文本框中输入“wgh”，在“表情”文本框中输入“微笑”，在“电话”文本框中输入“495****”，在“留言内容”文本框中输入“祝大家新年快乐！”，单击“添加留言”按钮，在页面中将以列表形式显示留言信息，如图14.8所示，单击“删除第一条留言”按钮，将删除第一条留言信息，单击“删除最后一条留言”超级链接，即可删除最后一条留言信息。

图14.8  通过操作XML数据岛实现添加、删除留言信息

技术要点

本实例主要通过XML DOM对象实现。XML DOM对象的全称是XML Document ObjectModel，即XML文档对象模型，XML DOM定义了访问和操作XML文档的标准方式。下面将对本实例中应用的XML DOM对象的属性和方法进行介绍。

1．createElement()方法

createElement()方法用于创建一个指定名称的元素，其语法格式如下：

xmlDocument.createElement(tagName);

参数说明

l     tagName：用于指定新元素的名称，区分大小写。

2．createAttribute()方法

createAttribute()方法用于创建一个指定名称的属性，其语法格式如下：

xmlDocument.createAttribute(name);

参数说明

l     name：用于指定属性名称。

3．createNode()方法

createNode()方法用于创建一个指定类型、名称及命名空间的新节点，其语法格式如下：

xmlDocument.createNode(type, name, nameSpaceURI);

参数说明

l     type：用于指定将要创建的节点的类型。

l     name：用于指定新节点的名称。

l     nameSpaceURI：用于指定一个定义命名空间的URI。

4．createTextNode()方法

createTextNode()方法用于创建一个新的text节点，并包含指定的数据，其语法格式如下：

xmlDocument.createTextNode(data);

参数说明

l     data：用于指定一个代表新text节点的字符串。需要注意的是，此时的text节点并没有添加到文件树中。若要将该节点添加到文件树中，必须使用插入方法（例如：insertBefore、replaceChild或appendChild）。

5．insertBefore()方法

insertBefore()方法用于在指定的节点前插入一个子节点，其语法格式如下：

objDocumentNode=xmlDocumentNode.insertBefore(newChild,refChild);

参数说明

l     newChild：用于指定一个包含新子节点地址的对象。

l     refChild：用于指定参照节点的地址。新的子节点将被插到参照节点之前。如果refChild参数没有包含在内，新的子节点会被插到子节点列表的末端。

6．removeChild()方法

removeChild()方法用于将指定的节点从节点列表中移除，其语法格式如下：

objDocumentNode=xmlDocumentNode.removeChild(oldChild);

参数说明

l     oldChild：用于指定一个要被移除的节点对象。

7．appendChild()方法

appendChild()方法用于在当前节点的最后加入一个新的节点，其语法格式如下：

xmlDocumentNode.appendChild(newChild);

参数说明

l     newChild：用于指定一个要添加新子节点的地址。

8．hasChildNodes ()方法

如果指定的节点有一个或更多个子节点，hasChildNodes ()方法将返回True，否则将返回False，其语法格式如下：

boolValue=xmlDocumentNode.hasChildNodes() ;

9．lastChild属性

lastChild属性为只读属性，用于返回一个对象。如果节点中没有包含最后子元素，将返回null，其语法格式如下：

objLastChild = xmlDocumentNode.lastChild;

实现过程

（1）编写board.xml文件，在该文件中创建一个boards根元素，该元素由多个board元素组成，代码如下：

<?xml version="1.0" encoding="gb2312"?>

<boards>

<board>

<person>无语</person>

<humor>微笑</humor>

<tel>13634449161</tel>

<message>你现在好吗？今天快乐吗？我从远方送你的祝福收到了吗？</message>

</board>

</boards>

（2）使用一个XML数据岛（id= board）载入board.xml文档，并将其绑定到HTML表格（datasrc=# board）上，再将<span>标记的datafld属性和XML文档对应的XML元素相互绑定，关键代码如下：

<xml id="board" src="board.xml"></xml>

<table width="100%" border="1" cellpadding="0" cellspacing="0" datasrc="#board"

  bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#96E2FA">

<thead>

<tr>

<th width="12%" height="27" bgcolor="# 6AC 7EC">留言人</th>

<th width="12%" bgcolor="# 6AC 7EC">表情</th>

<th width="21%" bgcolor="# 6AC 7EC">电话</th>

<th width="55%" bgcolor="# 6AC 7EC">留言内容</th>

</tr>

</thead>

<tr>

<td height="27"><span datafld="person"></span></td>

<td><span datafld="humor"></span></td>

<td><span datafld="tel"></span></td>

<td><span datafld="message"></span></td>

</tr>

</table>

（3）编写自定义的JavaScript函数addElement ()，用于在id为board的XML数据岛中添加一条留言信息，代码如下：

<script language="javascript">

xmldoc = board;

//添加留言信息

function addElement() {

var rootElement = xmldoc.documentElement;

//创建留言元素

var newBoard = xmldoc.createElement('board');

//添加留言人子元素

var person = xmldoc.createElement('person');

var personF = xmldoc.createTextNode(document.myform.person.value);

person.appendChild(personF);

newBoard.appendChild(person);

//添加表情子元素      

var humor = xmldoc.createElement('humor');

var humorF = xmldoc.createTextNode(document.myform.humor.value);

humor.appendChild(humorF);

newBoard.appendChild(humor);

//添加电话子元素

var tel = xmldoc.createElement('tel');

var telF = xmldoc.createTextNode(document.myform.tel.value);

tel.appendChild(telF);

newBoard.appendChild(tel);

//添加留言信息子元素       

var message = xmldoc.createElement('message');

var messageF = xmldoc.createTextNode(document.myform.message.value);

message.appendChild(messageF);

newBoard.appendChild(message);

//向文档中追加一条留言信息

rootElement.appendChild(newBoard);

}

</script>

（4）编写自定义的JavaScript函数deleteFirstElement ()，用于删除第一个节点，代码如下：

<script language="javascript">

function deleteFirstElement(){     //删除第一个节点

var rootElement = xmldoc.documentElement;

if (rootElement.hasChildNodes())

rootElement.removeChild(rootElement.childNodes.item(0));     //删除第一个节点

}

</script>

（5）编写自定义的JavaScript函数deleteLastElement ()，用于删除最后一个节点，代码如下：

<script language="javascript">

function deleteLastElement(){     //删除最后一个节点

var rootElement = xmldoc.documentElement;

if (rootElement.hasChildNodes())

rootElement.removeChild(rootElement.lastChild);     //删除最后一个节点

}

</script>

（6）在页面的适当位置添加用于收集留言信息的表单，在该表单中添加“添加留言”按钮、“删除第一条留言”按钮和“删除最后一条留言”按钮，并在这3个按钮的onClick事件中调用相应方法，代码如下：

<form action="" method="post" id="myform" name="myform">

<table width="70%" height="131" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="24%" height="27" align="center">留&nbsp;言&nbsp;人：</td>

<td width="76%"><input type="text" name="person" id="person" size="50" /></td>

</tr>

<tr>

<td height="27" align="center">表&nbsp;&nbsp;&nbsp;&nbsp;情：</td>

<td><input type="text" name="humor" id="humor" size="30" /></td>

</tr>

<tr>

<td height="27" align="center">电&nbsp;&nbsp;&nbsp;&nbsp;话：</td>

<td><input type="text" name="tel" id="tel" size="20" /></td>

</tr>

<tr>

<td align="center">留言内容：</td>

<td><textarea name="message" cols="50" rows="5" id="message"></textarea></td>

</tr>

<tr>

<td height="40" colspan="2" align="center"><input name="button" type="button"

class="btn_grey" onClick="check(myform);" value="添加留言" />

&nbsp;

<input name="button22" type="button" class="btn_grey"

onClick="deleteFirstElement();" value="删除第一条留言" />

&nbsp;

<input name="button2" type="button" class="btn_grey"

onClick="deleteLastElement();" value="删除最后一条留言" />

&nbsp;</td>

</tr>

</table>

</form>

举一反三

根据本实例，读者可以：

  实现动态添加或删除网上论坛的主题信息。