Javascript 在html中异步加载xml和分页显示_Javascript_Ajax_Xml_Xslt

Javascript 在html中异步加载xml和分页显示

javascript ajax xml xslt

Javascript 在html中异步加载xml和分页显示,javascript,ajax,xml,xslt,Javascript,Ajax,Xml,Xslt,我（非常）需要一些（跨浏览器）异步加载、转换和分页xml，并通过一些.xsl样式表通过.html页面显示它更准确地说，我需要的是prev-next-first-html链接功能能够正常工作！我成功地创建了以下内容： persons.xml 史密斯约翰 44 小说街1号南国硬城堡贝琳达 37 三,。玫瑰道市中心艾略特乔治 40 知识大道21号布朗维尔贾霍尔珍妮丝 29 14龙台伊曼尼镇约翰逊特蕾西 32 家街11号弗洛维尔老爷车贾纳斯 39 朗道63号大城市

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

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

persons.xml


史密斯
约翰
44
小说街1号
南国
硬城堡
贝琳达
37
三,。玫瑰道
市中心
艾略特
乔治
40
知识大道21号
布朗维尔
贾霍尔
珍妮丝
29
14龙台
伊曼尼镇
约翰逊
特蕾西
32
家街11号
弗洛维尔
老爷车
贾纳斯
39
朗道63号
大城市
亚瑟
伯特兰
45
日出大道23号。
月亮城
罗伯特
阿道夫
28
东里32号
住宅区
艾琳
乘务员
52
南部布伦德12号。
阿尔伯特维尔
伊丽莎白
帕克
62
跳街21号
圣托马斯
唐
史蒂文斯
54
第十长青台
伊斯特本市

分页显示样式表

index.html-非常简单的.html页面，所有事情都发生在这里

看，通过那里的链接是有效的！我需要在这里完成同样的事情

我的代码中有一些小的尝试，但都错了。。我认为，主要是因为应该有ajax调用来获取这些链接工作再说一次，你们帮我做这个，因为我不知道怎么做

非常感谢您

您在一个onclick处理程序中进行了正确的调用（例如

init（{$crrntPag+1}）

），但是如果您使用带有

a href=“#”

的HTML链接作为“按钮”要仅调用某些Javascript代码，需要确保链接后面没有使用

returnfalse

作为onclick处理程序中的最后一条语句：

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

使用带有

input type=“button”

或

button

元素的简单按钮比使用

元素更容易。

您在“自己的计算机”上测试过哪些浏览器？众所周知，Chrome不支持对本地文件的XMLHttpRequest，除非您降低其默认安全设置。你到底为什么要一次又一次地加载同一个文件来显示它的片段呢？第一次加载包含完整的文件，因此请存储它。在从Javascript调用XSLT插入现有HTML文档的上下文中，XSLT没有多大意义，如果您想将XSLT的结果插入现有的

div

中，为什么要使用XSLT生成

HTML

和

body

元素？这是gecko brwsrs上的一个工作代码！这组文件正确地显示了我需要的内容！想要某种异步方式。xml（和xsl）加载到.html页面中。如果仔细检查，就会发现有2个ajax调用，每个文件一个。当代码到达“doTrnsfrmGcko”函数（用于转换和显示）时，已经加载了这两个文件（xml和correspnd.xsl），以便安装转换。两个ajax调用！问题。这是我需要的那本书。通过这四个链接，我们不知道如何通过一些js/ajax进行设置！这就是问题所在！使用promissions（）异步加载两个文件，但在加载两个文件后同步转换。虽然我甚至不确定浏览器在从文件系统加载时是否会使用异步加载。至于代码，您在那里有一些带有

init（{$crrntPag+1}）

，这会给出错误吗？到底是哪一个？我建议使用

input type=“button”

或

按钮，而不是链接；对于Javascript链接，请确保使用，否则浏览器会尝试跟随该链接并重新加载页面。@Martin Honnen Yess！就是这样：需要输入“returnfalse”以便浏览器不再重新加载该页面！对非常感谢哦非常感谢Honnen先生。我非常感激。剩下的功能如下。而且，你知道，一切都很顺利！！非常感谢！！
 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);
  }
 }

  <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

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