xml应用(2): 通过向xsl传递参数+数据岛方式,实现在客户端单个xml的分框架显示

王朝other·作者佚名 2006-01-08

宽屏版字体: 小|中|大|超大

对于数据较少的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"?>

<书名>基于XML 的 ASP.NET开发</书名>

<定价>42</定价>

<作者>Dan Wahlin/王宝良</作者>

</book>

<书名>XML应用的UML建模技术</书名>

<定价>32</定价>

<作者>David Carlson/周靖侯奕萌沈金河等</作者>

</book>

<书名>极限编程研究</书名>

<定价>70</定价>

<作者>Giancarrio Succi/Michele Marchesi/张辉(译)</作者>

</book>

<书名>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>

<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>

<xsl:copy-of select="*" />

</xml>

</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>

body

{

font-size:9pt;

}

{

font-size:9pt;

}

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 != ''">

<xsl:for-each select="moonpiazza/book[@ID = $DataID]/*">

<tr>

</tr>

</xsl:for-each>

</table>

</xsl:when>

</xsl:choose>

</xsl:template>

</xsl:stylesheet>

:_)