对于数据较少的xml数据,可以使用一次下载完所有数据,将显示全部放到客户端完成,下面例子中,将一个xml文件显示为左右两个框架,左边显示条目,右边显示内容。可以在本地,不用通过服务器解释.
关键:使用msxml的dom对象向xsl模板传递参数
环境: IE6 + Msxml3.0
examples:
/*** book.xml ***/
以下是引用片段: <?xml version="1.0" encoding="gb2312" ?> <?xml-stylesheet type="text/xsl" href="book.xsl"?> <moonpiazza> <book ID="1"> <书名>基于XML 的 ASP.NET开发</书名> <定价>42</定价> <作者>Dan Wahlin/王宝良</作者> </book> <book ID="2"> <书名>XML应用的UML建模技术</书名> <定价>32</定价> <作者>David Carlson/周靖 侯奕萌 沈金河等</作者> </book> <book ID="3"> <书名>极限编程研究</书名> <定价>70</定价> <作者>Giancarrio Succi/Michele Marchesi/张辉(译)</作者> </book> <book ID="4"> <书名>Design Patterns</书名> <定价>38</定价> <作者>Erich Gamma/Richard Helm/Ralph Johnson/John Vlissides</作者> </book> </moonpiazza> |
/*** book.xsl ***/
以下是引用片段: <?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> <SCRIPT LANGUAGE="JavaScript"> <xsl:comment> <![CDATA[ var m_oXSL ; var m_sFrameAttr_left, m_sFrameAttr_main ; var m_sXMLFile, m_sXSLTFile ; m_sXMLFile = "" ; m_sXSLTFile = "book_view.xsl"; // 指定xsl文件 function window.onload() { var oXSLDoc ; m_sFrameName_left = "left_frame"; m_sFrameName_main = "main_frame"; m_oXSL = new ActiveXObject("MSXML2.XSLTemplate.3.0"); oXSLDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument.3.0"); oXSLDoc.async = false; oXSLDoc.load(m_sXSLTFile); m_oXSL.stylesheet= oXSLDoc; initPage() ; } function initPage() { content.cols = "270,*" ; viewFrame(m_sFrameName_left); var sHtmlStr = "请选择书目..."; eval(m_sFrameName_main + ".document").open ("text/html","gb2312"); eval(m_sFrameName_main + ".document").write(sHtmlStr) ; } function viewFrame(p_sFrameName) { var oXSLProc; var sHtmlStr; oXSLProc = m_oXSL.createProcessor(); oXSLProc.input = xmlData; // 指定参数,显示左(或右)框架 oXSLProc.addParameter("frameName_left", m_sFrameName_left); oXSLProc.addParameter("frameName_main", m_sFrameName_main); oXSLProc.addParameter("frameName", p_sFrameName); oXSLProc.transform(); sHtmlStr = oXSLProc.output ; // 获得转化后的字符串 eval(p_sFrameName + ".document").open ("text/html","gb2312"); eval(p_sFrameName + ".document").write(sHtmlStr) ; } function viewData(p_sDataID) { var oXSLProc; var sHtmlStr; oXSLProc = m_oXSL.createProcessor(); oXSLProc.input = xmlData; // 指定参数,显示id为 p_sDataID 的数据 oXSLProc.addParameter("frameName_left", m_sFrameName_left); oXSLProc.addParameter("frameName_main", m_sFrameName_main); oXSLProc.addParameter("frameName", m_sFrameName_main); oXSLProc.addParameter("DataID", p_sDataID); oXSLProc.transform(); sHtmlStr = oXSLProc.output ; // 获得转化后的字符串 eval(m_sFrameName_main + ".document").open ("text/html","gb2312"); eval(m_sFrameName_main + ".document").write(sHtmlStr) ; } ]]> </xsl:comment> </SCRIPT> </head> <xml id="xmlData"> <xsl:copy-of select="*" /> </xml> <frameset cols="0,*" name="content"> <frame name="left_frame" src="about:blank" /> <frame name="main_frame" src="about:blank" /> </frameset> </html> </xsl:template> </xsl:stylesheet> /*** book_view.xsl ***/ <?xml version="1.0" encoding="gb2312"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:param name="frameName_left" select="'left_frame_null'" /> <xsl:param name="frameName_main" select="'main_frame_null'" /> <xsl:param name="frameName" select="''" /> <xsl:param name="DataID" select="''" /> <xsl:template match="/"> <html> <head> <style type="text/css"> body { font-size:9pt; } td { font-size:9pt; } a{ font-size:9pt; } </style> </head> <xsl:choose> <xsl:when test="$frameName = $frameName_left"> <xsl:call-template name="left_frame" /> </xsl:when> <xsl:when test="$frameName = $frameName_main"> <xsl:call-template name="main_frame" /> </xsl:when> </xsl:choose> </html> </xsl:template> <xsl:template name="left_frame"> <xsl:for-each select="moonpiazza/book"> <xsl:element name="a"> <xsl:attribute name="href"> javascript:parent.viewData(<xsl:value-of select="@ID" />); </xsl:attribute> <xsl:value-of select="书名" /> </xsl:element> <br/> </xsl:for-each> </xsl:template> <xsl:template name="main_frame"> <xsl:choose> <xsl:when test="$DataID != ''"> <table border="1" width="500"> <xsl:for-each select="moonpiazza/book[@ID = $DataID]/*"> <tr> <td width="70"><xsl:value-of select="name()" /></td> <td><xsl:value-of select="." /></td> </tr> </xsl:for-each> </table> </xsl:when> </xsl:choose> </xsl:template> </xsl:stylesheet> |