ajax與XML檔案互動

admin發表於2018-09-10
原文網址 : https://www.softwhy.com/article-9105-1.html
XML

通過ajax可以與XML檔案進行相互互動。

最為典型的應用就是讀取XML檔案的內容，下面就通過程式碼例項做一下介紹。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var xmlDoc = xmlhttp.responseXML;
      var str = "";
      var targets = xmlDoc.getElementsByTagName("target");
      for (index = 0; index < targets.length; index++) {
        str = str + targets[index].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("show").innerHTML = str;
    }
  }
  xmlhttp.open("GET", "demo/ajax/xml/XML.xml", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</div>
</body>
</html>

xmlhttp.responseXML返回的是一個xml物件，然後再利用相應的dom操作即可實現想要的效果。

xml檔案程式碼如下: 

[XML] 純文字檢視 複製程式碼
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
  <book>
    <range>前端專區</range>
    <author>螞蟻部落</author>
    <target>css教程</target>
  </book>
  <book>
    <range>前端專區</range>
    <author>螞蟻部落</author>
    <target>div教程</target>
  </book>
  <book>
    <range>資源專區</range>
    <author>softwhy.com</author>
    <target>特效下載</target>
  </book>
  <book>
    <range>前端專區</range>
    <author>softwhy.com</author>
    <target>教程下載</target>
  </book>
</bookstore>

相關文章