-- 作者：小鞋子
-- 发布时间：2/17/2004 5:33:00 PM
-- XML:结合Asp创建音乐视听站点
东南大学204＃ 奚福来 XML是SGML(Standard Generalized Markup Language)的一个子集，具有比HTML更容易扩展的能力，比SGML更容易掌握使用的长处。今天我不打算讲XML的原理和过多的语法，只是通过一个实例来看一看在Web方面XML比HTML的长处。（Web方面只是XML应用的一部分）今天我举的一个例子是用ASP和XML建一个音乐站点。读者可以举一反三，扩展到在其他方面的应用。首先我现说明ASP＋XML Web的最明显的两个优点：
1）ASP＋XML＋XSL＋JavaScript 做出的网页可以实现局部刷新。Html的Web动辄全屏刷新，即使您只需要刷新这一页中的十分之一。虽然用框架可以实现局部刷新，但是用了框架的页总难以让人感觉到这一页是一个整体。 如果一页中用了几个框架，那这个网页的样子真是令人难以想象的七零八碎。
2）XML和XSL的结合使得在网页传输时，只传输数据而不传输格式得以实现。这一优点在大量数据分多页显示的情况下特别明显。当第一次打开网页时，XSL已经下载到您的客户端，当点击下一页时，只需要传输下一页与当前页所不同的数据。大大减少网络流量。
看完下面的例子中您会惊讶的问这样的网页浏览起来一定会快几倍吧！下面让我们动手来建一个下一代web吧！
首先建立ASP文件 songs.asp用来从数据库中检索Mp3音乐信息，并生成XML文件。清单如下：
〈!--#include file="conn.asp"--〉
〈%
str=request.querystring("str")
singer=request.querystring("singer")
if singer="0000" then
singer=""
else
if singer="" then
if not isempty(session("singer")) then singer=session("singer")
end if
end if
if singer="0000" then singer=""
session("singer")=singer
if request.querystring("id")="" then
intcurrentpage=1
else
intcurrentpage=session("intcurrentpage")+request.querystring("id")
end if
%〉
〈?xml version="1.0" encoding="gb2312"?〉
〈?xml:stylesheet type="text/xsl" href="songs.xsl"?〉
〈document〉
〈%
sqlstr="select * from songs where ((songs like '%"&str&"%')or(singer like '%"&str&"%')) and (singer like '%"&singer&"%') order by counts desc,songs desc "
'response.write sqlstr
result.open sqlstr,conn,2,2
result.pagesize=18
inttotalpages=result.pagecount
if not (result.eof) then
if intcurrentpage 〉 inttotalpages then
intcurrentpage=1 ‘到了最后一页则回到首页。
end if
if intcurrentpage〈1 then intcurrentpage=inttotalpages ‘如果到第一页则回到最后一页。
result.absolutepage=intcurrentpage
if inttotalpages=0
then intcurrentpage=0
end if
session("intcurrentpage")=intcurrentpage
session("str")=str
for inti=1 to result.pagesize
if result.eof then
exit for
end if
%〉
〈songs〉
〈song〉
〈%=result("songs")%〉
〈/song〉
〈m3u〉
〈%="get_m3u.asp?id="&result("id")%〉〈!--点击歌名时连接到get_m3u.asp来记录点击次数，并重定向到该Mp3的列表.m3u文件--〉
〈/m3u〉
〈singerm3u〉
javascript:loadxml5(0,"〈%=result("singer")%〉")〈!--点击歌手时，调用default.htm中的JavaScript函数loadxml5()检索所有此歌手音乐--〉
〈/singerm3u〉
〈singer〉
〈%=result("singer")%〉
〈/singer〉
〈dat〉
〈%=result("years")%〉
〈/dat〉
〈times〉〈%=result("counts")%〉〈/times〉
〈/songs〉
〈%
result.movenext
next
%〉
〈currentpage〉〈%=intcurrentpage%〉〈/currentpage〉〈!--当前页码--〉
〈totalpage〉〈%=inttotalpages%〉〈/totalpage〉〈!--总共页数--〉
〈/document〉
再建立XSL文件 songs.xsl 来对songs.asp产生的XML解析 清单如下：
〈?xml version="1.0" encoding="gb2312"?〉
〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉
〈xsl:template match="/"〉
〈p style="font-size:10pt;color:#ff00ff"/〉
〈table width="500" style="font-size:10pt;color:#006600"〉
〈tr〉〈td width="230" align="center"〉歌曲名〈/td〉〈td width="130" align="center"〉演唱者〈/td〉〈td width="170" align="center"〉上载日期〈/td〉〈td width="82"〉点击次数〈/td〉〈/tr〉
〈tr〉〈td height="10" colspan="4"〉〈/td〉〈/tr〉
〈xsl:for-each select="document/songs"〉
〈tr〉
〈td width="250"〉
〈xsl/〉
〈A〉
〈xsl:attribute name="href"〉
〈xsl:value-of select="m3u"/〉
〈/xsl:attribute〉
〈xsl:value-of select="song"/〉
〈/A〉
〈/td〉
〈td width="110"〉
〈xsl/〉
〈A〉
〈xsl:attribute name="href"〉
〈xsl:value-of select="singerm3u"/〉
〈/xsl:attribute〉
〈xsl:value-of select="singer"/〉
〈/A〉
〈/td〉
〈td width="170"〉
〈xsl:value-of select="dat"/〉
〈/td〉
〈td width="82"〉 〈xsl:value-of select="times"/〉〈/td〉
〈/tr〉
〈tr〉〈td background="images/xuh2.gif" colspan="4"〉〈/td〉〈/tr〉
〈/xsl:for-each〉
〈tr〉
〈td width="100"〉 〈/td〉
〈xsl:for-each select="document/currentpage"〉
〈td 〉第 〈xsl:value-of/〉 页〈/td〉
〈/xsl:for-each〉
〈xsl:for-each select="document/totalpage"〉
〈td〉共 〈xsl:value-of/〉 页〈/td〉
〈/xsl:for-each〉
〈/tr〉
〈/table〉
〈/xsl:template〉
〈/xsl:stylesheet〉
有上面这两个文件就可以产生一个完整的Web页，在浏览器键入http://localhost/songs.asp 可以得到如图（1）所示。现在我们只是建好了能够检索音乐的一页，还不能实现分页、局部刷新等功能。
下面我们建立歌手列表文件。建立3个内容相差无几的歌手列表文件man.asp,girl.asp,other.asp分别检索男歌手，女歌手和其他歌手并生成XML文件。他们用同一个XSL文件man.xsl进行格式解析。下面只列出man.asp和man.xsl其他文件读者可以仿照写出。（此处，也可以只用一个ASP文件，用传递检索条件参数的方式来分别检索男歌手、女歌手、其他歌手。）
man.asp程序清单：
〈!--#include file="conn.asp"--〉
〈%
if request.querystring("id")="" then
%〉
〈%
intcurrentpage=1
else
intcurrentpage=session("intcurrentpage")+request.querystring("id")
end if
%〉
〈?xml version="1.0" encoding="gb2312"?〉
〈?xml:stylesheet type="text/xsl" href="man.xsl"?〉
〈document〉
〈%
sqlstr="select distinct singer from songs where sex='男'"
result.open sqlstr,conn,2,2
result.pagesize=18
inttotalpages=result.pagecount
if not (result.eof) then
if intcurrentpage 〉 inttotalpages then
intcurrentpage=1
end if
if intcurrentpage〈1
then intcurrentpage=inttotalpages
end if
result.absolutepage=intcurrentpage
session("intcurrentpage")=intcurrentpage
for inti=1 to result.pagesize\3 〈!--每一页显示的行数--〉
if result.eof then
exit for
end if
i=0
%〉
〈singers〉
〈%
do while i〈3〈!--每一行显示三位歌手--〉
%〉
〈singer〉
〈name〉
〈% if not result.eof then %〉
〈%=result("singer")%〉
〈/name〉
〈m3u〉
javascript:loadxml5(0,"〈%=result("singer")%〉")
〈/m3u〉
〈/singer〉
〈%
result.movenext
else
%〉
〈/name〉
〈/singer〉
〈%
end if
i=i+1
loop
%〉
〈/singers〉
〈%
next
%〉
〈currentpage〉〈%=intcurrentpage%〉〈/currentpage〉
〈totalpage〉〈%=inttotalpages%〉〈/totalpage〉
〈/document〉
man.xsl程序清单：
〈?xml version="1.0" encoding="gb2312"?〉
〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:fo="http://www.w3.org/TR/WD-xsl/FO" result-ns="fo" indent-result="yes"〉〉
〈xsl:template match="/"〉
〈p style="font-size:10pt;color:#003399"〉
〈table width="200" style="font-size:10pt;color:#003399"〉
〈xsl:for-each select="document/singers"〉
〈tr〉
〈xsl:for-each select="singer"〉
〈td width="66"〉
〈xsl/〉
〈a class="singer"〉
〈xsl:attribute name="href"〉
〈xsl:value-of select="m3u"/〉
〈/xsl:attribute〉
〈xsl:value-of select="name"/〉
〈/a〉
〈/td〉
〈/xsl:for-each〉
〈/tr〉
〈/xsl:for-each〉
〈tr〉
〈td〉 〈/td〉
〈xsl:for-each select="document/currentpage"〉
〈td 〉第 〈xsl:value-of/〉 页〈/td〉
〈/xsl:for-each〉
〈xsl:for-each select="document/totalpage"〉
〈td〉共 〈xsl:value-of/〉 页〈/td〉
〈/xsl:for-each〉
〈/tr〉
〈/table〉
〈/p〉
〈/xsl:template〉
〈/xsl:stylesheet〉
上面的两个文件产生的效果如图(2)所示：
现在我们建一页default.htm来把我们建的songs.asp和歌手列表组合起来。其实这个HTML文件与一般HTML文件没什么区别，只是加了几个JavaScript函数而已.不同之处如下。1。）在head 与 Body 之间添加如下函数：
〈/head〉
〈xml id="xml"〉〈/xml〉
〈xml id="xsl" src="man.xsl"〉〈/xml〉
〈xml id="songs"〉〈/xml〉
〈xml id="songxsl" src="songs.xsl"〉〈/xml〉
〈script〉
function loadxml1(i) 〈!—检索男歌手--〉?
{
xml.async=false;
xml.load("man.asp?id="+i);
singer1.innerHTML=xml.transformNode(xsl.XMLDocument);〈!--调用XSL解析XML文件--〉?
}
function loadxml2(i) 〈!—检索女歌手--〉?
{
xml.async=false;
xml.load("girl.asp?id="+i);
singer2.innerHTML=xml.transformNode(xsl.XMLDocument);
}
function loadxml3(i) 〈!—检索歌手列表中其他栏里的歌手--〉?
{
xml.async=false;
xml.load("others.asp?id="+i);
singer3.innerHTML=xml.transformNode(xsl.XMLDocument);
}
function loadxml5(i,singer)〈!—根据提供的检索条件检索音乐--〉?
{
if (singer !="" && singer!="0000") 〈!--此处用singer="0000"来表示此次检索是按图（3)所示数据框输入的条件来检索的，而不是点击歌手时调用此函数--〉
{
document.Form1.T1.value="";〈!--如果是点击歌手时调用此函数，则清空输入框内容--〉
}
xml.async=false;
xml.load("songs.asp?id="+i+"&str="+document.Form1.T1.value+"&singer="+singer);〈!--根据条件参数调用song.asp检索音乐--〉
singer5.innerHTML=xml.transformNode(songxsl.XMLDocument);
}
function start_hear() 〈!--打开本页时同时调出歌手列表与第一页Mp3--〉?
{
loadxml1(0);
loadxml2(0);
loadxml3(0);
loadxml5(0,"");
}
〈/script〉
〈body onload="start_hear()"〉〈!--加载本页时执行start_hear()函数--〉?
如图（3）所示在上一页，下一页的图片上加上连接，以男歌手栏为例,HTML如下：
〈tr〉
〈td width="33%"〉〈font size="2" color="#003399"〉男歌手〈/font〉〈/td〉
〈td width="33%"〉
〈a href="javascript:loadxml1(-1)"〉〈img border="0" src="images/pre.gif" 〉〈/a〉
〈/td〉
〈td width="34%"〉〈a href="javascript:loadxml1(1)"〉〈img border="0" src="images/next.gif"〉〈/a〉
〈/td〉
〈/tr〉
其中"javascript:loadxml1(-1)" 是调用上面的JavaScript函数参数-1表示向上移一页，如果当前页是第一页，则回到最后一页；参数1表示向后一页，如果当前页是最后一页，则回到第一页。
输入框关键词检索可以根据输入的关键字，在歌手、歌名中进行模糊匹配查询形式如下：
〈td width="467" height="16"〉
〈form name="Form1" method="no" action="javascript:loadxml5(0,'0000')"〉〈font size="2" color="#003399"〉请输入关键字： 〈/font〉〈input type="text" name="T1" size="20"〉
〈input type="button" value="查询" name="B1" onclick="return loadxml5(0,'0000')"〉
〈/form〉
〈/td〉
调用函数loadxml5(0,'0000')时，参数“0000” 用来标志是根据关键词检索。
这样我们就大功告成了，来测试一下我们的成果吧！
在地址栏键入：http://localhost/default..htm 出现如图（3）所示页面。当点击男歌手栏上一页时，只有男歌手栏的内容会变，其他地方内容保持不变。当点击歌手列表内beyond的时候右边音乐列表栏列出所有beyond的音乐，其他地方保持不变。而且从song.asp文件可以看出服务器上传过来的只是XML文件（从浏览器打开song.asp,查看源代码，可以看到XML文件），没有重传本页的布局格式，本页的布局格式由song.xsl来决定，而song.xsl已经在第一次显示该页时下载到客户端了。所以大大节省了网络流量，从而提高了网络传输速度。（现在只有IE5.0以上才支持XML，可以肯定未来的任何浏览器都必须支持XML）。
本文只是通过一个小例子来说明XML与HTML相比的优点，关于XML的应用远不止如此。XML在矢量图显示、桌面应用、多层数据库、WAP等，几乎是只要用到数据传输的地方XML都有用武之地。
本例适用于任何多页列表的网页。绝对可以提高网络传输速度。本例的程序已经在东南大学先声网上应用(http://herald.seu.edu.cn/html/mp3/)
|