时间戳

首页 > 解决方案 > 在html中异步加载xml并分页显示

javascript - 在html中异步加载xml并分页显示

问题描述

我（非常）需要一些（跨浏览器）异步 xml 加载、转换和分页显示它通过一些 .xsl 样式表通过 .html 页面。

更准确地说，我需要的是 prev next last first html 链接功能正常工作！我设法创建了以下内容：

  1. 人.xml

    <persons> <person> <surname>Smith</surname> <name>John</name> <age>44</age> <address>1 Fiction Street</address> <city>SouthLand</city> </person> <person> <surname>Hardcastle</surname> <name>Belinda</name> <age>37</age> <address>3rd. Rose Road</address> <city>DownTown</city> </person> <person> <surname>Elliot</surname> <name>George</name> <age>40</age> <address>21 Know Avenue</address> <city>Brownville</city> </person> <person> <surname>Jahore</surname> <name>Janice</name> <age>29</age> <address>14 Dragon Terrace</address> <city>Imagnry Town</city> </person> <person> <surname>Johnson</surname> <name>Tracey</name> <age>32</age> <address>11 Home Street</address> <city>Flowerville</city> </person> <person> <surname>Jalopy</surname> <name>Janus</name> <age>39</age> <address>63 Long Road</address> <city>Bigtown</city> </person> <person> <surname>Arthur</surname> <name>Bertrand</name> <age>45</age> <address>23 Sunrise Blvrd.</address> <city>MoonTown</city> </person> <person> <surname>Robert</surname> <name>Adolphe</name> <age>28</age> <address>32 East Lane</address> <city>Uptown</city> </person> <person> <surname>Eileen</surname> <name>Steward</name> <age>52</age> <address>12 Downsouth Blvrd.</address> <city>Albertville</city> </person> <person> <surname>Elizabeth</surname> <name>Parker</name> <age>62</age> <address>21 Jump Street</address> <city>San Thomas</city> </person> <person> <surname>Don</surname> <name>Stevens</name> <age>54</age> <address>10th Evergreen Terrace</address> <city>EastBourne City</city> </person> </persons>

  2. 分页显示样式表

     <xsl:stylesheet version="1.0" 
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:variable name="groupSize" select="3"/>
     <xsl:variable name="totRcrdNr" select="count(/persons/person)"/> 
     <xsl:param name="crrntPag" /> <!-- select="1" -->
      <xsl:template match="/persons">
      <html>
       <body>
        <h2 style="margin-left:67px">some persons listing</h2>    
        <table id="tbl" border="1" style="border-collapse:collapse;width:42%">
        <tr bgcolor="#b0d2b8"> 
          <th>Surname</th> <th>Name</th> <th>Age</th> <th>Address</th> 
           <th>City</th>
        </tr>
         <!-- select every first item in a group -->
        <xsl:apply-templates select="person[position() mod $groupSize = 1]"/> 

        <tr class="tln"> 
         <td colspan="3">
         <xsl:if test="$groupSize * ($crrntPag - 1)&gt;$crrntPag"> 
         <span class="bpgn" style="margin-left:95px">  <!-- PREVIOUS and FIRST-->
         <a href="#" onclick=" ">&#171; </a>  <!-- << -->
         <a href="#" onclick=" ">&#8249; </a> <!-- < -->      
        </span>     
       </xsl:if> 
       </td>
      <td colspan="1">  
     <xsl:if test="$crrntPag * $groupSize &lt;=$totRcrdNr">
      <span class="bpgn" style="margin-left:16px">    <!-- NEXT and LAST-->
       <a href=" " onclick="init({$crrntPag + 1})">&#8250; </a> <!-- > -->
       <a href="#" onclick=" ">&#187; </a>  <!-- >> -->      
      </span>     
     </xsl:if>
     </td>   
     <td>pag: <xsl:value-of select="$crrntPag"/>/<xsl:value-of select="$totRcrdNr"/> </td>
     </tr>
     </table>
     </body>
     </html>
     </xsl:template>

    <xsl:template match="person">
    <xsl:if test="position()=$crrntPag">
    <!-- list self and following siblings within this group -->
    <xsl:for-each select=". | following-sibling::person[position() &lt; $groupSize]"> 
    <tr>  
    <xsl:for-each select="child::*/child::text()"> 
        <td> <xsl:value-of select="."/> </td>
     </xsl:for-each>
    </tr> 
    </xsl:for-each> 
    </xsl:if>
    </xsl:template> 
    </xsl:stylesheet>
  1. file.js - 我通过它异步加载和显示该 xml 文件以及那些下一个 prev 链接 .html 表格边框的 js 脚本
 var xmlhttp = null, xslhttp = null, xmlRspn = null, xslRspn = null,
    xmlDetails = "xml/persn-en.xml",pass=0, pg,
    xslDetails = "xml/pgd_tbl_style-en.xsl", div_id = "tbl_show"; 

init(pg);

function init(pg)
 {
   pass++;  

  if(pass == 1) // that's somethng. temporary
    pg = 1

  sendRequest(xmlDetails, xslDetails,pg) 
}

function sendRequest(xmlURL, xslURL,pg)
 {
  xmlhttp = new XMLHttpRequest();   // first xmlHttpRequest for xml 
  if(xmlhttp)
  {
   xmlhttp.onreadystatechange =  function()
                 {
                  if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                  {  
                   xmlRspn = xmlhttp.responseXML;
                   doTrnsfrmGcko(div_id, xmlRspn, xslRspn,pg);
                  }
                 }    
   xmlhttp.open("get", xmlURL, true);
   xmlhttp.send("");
  }

  xslhttp = new XMLHttpRequest();   // second xmlHttpRequest for xsl
  if(xslhttp)
  {
   xslhttp.onreadystatechange = function()
                {
                 if(xslhttp.readyState == 4 && xslhttp.status == 200)
                 {
                  xslRspn = xslhttp.responseXML;          
                  doTrnsfrmGcko(div_id, xmlRspn, xslRspn,pg);
                 }
                }
   xslhttp.open("get", xslURL, true); 
   xslhttp.send("");
  }
 }

 function doTrnsfrmGcko(docElement, xmlDoc, xslDoc,pg) 
 {
  if(xmlDoc == null || xslDoc == null)
   return;
  else
  {
   var xsltProcessor = new XSLTProcessor();
   xsltProcessor.importStylesheet(xslDoc);
   xsltProcessor.setParameter(null,"crrntPag", pg); // stylesheet parameter passing over
   var fragment = xsltProcessor.transformToFragment(xmlDoc,document);
   document.getElementById(docElement).innerHTML = "";
   document.getElementById(docElement).appendChild(fragment);
  }
 }
  1. index.html- 非常简单的 .html 页面，一切都在其中发生。
  <html>
  <head>
   <script type="text/javascript" src="js/file.js"></script>
  </head>
  <body> 
   <!--<h3> List some people </h3> -->
   <div id="tbl_show"></div> 
  </body>
  </html>

好的，现在，如果有人从这里获取所有文件并将其放到他/她自己的计算机上，您会很快注意到任何一个链接都没有任何功能！因此，我需要您的支持才能使这些链接正常工作！第一个 上一个 下一个 最后一个 有一些类似小提琴的例子可以检查我对下一个前一个功能的意思：

        https://jsfiddle.net/MrcaS48/2e9kq3v0

看，通过那里的链接正在工作！我只需要在这里完成同样的事情。

我的代码中有一些小的尝试，但都是错误的。我认为，主要是因为应该有 ajax 调用来使这些链接正常工作。再一次，你们帮我解决这个问题，因为我不知道该怎么做

非常感谢您提前

标签： javascriptajaxxmlxslt

解决方案

您在一个 onclick 处理程序（例如init({$crrntPag + 1})）中进行了正确的调用，但是如果您使用带有a href="#"“按钮”的 HTML 链接来仅调用一些 Javascript 代码，则需要确保链接没有被return false用作最后一条语句onclick 处理程序：

<a href="#" onclick="init({$crrntPag + 1}); return false;">...</a>

使用带有input type="button"orbutton元素而不是a元素的简单按钮会更容易。

推荐阅读