如何在网页上执行和显示xslt结果?

时间:2011-07-28 12:10:24

标签: html xslt

我有以下三个文件,它应该做的是获取xml和xsl文件并根据它们处理它们并在浏览器中显示结果。但现在问题是当我双击Chrome和IE7的html时,我都得到了空白页面。任何人都可以告诉为什么它是这样的,什么是正确的方式来执行xslt文件并在网页上显示结果?非常感谢。

student.xml file

<?xml version="1.0" encoding="ISO-8859-1"?>

<data>
 <student>
  <name>Bitu Kumar</name>
  <course>MCA</course>
  <sem>6</sem>
  <marks>80</marks>
 </student>
 <student>
  <name>Santosh Kumar</name>
  <course>MCA</course>
  <sem>5</sem>
  <marks>70</marks>
 </student>
 <student>
  <name>Ashish</name>
  <course>M.Sc.</course>
  <sem>4</sem>
  <marks>80</marks>
 </student>
 <student>
  <name>Mahesh</name>
  <course>MA</course>
  <sem>3</sem>
  <marks>80</marks>
 </student>
</data>

and following student.xsl file

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
    <body>
     <h2>Student DataBase</h2>
    <table border="1">
          <tr>
             <th  bgcolor="yellow">Name</th>    
      <xsl:for-each select="data/student">
                        <td width="200"><xsl:value-of select="name"/></td>
             </xsl:for-each>
           </tr>
          <tr>
             <th  bgcolor="yellow">Course</th>    
      <xsl:for-each select="data/student">
                        <td width="200"><xsl:value-of select="course"/></td>
      </xsl:for-each>
          </tr>
           <tr>
             <th  bgcolor="yellow">Marks</th>    
      <xsl:for-each select="data/student">
                        <td width="200"><xsl:value-of select="marks"/></td>
      </xsl:for-each>
           </tr> 
           <tr>
             <th  bgcolor="yellow">Semester</th>    
      <xsl:for-each select="data/student">
                        <td width="200"><xsl:value-of select="sem"/></td>
      </xsl:for-each>
           </tr>
       </table>
     </body>
   </html>
</xsl:template>
</xsl:stylesheet>

and following student.html file

<html>
 <head>
 <title> Testing IE </title>
 <script langauge="JavaScript" type="text/javascript">
  function loadXMLDoc(dname)
  {
   if (window.XMLHttpRequest)
     {
      xhttp=new XMLHttpRequest();
     }
   else
     {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
   xhttp.open("GET",dname,false);
   xhttp.send("");
   return xhttp.responseXML;
  }

  function displayResult()
  {
   xml=loadXMLDoc("student.xml");
   xsl=loadXMLDoc("student.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);
     }
  }
 </script>
 </head>

 <body onLoad="displayResult()">
  <div id="example" />
 </body>
</html>

2 个答案:

答案 0 :(得分:1)

最简单的方法是将样式表指令放在XML文档中,然后只需打开XML文档。

只需启动XML文档:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="student.xsl"?>
<data>
 <student>
 etc..

您甚至不需要这样的student.html文件。

答案 1 :(得分:0)

@Flynn1179,我认为OP希望使用HTML来做到这一点:

@Original Poster 我不会在这里粘贴代码,而是会指向一篇博文,我相信它完全涵盖了您所寻找的内容:http://johanlouwers.blogspot.co.uk/2011/05/render-xml-into-div-using-ajax-and-xsl.html

注意:如果您运行该示例,请直接使用您的浏览器执行此操作,因为我发现从WebStrom等IDE启动test.html文件会导致在单击链接时发生注意。这可能是导致您每次都获得空白页面的原因。

如果这回答了您的问题(或者最接近回答),请将其标记为所选答案,以便将此帖子列为已解决。

如果您不清楚如何调整博客文章中的HTML文件中的代码来创建问题的解决方案,请在此处进行评论,我将为您创建个性化的改编。