关于xslt 操作xml 显示html的小例子

 

 最近项目遇到的   整合成了一个例子  

 

 先贴xml

 <?xml version='1.0' encoding='utf-8'?><channels> <channel> <title>点击量排行</title> <link>http://news.sina.com.cn/hotnews/index.shtml</link> <description>新浪网热门新闻排行</description> <language>zh-cn</language> <category>新闻总排行</category> <item> <id>1</id> <title>北大教授接受手术时死亡 主治医生无行医资格</title> <link>http://news.sina.com.cn/c/2009-11-04/103918973423.shtml</link> <media>央视《经济半小时》</media> <date>11-04 10:39</date> </item> <item> <id>2</id> <title>冠军杯-小罗追平帕托进球被吹无效 AC米兰1-1皇马</title> <link>http://finance.sina.com.cn/g/20091104/00546919126.shtml</link> <media>新浪体育</media> <date>11-04 00:54</date> </item> <item> <id>3</id> <title>AC米兰连买三人却难补一个软肋 主力11人唯他不配首发 </title> <link>http://sports.sina.com.cn/g/2009-11-04/04364679431.shtml</link> <media>新浪体育</media> <date>11-04 04:36</date> </item>

 

 

  代码就没必要全都贴上去了    大家明白那个意思就行

 

xsl代码：

 

 

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><table width="269" border="0" cellspacing="0" cellpadding="0"><tr><td width="29" height="32" align="center"><img src="images/logo_sina.jpg" mce_src="images/logo_sina.jpg" width="16" height="16" /></td><td width="174"><table width="174" border="0" cellspacing="0" cellpadding="0"><tr><td height="20" valign="bottom" class="word16"><a><xsl:attribute name="href"><xsl:value-of select="channels/channel/link" /></xsl:attribute><xsl:attribute name="title"><xsl:value-of select="channels/channel/description" /></xsl:attribute><xsl:choose><xsl:when test="string-length(channels/channel/description) < 18"><xsl:value-of select="channels/channel/description"/></xsl:when><xsl:otherwise><xsl:value-of select="substring(channels/channel/description,1,18)"/>...</xsl:otherwise></xsl:choose></a></td></tr></table></td></tr><xsl:for-each select="channels/channel/item[id=1]"><tr><td height="26" align="center"><img src="images/no_01.jpg" mce_src="images/no_01.jpg" width="14" height="11" /></td><td class="word02"><a><xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute><xsl:attribute name="title"><xsl:value-of select="title" /></xsl:attribute><xsl:choose><xsl:when test="string-length(title) < 18"><xsl:value-of select="title"/></xsl:when><xsl:otherwise><xsl:value-of select="substring(title,1,18)"/>...</xsl:otherwise></xsl:choose></a></td></tr></xsl:for-each><xsl:for-each select="channels/channel/item[id=2]"><tr><td height="26" align="center"><img src="images/no_02.jpg" mce_src="images/no_02.jpg" width="14" height="11" /></td><td class="word02"><a><xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute><xsl:attribute name="title"><xsl:value-of select="title" /></xsl:attribute><xsl:choose><xsl:when test="string-length(title) < 18"><xsl:value-of select="title"/></xsl:when><xsl:otherwise><xsl:value-of select="substring(title,1,18)"/>...</xsl:otherwise></xsl:choose></a></td></tr></xsl:for-each><xsl:for-each select="channels/channel/item[id=3]"><tr><td height="26" align="center"><img src="images/no_03.jpg" mce_src="images/no_03.jpg" width="14" height="11" /></td><td class="word02"><a><xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute><xsl:attribute name="title"><xsl:value-of select="title" /></xsl:attribute><xsl:choose><xsl:when test="string-length(title) < 18"><xsl:value-of select="title"/></xsl:when><xsl:otherwise><xsl:value-of select="substring(title,1,18)"/>...</xsl:otherwise></xsl:choose></a></td></tr></xsl:for-each>

 

 

   在这里给大家解释下代码的意思

 

  <xsl:attribute name="href">
            <xsl:value-of select="channels/channel/link" />
           </xsl:attribute>

   这是给<a>标签加上href的属性  

 

 

 <xsl:attribute name="title">
            <xsl:value-of select="channels/channel/description" />
           </xsl:attribute>
           <xsl:choose>

   这是给<a>标签添加title的属性  鼠标移上去的时候显示所有的文章标题

 

 

 <xsl:choose>
            <xsl:when test="string-length(channels/channel/description) &lt; 18">
             <xsl:value-of select="channels/channel/description"/>
            </xsl:when>
            <xsl:otherwise>
             <xsl:value-of select="substring(channels/channel/description,1,18)"/>...
            </xsl:otherwise>
           </xsl:choose>

 

  这是对xml文本的判断   如果文本的长度大于18就进行截取然后加上...

 

 前台代码：

 

  <mce:script type="text/javascript"><!-- function abc() { // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("sina_hotnews_index.xml") // Load the XSL var xsl = new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("Sina_index.xsl") //document.getElementById("sinaindex").insertAdjacentHTML(("beforeEnd",xslt.output()); document.write(xml.transformNode(xsl)) } // --></mce:script>

 

 

 调用：

 <div id="sinaindex"> <mce:script type="text/javascript"> readXSL(); mce:script> </div>

 

 

  效果如图：

 

 

 

 

参考教程：http://www.w3school.com.cn/xsl/index.asp

 

 

 

 补充：

 

  因为我用的是url来获取xml  而js不能跨域获取   所以后面只能改成C#来做   具体代码如下：

 

  private void ReadXLST(System.Web.UI.HtmlControls.HtmlGenericControl contro,string xsl,string xml)//第一个参数传入的是div的名称，第二个参数传入的是xsl名称，第三个参数传入的是xml { System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument(); xmlDoc.Load(xml);//加载xml StringWriter output = new StringWriter();//定义StringWriter类 System.Xml.Xsl.XslTransform trans = new System.Xml.Xsl.XslTransform(); trans.Load(Server.MapPath(xsl)); trans.Transform(xmlDoc, null, output, null); contro.InnerHtml = output.ToString(); } 

 

  调用方法为：  ReadXLST(eastweekly, "East_index.xsl", "http://192.168.9.22:9090/static/xml/eastday_hotnews_index_weekly.xml");