XML+XSL+CSS+ASP打造留言簿

HotHeart 楼主

第一次在后台版发帖，有些担心^_^。同时发表在了我的blog上：XML+XSL+CSS+ASP打造留言簿

前段时间无意间看到一个博客的RSS可以用XSL格式输出并且能在Firefox里浏览，想到自己以前写的一个XML留言簿因为不兼容Firefox所不了了之了，现在看到他的能在Firefox浏览就觉得很好奇，看了一下代码，一句一句的比对，最后终于找到了原因，也就把这个留言簿给完成了。因为是一个简单的XML留言簿，所以取名SXGB(Simple XML GuestBook)。

留言本演示，管理密码为test：http://home.goofar.com/hotheart/gbook/gbook.asp

首先定义留言簿的XML文档的格式。作为一个留言簿，不需要太复杂的内容，于是我就给留言内容分为3个部分：留言者姓名、留言者主页和留言内容。另外，一个留言簿还需要有使用者的一些信息，包括用户名和用户主页。再有，在留言比较多时还需要分页信息。大致结构完成后就可以开始写XML文档模板了。

XML文档根元素定义为gbook
XML文档模板gbook.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <!-- DTD file -->
   
3. <!DOCTYPE gbook SYSTEM "sxgb.dtd">
   
4. <!-- XSL file -->
   
5. <?xml-stylesheet type="text/xsl" href="gbook.xsl"?>
   
6. <gbook>
   
7.         <!-- 留言簿相关信息 -->
   
8.         <info>
   
9.                 <!-- 用户名 -->
   
10.                 <user>HotHeart</user>
    
11.                 <!-- 用户主页 -->
    
12.                 <home>http://www.xujiwei.cn</home>
    
13.                 <!-- 分页信息，分别为目前所在页，总页数，上一页，下一页 -->
    
14.                 <pagenow>1</pagenow>
    
15.                 <pagetotal>1</pagetotal>
    
16.                 <pageprev>1</pageprev>
    
17.                 <pagenext>2</pagenext>
    
18.                 <!-- 是否已经登陆，用来处理是否显示登陆框 -->
    
19.                 <logined>NO</logined>
    
20.         </info>
    
21.         <!-- 留言列表 -->
    
22.         <messages>
    
23.                 <!-- 一个留言 -->
    
24.                 <message>
    
25.                         <!-- 留言ID -->
    
26.                         <id>1</id>
    
27.                         <!-- 留言者姓名 -->
    
28.                         <username>Admin</username>
    
29.                         <!-- 留言时间 -->
    
30.                         <time>2005-08-09 12:00</time>
    
31.                         <!-- 留言者主页 -->
    
32.                         <homepage>http://www.xujiwei.cn/</homepage>
    
33.                         <!-- 留言内容 -->
    
34.                         <content><![CDATA[ 留言内容 ]]></content>
    
35.                 </message>
    
36.         </messages>
    
37. </gbook>

复制代码

要注意在引用XSL时不能用
<?xml:stylesheet type="text/xsl" href="gbook.xsl"?>
xml和stylesheet之间应该用一杠(-)而不能用冒号(:)，在Firefox里是不支持用冒号的。

一个好的XML文档，除了要有结构性，还应该要有有效性，所以在XML文档的一开头就定义了文档类型定义(DTD) sxgb.dtd，下面就来把这个文档类型定义给完成。因为已经设计好留言簿XML文档的结构，所以写出DTD是很方便的。
文档类型定义sxgb.dtd

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <!ELEMENT gbook (info,messages)>
   
3. <!ELEMENT info (user,home,msgtotal,pagenow,pagetotal,pageprev,pagenext,logined)>
   
4. <!ELEMENT messages (message+)>
   
5. <!ELEMENT message (id,username,time,homepage,content)>
   
6. <!ELEMENT user (#PCDATA)>
   
7. <!ELEMENT home (#PCDATA)>
   
8. <!ELEMENT msgtotal (#PCDATA)>
   
9. <!ELEMENT pagenow (#PCDATA)>
   
10. <!ELEMENT pagetotal (#PCDATA)>
    
11. <!ELEMENT pageprev (#PCDATA)>
    
12. <!ELEMENT pagenext (#PCDATA)>
    
13. <!ELEMENT logined (#PCDATA)>
    
14. <!ELEMENT id (#PCDATA)>
    
15. <!ELEMENT title (#PCDATA)>
    
16. <!ELEMENT username (#PCDATA)>
    
17. <!ELEMENT time (#PCDATA)>
    
18. <!ELEMENT homepage (#PCDATA)>
    
19. <!ELEMENT content (#PCDATA)>

复制代码

<!ELEMENT messages (message+)>中＋号表示留言列表中至少有一条留言，但实际应用可能会出现没有留言的情况，为了应对这种情况，我在输出XML文档的ASP程序输出一条系统产生的留言，提示目前还没有留言。

接下来是很重要的部分，XSL的编写了。

XSL文档gbook.xsl
点击这里查看XSL文档gbook.xsl

在定义XSL名称空间时，应该用http://www.w3.org/1999/XSL/Transform，即

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

复制代码

而不能用http://www.w3.org/TR/WD-xsl，不知为什么如果使用这个名称空间，在Firefox会显示错误：分析 XSLT 样式表单失败。

在XSL里，一个很重要的概念就是模板。一个模板就对应一块内容的格式化输出，在构建模板时，可以从大到小，即先构建全局的模板，然后再处理每一块细分的内容，也可以从小到大，先构建好细分内容的模板，然后将它们组合起来形成整体的模板。在XSL里，创建一个模板使用下面的标记：
[code[<xsl:template match="/gbook">
<!-- 模板内容 -->
</xsl:template>[/code]
其中match表示的是这个模板对应那个标记。

使用模板有两种方法：
第一种是直接应用：

1. <xsl:apply-templates select="info"/>

复制代码

这种方法是选择当前标记下的info标记并使用match为info的模板进行处理
第二种是循环选择：

1. <xsl:for-each select="message">
   
2. <!-- 模板内容 -->
   
3. </xsl:for-eace>

复制代码

在循环选择中，模板直接写在for-each之中，但是当前上下文已经转到message。

至于在select中使用的表达式，属于XPath部分，可以参考W3C的XPath文档(XML Path Language)

在gbook.xsl中还使用到的标记有：

<xsl:value-of select="content"/>
这是在XSL中常用的标记之一，输出结果是选择节点的值，通过用它来输出节点的值，在这个留言本中，它用来输出用户名、留言者姓名、留言内容等。

<xsl:attribute name="href">gbook.asp?page=1</xsl:attribute>
用来给当前标签添加一个属性，在留言簿中用来给分页导航添加网址。其中name]属性表示要添加属性的名字，标记包含的内容为要添加属性的值。

<xsl:if test="id!=''"><!-- 处理内容 --></xsl:if>
判断test中的表达示结果，如果为真则处理包含的内容，假则忽略。要注意是，如果是判断小于，就不能用“<”，而应该用“&lt;”，因为“<”是标签起始标志，如果不进行转换则在浏览器中会出现错误。

然后就是ASP输出留言簿需要的XML文档了，这个只要按照前面定义的格式，从数据库中读取记录按照模板输出即可，不过需要在输出之前定义MIME类型：
Response.ContentType="application/xml"
指明这是一个XML文档。另外，因为整个留言簿都使用的UTF-8编码，需要在ASP中指定编码：
CodePage="65001"
这句应该放在ASP文件的开头。

最后还有CSS，这个属于定义留言簿的显示效果了，具体可以查看CSS的内容。另外，为了防止用户误操作提交了空表单，我在客户端加了一段JS代码来检查留言姓名和留言内容是否为空，如果为空则提示用户并停止提交表单，具体内容可以查看JS脚本文件。

完整留言簿系统SXGB打包下载

参考资料：
1. XML及WAP开发手册(李建国等编著)
2. xml ,xsl,css 之乱搞。。(经典论坛javapigpig)

[ 本帖最后由 HotHeart 于 2006-7-17 15:49 编辑 ]

萧萧小雨

好啊好。xslt很不好写的……

HotHeart 楼主

的确，有些时候一点点错误就不能正常显示了

cnbruce

好久没看到原创教程了：）
教程很仔细，加分鼓励，xsl是重点啊

HotHeart 楼主

在经典泡了这么久也该写点东西了^_^
在没有解决在Firefox里显示的问题之前一直对XSL提不起劲来，现在解决了就一鼓作气把整个留言本给完成了
这个留言簿里面XSL的确是重点，如登陆后显示 X 来供管理员删除留言，还有登陆表单是显示logout还是login
w3cschools里面关于 xsl 的教程感觉不错
http://www.w3schools.com/xsl/xsl_languages.asp