XML数据在浏览器端的动态关联显示处理研究

维普资讯

～　

何莹莹　

【华东交通火学，南昌３３００１３）　

（Ｅａｓｔ　Ｃｈｉｎａ　Ｊｉａｏｔｏｎｇ　Ｕｎｌ　ｖｅｒｓｉｆｙ。Ｎａｎｃｈａｎｇ　３３００ｌ３】　

摘要：本文结音＿网上教学ｅｅ的应用实践，研究了在客户端浏览器中利用Ｊａｖａｓｃｒｉｐｔ脚本访问ＸＭＬ文档井实现数据的关　

联显示处理的典型方法．如此可提高课件的动冬交互访问效率　课件可用干备粪Ｗｅｂ服务器平台．也可直接在光盘上浏览诫　

件　

关键词：）（ＭＬ　Ｏａｖａｓｃｒｉｐ￣：ＤＯＭ；数据动态关联显示：浏览器　

中田分类号：ＴＰ３１１　文献标识码：Ａ　文章编号：ｌ６７１—４７９２一（２００６）Ｉ一００９４—０３　

Ａｂｓｔｒａｃｔ＇．１ｎｃｏｃｐｏｒａ￣ｅ　ｗｊｔｈ　ｔｈｅ　ｄｅｓｉｇｎ　ｏｆ　ｎｅｔｗｏｒｋ　ｃｏｕｒｓｅｗ￣ｒｅ　Ｉｎｔｍ　ａｃｔｉ　Ｖ。ｐｒｏｃｅｓｓ・ｔｈｅ　ｐａｐｅｒ　ｉｎｔｒｏｄｕ　ｅ。ｔｈ　

ｍｅｔｈｏｄｓ　ｏｆ　ｕｓｉｎｇ　Ｊａｖａｓｃｒｌｐｔ　ａｕｅｓｓｌｎｇ　ｔｈｅ　ＸＭＬ　ｄｏｃｕｍｅｎＬ　ｔｏ｛ｍｐｌｅｍｅｎｔ　ｔｈｅ　ｄａｔａ　ｒｅｌａｔｉ　ｏｎ　ｄｉ　ｓｐｌａＹ　ｉｎ　ｂｒｏｗｓｅｒ・Ｔｈｅ　

ｅｆ￣ｉｃＪｅｎｔ　ｏｆ　ｄｙｎａｍｉ　ｃ　ｐｒｏｃｅｓｓ　ｉｓ　ｉｍｐｒｏｖｅｄ　８ｎ　１　ｃｏｕｒｓｅ￣ａｒｅ　ｃａｎ　ｂｅ　ｕｓｅｄ　ｉｔｈ　ａｎｙ　ｗｅｂ　ｓｅｒｖｅｒ．ａｌ　ｓｏ　Ｃａｒｌ　ｂｅ　ｄｉｒｅｃｔｌｙ　

ａｃｃｅｓｓｅｄ　ｊｎ　ｄｉ　ｓｋ　

Ｋｅｖｗｏｒｄ：ｘＭ１　；Ｊａｖａｓｃｒｉｐｔ：Ｄｏｃｕｍｅｎｔ　Ｏｂｊｅｃｔ　Ｍｏｄｅｌ；Ｄａｔａ　Ｉ．ｅｌａｔ￣ｏｎ　ｄｉｓｐｌａｙ：Ｂ１’ｏｗｓｅｒ　

＜ｓｔｕｄｅｎｔ＞　

０引育　

ＸＭＩ　作为一种很好的数据丧永方式，枉应用系统集成设　

计中受到Ｊ“泛采用。为ｒ提高心用系统的娥率将数据带到洲　

览器客户端．利用脚本语育实现动恋交互处理，在很大程度　

＜ｕｓｅｒｎ８ｌｌＩｅ＞杨璞（／ｕｓｅｒｎａｍｅ＞　

＜ｕｓｅｒｉｄ＞２００１０２１００４０１０１‘｛ｕｓｅｒｉｄ＞　

＜ｌｏｇｉｎｔｉｍｅｓ＞２５＜／ｌｏｇｉｍｔＩｍｅｓ＞　

＜／ｓｔｕｄｅｎｔ＞　

‘ｓｔｕｄｅｎｔ　

卜可以提高整个应用的效率　该应用模式可节省网络带宽．　

避免　服务器的频繁变瓦，Ｉ叫时加快虚Ｊ＿ｆ】响成速度　在笔者　

研制的网络教学支撑平台中．为了形成一个新版的能脱离数　

据库环境使用的网络课件，同ｌ对叉要保持原谋件中数据访１ｉ＿］ｊ　

的动态变化特点，采用ｊ．－一种巢十ＸＭＬ的动态交互方察。首　

先通过转换程序将数据库数据转化为×　Ｌ文档，然后通过　

；ａｖａｓｃ！，ｉｐｔ访问ｘ札文档的方式来实现数据的动态访问　采　

用这・技术实现的课件其有蜓广泛的应用｛叫＿．可将谦件部鬻　

在任何类型的Ｗｅｂ暇务器上，也町以文件游州方式直接浏惋　

光盘ｌ　的课件　在客户浏览器端通过对　文档的动态检索　

．

‘ｆｓｔｕｄｅｎｔ＞　

＜／ｃＩＢＳＳ￣　

‘ｃｌａｓｓ　ｎａｍｅ＝’计算机２００１—２’＞　

＜／ｃ１ａｓ９　

ｃｉａｓｓｅｅ＞　

结台ＤＨＴ　技术实现动态交＝】ｊ＝＝显示　本文拟就应埔蕊丽问的　

数据关联显示处理的若干技术进行总结。　

１　同一页面中数据的关联丑示　

以班级学生倩息］匿询为例．ｘＭＬ文件ｃ１ａｓｓｓｔｕｄｏｎｔ．　ｍＩ　

小包括备班学生的相关倩息　

ｃ１ａｓｓｅｓ＞　

在如图…所示的页面中，点击菜班将显示该班的所有学　

生的相关债息，也就是页面Ｆ半部分学生倌息的显示取决于　

１词一页耐中上半部分所选择的班级，想查哪个班的学生信息　

只要点击相应班级即可　

ｒ，　ｊ　

】　：　

ｉ＊一

＋　

＿

－　

－　

．　

：　

ｉ　

ｊ　ｔ　

一—　’一

ｍｃｌＢｓ８　ｎａｍｅ＝’计算机２００１—１’）　

维普资讯

图一班级与学生信息的关联显示　

为了达到上述要求，需要解决如下问题：　

首先要检索出所有的班级（１）ＸＭＬ数据的检索　

，

在用户选择了班级后要进一

步找出该班学生的信息。　‘　

（２）数据的显示处理　

无论是班级的显示还是学生信息的显示均要转化为耵儿　

标记来实现。因此，要将数据拼接为特定的格式，然后将其　

显示在指定的位置。

（３）事件处理　

与用户的交互将通过事件触发来实现。因此，在内容显　

示中要设定事件调用，并编写事件处理代码。　

１．１　ＸＭＬ数据的访问　

ｘ、ｉＬ文档以数据岛的形式引入页面中，脚本语言采用广　

泛支持的Ｊａｖａｓｃｒｉｐｔ编程。在Ｊａｖａｓｃｒｉｐｔ代码中通过ＸＭＬ文　

档对象模型访问ＸＭＬ数据。ＸＭＬ文档在结构上为树型层次结

构，利用ｘ、ｉＬ文档对象模型提供的各种搜索处理方法可方便　

检索到结点信息　例ｊｃ　通过结点对象的ｃｈｉｌｄＮｏｄｅｓ属性可　

获取所有子结点，通过ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ方法可查找带　

有某标记的结点集，通过ｓｅｌｅｃｔＸｏｄｅｓ和ｓｅｌｅｃｔＳｉｎｇｌｅＮｏｄｅ　

来选取符合Ｘｐａｔｈ限制设定的结点。在获取结点的基础上，　

通过元素结点的ｔｅｘｔ属性可得到其对应的文本数据，通过

ｇｅｔＡｔｔｒｉｂｕｔｅ方法可得到结点的某个属性值。　

１．２将结果数据拼接为要显示的串　

班级的显示处理通过文档的ｏｎｌｏａｄ事件触发执行，在　

ｂｏｄｙ标记中我们设定其调用ｄｉｓｐｃｌａｓｓ（）方法。在该方法　

中通过Ｊ　，ａｓｃｒ　ｉＰｔ程序访问ＸＭＬ文档可获取所有班级　

（ｃｌａｓｓ）结点的ｃｌａｓｓｎａｍｅ屙陛，然后拼接成一个ＨＴＭＬ表格　

形式的串（ｓｔｒ），每行显示３个班级。　

１．３利用ＤＨＴ￣Ｌ技术显示结果　

为了实现内容的动态显示，需要利用ＤＨＴＭＬ技术。在页　

面中通过＜ｄｉｖ＞标记定义两个层ｂＪ和ｓｔｕｄｅｎｔ，分别用来显

示班级列表和学生信息。以下代码可将拼接后的含所有班级

的ＨＴＭＬ字符串显示在ｂＪ处。

ｂｊ．ｉｎｎｅｒＨＴＭＬ＝ｓｔｒ：　

Ｉ．４为关联显示设置事件处理

为了让班级名能进行点击，将班级定义为超链显示，同

时在该超链标记上通过ｏｎｃｌｉｃｋ属性设置单击事件对应的函

数ｄｉｓｐＳｔｕｄｅｎｔ（），它将根据班级名去访问ＸＭＬ文档，得到　

本班的所有学生信息，经过拼接处理后显示在标识为ｓｔｕ－－　

ｄｅｎｔ的层处，从而实现班级与学生信息在同一页面中的动态　

关联显示。以下为关键代码：　

＜ＸＭＬ　ｓｐｃ＝”ｃｌａｓｓｓｔｕｄｅｎｔ．ｘｍ１．．ＩＤ＝”ｘｍｌ　ｄ　ｓｏｌ”　

ａｓｙｎｃ＝”ｆａｌｓｅ”＞＜／ＸＭＬ＞　

＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／Ｊａｖａｓｃｒｉｐｔ”＞　

／““ｄｉｓｐＣｌａｓｓ函数：显示所有班级““／　

ｆｕｎｃｔｉｏｎ　ｄｉｓｐＣｌａｓｓ（）｛　

ｒｏｏｔ＝ｘｍｌｄｓｏ１．ｄｏｃｕｍｅｎｔＥｌｅｍｅｎｔ：／／根结点　

ｍ＝ｒｏｏｔ．ｃｈｉｌｄＮｏｄｅｓ．１ｅｎｇｔｈ；　／／求班数　

Ｓｔｒ＝”＜ｔａｂｌｅ　ｗｉｄｔｈ＝９０％＞”；　

ｘ－－

ｆ

ｒｏｏｔ．ｃｈｉ

ｏｒ（ｉ＝Ｉ；ｉ　

　ｌ

－

　ｄＮｏｄｅ　

硼；ｉ＋＋）｛／

ｓ．ｉ　

／

ｔｅｍ（ｉ—Ｉ）．ｇｅｔＡｔｔｒ

处理所有班　

　ｉ　ｂｕ　ｔｅ　

堇　

ｒ　

（”ｅｌａｓｓｎａｍｅ”）；　数　

ｓｔｒ＝ｓｔｒ＋”＜ｔｄ＞＜Ａ　ｈｒｅｆ　ｏｎｅｌｉｃｋ＝ｃｈｅｃｋ（　＋＿＼十ｔ．’）　据　

ｓｔｙｌｅ＝’ｃｕｒｓｏｒ：ｈａｎｄ’　－ｂＸ－ｂ”　／ｆ＾　ｔｄ＞　

在　

制　

ｉｆ（ｉ％３￣０）　ｓｔｒ＝ｓｔｒ＋”　ｔｒ　”：／／每隔３个班换行　览　

）

ｓｔｒ＝ｓｔｒ＋”

＜／ｔａｂｌｅ＞”；　

强　

的　师　

）　动　

ｂｊ．ｉｎｎｅｒＨＴＭＬ＝ｓｔｒ；　／／在层ｂＪ中显示所有班级　态　

）　关　

／””ｄｉｓｐＳｔｕｄｅｎｔ函数：显示班级学生““／　联　

ｆｕｎｃｔＪｏｎ　ｄｉｓｐＳｔｕｄｅｎｔ（ｍｙｂｄ）｛　

垦　

ｑ，Ｘ　

ｘｍｌ　ｄｓｏ２＝ｘｍｌ　ｄ　ｓｏ１．ｓｅｌｅｃｔＳｉ　ｎｇｌ　ｅＮｏｄｅ（”／／ｅ　１　ａｓｓ　处　

［＠ｅｌａｓｓｎａｍｅ＝…＋ｍｙｂＬｊ＋…］＇ｔ）；／／找该班级　哩　

ｓｔｒ＝””；　

研　

究　

ｍ＝ｘｍｌｄｓｏ２．ｃｈｉｌｄＮｏｄｅｓ．１ｅｎｇｔｈ：　

ｌ　

ｓｔｒｍ”＜ｂ＞＜ｆｏｎｔ　ｃｏｌｏｒ＝’＃８０００８０　ｓｉｚｅ＝４￣生名单＜／　

ｆｏｎｔｘ／ｂｘｔａｂｌｅ　ｗｉｄｔｈ＝９０％＞＜ｔｄ＞姓名＜／ｔｄｘｔｄ　登录次数　

＜／ｔｄ＞…　ｔｒ　”；　

ｓ＝ｘｍｌｄｓｏ２．ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇ　ａｍｅ（”ｓｔｕｄｅｎｔ”）；　

ｆｏｒ（ｉ＝Ｏ；Ｊ＜Ｓ．１ｅｎｇｔｈ；ｉ＋＋）　｛　ｘ　ｌ＝Ｓ．ｊ　ｔｅｍ（ｉ）．　

ｓｅｌｅｃｔＳｉｎｇｌｅＳｏｄｅ（”ｕｓｅｒｎａｍｅ”）．ｔｅｘｔ；Ｘ２＝ｓ．ｉｔｅｍ（ｉ）．　

ｓｅｌｅｃｔＳｉｎｇｌｅ　ｄｅ（”ｕｓｅｒｉｄ”）．ｔｅｘｔ；　

…．　ｓｔｒ＝ｓｔｒ＋”＜ｔ一＞”＋ｘ１＋“＜／ｆｏｎｔ＞＜／ｔｄ＞＋…．　

）　

ｓｔｒｍｓｔｒ＋”＜／ｔａｂｌｅ＞”；　

ｓｔｕｄｅｎｔ．ｉｎｎｅｒＨＴＭＬ＝ｓ￣ｔｒ；　

】　．　

＜／ｓｃｒｉｐｔ＞　

＜ｂｏｄｙ　ｏｎｌｏａｄ＝”ｄｉｓｐＣｌａｓｓ（）”　

＜ｆｏｎｔ　ｓｉｚｅ＝…４　ｃｏｌｏｒ￣”＃００００８０”＞＜ｂ＞选择班级＜／ｆｏｎｔ＞＜／　

ｂ＞　

＜ｄｉｖ　ｉｄ＝”ｂｊ”＞＜／ｄｉｖ＞＜ｂｒ＞　

＜ｄｉｖ　ｉｄ＝　ｓｔｕｄｅｎｔ”ｘ／ｄｉｖ＞＜ｂｒ＞　

＜／ｂｏｄｙ＞　

２多级页面间数据关联显示处理　

如果需要进一步查询每个学生的详细资料，可以在学生　

显示处安排查询超链。比如查某学生发表的讨论内容，我们　

需要在一个新页面中显示结果，问题是新页面如何得到学生　

的标识信息。现在不是像ＡＳＰ脚本语言那样的动态页面，可　

通过ｒｅｑｕｅｓｔ对象获得前一页面提交的参数。笔者采用的办　

法是将学生标识记录在ｃｏｏｋｉｅ变量中。对Ｃｏｏｋｉｅ的读写访　

问可用Ｊａｖａｓｃｒｉｐｔ实现。通过对超链接的点击触发执行　

ｓｅｔＣｏｏｋｉｅ（）函数并保存学生标识到Ｃｏｏｋｉｅ变量ｓｔ中。具　

体代码如下，其中，ｘ１和ｘ４分别是学生标识和讨论发表数。　

・　

１　１　

维普资讯

＜ａ　ｈｒｅｆ＝　ｔａ１ｋｌｉｓｔ．ｈｔｍ　

。”十ｘ１十　）＞“十ｘ４十“（／ａ＞　

／”ｓｅｔＣｏｏｋｉｅ函数：设置Ｃｏｏｋｉ　ｅ变量值一／　

ｆｕｎｃｔｉｏｎ　ｓｅｔＣｏｏｋｉｅ（ｎａｍｅ，ｖａｌ　ｕｅ）（　

ｄｏｃｕｍｅｎｔ．ｃｏｏｋｉｅ＝ｎａｍｅ＋”＝”＋ｅｓｃａｐｅ（ｖａｌｕｅ）＋”；。　

）　

在实现讨论内容显示￣ｔａｌｋｌｉｓｔ．ｈｔｍ页面巾，将通过页　

面装载事件触发执行ｄｉｓｐＤｉｓｃｕｓｓ（）方法。它通过ＧｅｔＣｏｏｋｉｅ　

（“ｓｔ“）得到学生标识，并根据该标识从讨论区对应的ＸＭＬ文　

件中提取该学生发表的帖子并显示出来。具体代码如下：　

ｆｕｎｃｔｉ０１１　ｄｉｓｐＤｉＳＣＨＳＳ０｛　

ｓｔｉｄ＝ＧｅｔＣｏｏｋｉｅ（”ｓｔ“）；　

ｍ　ｙ　ｔ　ａ　１　ｋ　ｓ＝ｘ　ｍ　１　ｄ　Ｓ　０　１．Ｓ　ｅ　１　ｅ　ｃ　ｔ　Ｎ　０　ｄ　ｅ　ｓ（“／／ｔ　ａ　ｌ　ｋ　

【ＵｓｅｒＮａｍｅ＝～。＋ｓｔｉｄ十…＝ｌ＿＿）；／／过滤该生发表的帖子　

ｓＺｒ＝“＜ｐｒｅ＞“；　

ｆｏｒ（ｉ＝Ｏ；ｉ＜ｍｙｒａ１ｋｓ．１ｅｎｇｔｈ；ｉ十十）　

（ｘ＝ｍｙｔａｌｋｓ．ｉｔｅｍ（ｉ）．ｃｈｉｉｄＮｏｄｅｓ．ｉｔｅｍ（１）．ｔｅｘｔ；　

ｓｔｒ＝ｓｔｒ￣”标题：＜ｆｏｎｔ　ｃｏｌｏｒ－－。ｅ７２３ａ１。＞“＋×＋　

＜／ｆｏｎｔｘｂｒ＞“；／／拼接要显示的内容　

）　

ＧｅｔＣｏｏｋｉｅ（）函数的具体实现比较常见，这里略去。　

３同一页面的多帧数据关联显示处理　

本教学系统中安排了３帧：①章节导航帧；②内容显示　

帧；③功能选择帧。学生可以通过章节导航帧选择当前学习　

的知识点，每次变换知识点在内容帧将显示相关教学内容。　

同时，学生可以在功能选择帧选择各种练习超链让内容显示　

帧显示出对应章节的习题供学生操练，如图二所尔，从而实　

现边学边练的目标。本系统中，所有练习、讨论均与知识点　

建立关联，也就是调出的习题、讨论内容应该随章节导航选　

取的知识点而改变。　

图二知识点与练习关联　

显然，为了记住知识点，可以采用前面介绍的ｃｏｏｋｉｅ变　

量的方式，但建议尽可能少用ｃｏｏｋｉｅ，因为Ｃｏｏｋｉｅ的使用　

有一定限制。这里，笔者推荐采用隐含域来记录状态信息。　

在浏览章节时通过触发执行的事件代码将知识点存放到页面　

的一个隐含域（如ｍｅ）中，其它帧要得到知识点信息可以通　

过访问该帧（ｎａｖ）的隐含域，然后再根据知识点检索相关　

的练习题。其关键代码如下所示：　

ｚｓｄ＝ｐａｒｅｎｔ．ｆｒａｍｅｓ［＿＿ｎａｖ”］．ｄｏｃｕｍｅｎｔ．ａｌ１．ｍｅ．ｖａｌｕｅ；　

ｘｍ　Ｉ　ｄ　Ｓ０　２＝Ｘｍ　１　ｄ　Ｓ　０　１．Ｓ　ｅ　１　ｅ　ｃ　ｔＮ０ｄ　Ｏ　Ｓ（”／／ｑ　ｕ　ｅ　ｓｔ｛ｏ　ｎ　

［ｐｏｉｎｔ＝…＋ｚｓｄ￣…¨ｌ１）；　

在此基础上我们可以进一步实现试题的显示处理。由于　

每次只显示一道试题，因此涉及对检索到的哪道试题进行显　

示的问题，以及如何实现试题的解答对错提示和翻动试题的　

问题。文献ｆ　１］中给出了利用数据岛记录集对象实现对试题　

的翻动显示处理。另一个更高效的办法是利用一个全局变量　

记录当前处理的试题序号（ｃｍ），然后通过改动该序号实现　

试题的翻动访问，通过序号也可得到当前试题的内容和答　

案。以下为单选试题解答对错的判定处理检查函数。　

ｆｕｎｃｔｉ　ｏｎ　ｃｈｅｃｋ（Ｘ）　｛　

ｍ＝ｘｍｌｄｓｏ２．ｉｔｅｍ（ｃｍ）．ｓｅｌｅｃｔｓｉｎｇｌｅＮｏｄｅ（“ａｎｓｗｅｒ“）．ｔｅｘｔ；　

／／获取当前试题答案　

｛ｆ（ｘ．ｖａｌｕｅ＝＝ｍ）　｛／／选项的值与标准答案一致否　

ａｌｅｒｔ（“对！“）；　　・

）ｅｌｓｅ　

（　

ａｌｅ：、ｔ（”错　；　

）　

）　

以＿Ｉ二代码中，参数ｘ为解答按钮对象　所有选项按钮含　

如下形式的ＨＴＭＬ代码：　

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｒａｄｉｏ”ｎａｍｅ：“ａｎｓ“ｖａｌｕｅ＝”Ａ“ｏｎｃｌ　ｉｃｋ＝　ｃｈｅｃｋ　

（ｔｈｉ　ｓ）”＞　

４结束语　

文章结合网上教学的应用实践介绍厂如何在客户浏览器　

端实现ＸＭＬ数据的关联显示处理。利用本文介绍的技术可将　

网上积累的课件转化为ＸＭＬ形式进行发布。基于ＸＭＬ的新课　

ｉ　鞋　黔　｝　ｔ々　静　瓢　

件仍然可以保留原有课件中的动态交互功能。由于所有内容　

显示处理均在客户浏览器上进行，所以，课件可放置到任何　

类型的Ｗｅｂ服务器上，也可以通过光盘直接浏览访问，具有　

很人的实用性。希望本文能对开发基于ＸＭＬ的动态交互应用　

有所帮助。　

参考文献　

［１］（美）Ｋｕｒｔ　Ｃａｇｌｅ著．周生柄译．Ｘ．￣ＩＬ高级开发指南　

［Ｍ】．北京：电子工业出版社，２００１．　

作者简介　

何莹莹，女，在读工程硕士，主要研究方向：电子商务