XML卷之实战锦囊（2）：动态查询
动机：
查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。以往的信息查询都是连接到数据库的，每一次点击都必须要后台数据库的支持。然而很多情况下用户往往只针对某一部分的数据进行操作，这样不但服务器的负担加重，而且严重的影响用户浏览的速度。
针对这种情况我们需要将用户需要的某一部分数据以xml的方式传递到客户端，用户对这些数据可以很方便的进行操作。既方便了用户，又减轻了服务器数据库的负担。何乐而不为呢！而且这项功能可以通用到其他众多模块，因此添加了这个动态查询功能。
材料：
xml卷之动态查询
有2个文件：search.xml 和 search.xsl
作用：
在不刷新页面的情况下对数据进行过滤筛选，有效的提高数据查询的功能。
效果：
浏览这里
代码：
search.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="search.xsl" ?>
<blueidea>
<team>
<blue_id>1</blue_id>
<blue_name>sailflying</blue_name>
<blue_text>一个简单的查询</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>xml专题</blue_class>
</team>
<team>
<blue_id>2</blue_id>
<blue_name>flyingbird</blue_name>
<blue_text>嫁给你，是要你疼的</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>灌水精华</blue_class>
</team>
<team>
<blue_id>3</blue_id>
<blue_name>苛子</blue_name>
<blue_text>正则表达式在ｕｂｂ论坛中的应用</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>web 编程精华</blue_class>
</team>
<team>
<blue_id>4</blue_id>
<blue_name>太乙郎</blue_name>
<blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>论坛灌水区</blue_class>
</team>
<team>
<blue_id>5</blue_id>
<blue_name>mmkk</blue_name>
<blue_text>asp错误信息总汇</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript脚本</blue_class>
</team>
</blueidea>
search.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl">
<xsl:template match="/">
<html>
<head>
<title> xml卷之实战锦囊（2）：动态查询</title>
<style>
body,blueidea,team,blue_id,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "arial", "times new roman"; }
table { font-size: 12px; border: 0px double; border-color: #99cc99 #99cc99 #cccccc #cccccc; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
</style>
<script>
function searchtext(x)
{
stylesheet=document.xsldocument;
source=document.xmldocument;
sortfield=document.xsldocument.selectnodes("//@select");
if (x!="")
{
sortfield[1].value="team[blue_id='"+x+"']";
layer1.innerhtml=source.documentelement.transformnode(stylesheet);
}
else {alert("请输入筛选条件！");}
}
</script>
</head>
<body>
<p align="center"><span>xml卷之实战锦囊（2）：动态查询</span></p>
<div id="layer1" name="layer1">
<xsl:apply-templates select="blueidea" />
</div>
<hr size="1" width="500" />
<table align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<span >请输入筛选条件 : </span>
blue_id= <input type="text" name="searchtext" size="1" maxlength="1" />
<input type="button" class="button" onclick="searchtext(document.all.searchtext.value)" value="search" name="button" />
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="blueidea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#adaaad">
<tr bgcolor="#ffcc99" align="center">
<td>编号</td>
<td>姓名</td>
<td>主题</td>
<td>发表时间</td>
<td>归类</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_id"/>
</table>
</xsl:template>
<xsl:template match="team">
<tr align="center">
<xsl:apply-templates select="blue_id" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:template>
<xsl:template match="blue_id">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>
讲解：
1）search.xml 是数据文件，相信大家都不会有问题。
2）search.xsl 是格式文件，有几个地方要注意。
（1）脚本中：
sortfield=document.xsldocument.selectnodes("//@select");
作用是：找到所有属性为select的节点。这个和我在动态排序中说到的
sortfield=document.xsldocument.selectsinglenode("//@order-by");
有些不一样了。大家注意这个小小的区别以及各自的功能。
sortfield[1].value="team[blue_id='"+x+"']";
因此sortfield[1]就是找到的第二个节点，它对应的节点就是
<xsl:apply-templates select="team" order-by="blue_id"/>
参数 x 是文本框中输入的数值。
我们将select="team" 的搜索条件修改为select="team[blue_id='x']"
作用是：增加判断条件，只有blue_id的数值等于 x 的xml数据才显示出来。
当然大家可以丰富判断的条件，我在这里做的简单判断是为了让大家更容易理解。
最后通过重新显示layer1的innerhtml值来显示新的排序内容。
（2）文本中：
select="team"
在我这里它是 sortfield[1]，但你在做的时候可能就会更改。
那么你就一定要计算准确可错不得哦，不然就找到别家去了！
我提供一个常用的方法：在代码里你可以用循环来判断是否为你需要的节点。
另外说一点：
xml对大小写的要求极其严格。所以你的书写不规范的话，它可是会感冒的呀！
后记：
大家熟悉动态排序和动态查询的完成思路后会发现，其实我们的实现手法很简单。
就是修改某一个数值，然后重新显示。
在动态分页的功能中我们依然是按照这个思路去完成的。
下一篇： JS实现全屏的四种写法