1. 程式人生 > >Javascript輕鬆實現呼叫xslt解析xml

Javascript輕鬆實現呼叫xslt解析xml

XML程式碼如下,

<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
  <channel>
    <title>C-Sharpcorner Latest Articles</title>
    <link>http://www.c-sharpcorner.com/</link>
    <description>Watch articles from C# Corner</description>
    <copyright>© 1999 - 2011  Mindcracker LLC. All Rights Reserved</copyright>
    <item>
      <title>Joins Using LINQ in C#</title>
      <description>Today, in this article we will see how to perform join operation using LINQ queries. I have created two tables in database named 'Candidate'. The first table name is Employee. the second table name is Student.  I have used LINQ to SQL to communicate with database. </description>
      <link>http://www.c-sharpcorner.com/UploadFile/54db21/joins-using-linq-in-C-Sharp/</link>
      <pubDate>12/13/2011 3:08:33 AM</pubDate>
      <author>Vijay  Prativadi</author>
    </item>
    <item>
      <title>Simple Arithmetic Operation using WCF Service Hosted on WebApp</title>
      <description>Today, in this article we will try to perform simple arithmetic operation importing some created service into our web application. Once the application is fully developed we can request values from our web form which retrieve the output by performing an expected operation to the values specified by the service. </description>
      <link>http://www.c-sharpcorner.com/UploadFile/54db21/simple-arithmetic-operation-using-wcf-service-hosted-on-weba/</link>
      <pubDate>12/13/2011 2:41:30 AM</pubDate>
      <author>Vijay  Prativadi</author>
    </item>
    <item>
      <title>Print in C#</title>
      <description>Here is a good list of resource related to printing in C# using GDI+.</description>
      <link>http://www.c-sharpcorner.com/UploadFile/mahesh/print-in-C-Sharp/</link>
      <pubDate>12/12/2011 3:19:54 PM</pubDate>
      <author>Mahesh Chand</author>
    </item>
</channel>
</rss>

XSL程式碼如下,

<?xml version="1.0" encoding="iso-8859-1"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
  <body style="font-family:Arial,helvetica,sans-serif;font-size:12pt;
        background-color:#EEEEEE">
    <xsl:for-each select="rss/channel/item">
      <tr style="color:#0080FF;">
        <td style="text-align:left;font-weight:bold;">
          <xsl:value-of select ="title"></xsl:value-of>
        </td>
        <td style="text-align:right;font-weight:bold;">
          <i>
            <xsl:value-of select ="author"></xsl:value-of>
          </i>, <xsl:value-of select="pubDate"/>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:left;padding-top:10px;">
          <xsl:value-of select="description"/>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:right;">
          <a href="{link}" rel="bookmark">
            More...
          </a>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="height:20px;">
          <hr></hr>
        </td>
      </tr>
    </xsl:for-each>
  </body>
</html>

JS程式碼如下,

<html>
<head>
<script>
function loadXMLDoc(dname)
{
    if (window.ActiveXObject)
    {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
        xhttp = new XMLHttpRequest();
    }

    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    xml=loadXMLDoc("a1.xml");
    xsl=loadXMLDoc("b.xsl");
    // code for IE
    if (window.ActiveXObject)
    {
        ex=xml.transformNode(xsl);
        document.getElementById("example").innerHTML=ex;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument)
    {
        xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml,document);
        document.getElementById("example").appendChild(resultDocument);
    }
}
window.onload = function()
{
      displayResult();
}
</script>
</head>
<body>
<div id="example" />
</body>
</html>

結果如下,