javascript 读取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文件。虽然XMLDOM已经变成Web开发的重要组成部分,但是目前仅有IEMozilla两个浏览器支持客户端处理XML。下面将分别介绍在IEMozilla中创建DOM并载入XML的方法。

l IE中创建DOM并载入XML

1)创建XML DOM对象的实例

MicrosoftJavaScript中引入了用于创建ActiveX对象的ActiveXObject类,通过该类可以创建XML DOM对象的实例,代码如下:

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

2)载入XML

MicrosoftXML 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文件,以及是同步还是异步模式载入即可。

MozillaXML 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文件并显示在页面中。在该函数中,首先实现在IEMozilla浏览器中创建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对象实现。XMLHttpRequestXMLHTTP组件的一个对象,通过对该对象的调用可以实现像桌面应用程序一样的与服务器进行数据层面的交换,而不需要每次请求都刷新整个页面,也不需要将每次的数据操作都交付给服务器去完成。在使用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样式表实现,而且也可以借助一些客户程序实现。本节将介绍如何通过CSSXSLIE 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 115012</datetime>

<topic>祝福</topic>

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

</doc>

<doc>

<id>2</id>

<author>wgh</author>

<datetime>2007-03-15 102042</datetime>

<topic>春天</topic>

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

</doc>

</docs>

2)首先使用一个XML数据岛(id=d)载入doc.xml文档,然后使用<span>标记的datasrc属性与iddXML数据岛进行绑定,再使用<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对象的属性和方法进行介绍。

1createElement()方法

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

xmlDocument.createElement(tagName);

参数说明

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

2createAttribute()方法

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

xmlDocument.createAttribute(name);

参数说明

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

3createNode()方法

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

xmlDocument.createNode(type, name, nameSpaceURI);

参数说明

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

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

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

4createTextNode()方法

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

xmlDocument.createTextNode(data);

参数说明

l     data:用于指定一个代表新text节点的字符串。需要注意的是,此时的text节点并没有添加到文件树中。若要将该节点添加到文件树中,必须使用插入方法(例如:insertBeforereplaceChildappendChild)。

5insertBefore()方法

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

objDocumentNode=xmlDocumentNode.insertBefore(newChild,refChild);

参数说明

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

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

6removeChild()方法

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

objDocumentNode=xmlDocumentNode.removeChild(oldChild);

参数说明

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

7appendChild()方法

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

xmlDocumentNode.appendChild(newChild);

参数说明

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

8hasChildNodes ()方法

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

boolValue=xmlDocumentNode.hasChildNodes() ;

9lastChild属性

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 (),用于在idboardXML数据岛中添加一条留言信息,代码如下:

<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>

举一反三

根据本实例,读者可以:

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

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值