异步xml加载和html页面显示

时间:2019-06-29 11:32:46

标签: javascript ajax xml xslt

(迫切)我需要一些(跨浏览器)异步xml加载,转换和分页,并通过.html页面通过某些.xsl样式表进行显示。

更确切地说,我需要的是prev next next first html链接功能正常工作! 我设法创建了以下内容:

  1. persons.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文件以及下一个上一个链接.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调用来获取这些链接 工作。  再次,你们帮我解决这个问题,因为我不知道该怎么做

非常感谢您

1 个答案:

答案 0 :(得分:0)

您在一个onclick处理程序(例如init({$crrntPag + 1}))中进行了正确的调用,但是如果您将带有a href="#"的HTML链接用作“按钮”以仅调用某些Javascript代码,确保在链接之后没有使用return false作为onclick处理程序中的最后一条语句:

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

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