how to execute and display xslt result on webpage?_问答_开发者

I have the following three files and what it should do is taking the xml and xsl files and process them according and display the result in the browser. But now the problem is when I double click the html by chrome and IE7, I all got blank page. Can anyone tell why it's l开发者_运维知识库ike this and what's the right way to execute a xslt file and display the result on a webpage? Thanks a lot.

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>

The easiest way realistically is just to put a stylesheet instruction in your XML document, and simply open the XML document.

Just start your XML document like this:

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

You don't even need your student.html file at all this way.

@Flynn1179, I assume the OP wants to do this using HTML:

@Original Poster Instead of pasting the code here, I will point you to a blog post which I believe covers exactly what you are looking for: http://johanlouwers.blogspot.co.uk/2011/05/render-xml-into-div-using-ajax-and-xsl.html

Note: If you run the example do it using your browser directly, as I have found launching the test.html file from an IDE like WebStrom results in the noting happening when the links are clicked. This may have been what was causing you to get a blank page each time.

If this answers your question (or is the closest to answering it), please mark it as the chosen answer so this post can be listed as solved.

If you are unclear how to adapt the code in the HTML file on blog post to create a solution to your problem, just comment here and I will create a personalised adaptation for you.