Question

如何使用JavaScript在网页上显示XML数据。 XML数据可以是本地文件，也可以驻留在云存储中。

Answer 1

使用<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.parseXML demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p id="someElement"></p> <p id="anotherElement"></p> <script> var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>", xmlDoc = $.parseXML(xml), $xml = $(xmlDoc), $title = $xml.find("title"); // Append "RSS Title" to #someElement $("#someElement").append($title.text()); // Change the title to "XML Title" $title.text("XML Title"); // Append "XML Title" to #anotherElement $("#anotherElement").append($title.text()); </script> </body> </html>查看示例：https://api.jquery.com/jQuery.parseXML/

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
    }

Answer 2

你可以看看xslt。

此处的教程：http://www.w3schools.com/xsl/default.asp

Answer 3

使用Ajax从服务器获取XML内容并显示它。

ajax参考：Simple AJAX example - load data from txt file

在服务器端，在发送内容之前使用htmlspecialchars（）

参考：http://php.net/manual/en/function.htmlspecialchars.php

Answer 4

使用 XMLHttpRequest

参考示例：

<script>  
 function showXML()
 {
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
  xmlhttp.open("GET","myfile.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;
  value=xmlDoc.getElementsByTagName("yourxmltag")[0].nodeValue;
  document.getElementById("showXMLContent").innerHTML=value;
 }
</script>

参考：Good Reference

如何使用JavaScript从HTML页面上的XML文件加载数据

4 个答案: