JavaScript AJAX XML

  • AJAX XML示例

    AJAX可用于与XML文件的交互式通信。
    以下示例将演示Web页面如何使用AJAX从XML文件中获取信息:
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
        }
      };
      xhttp.open("GET", "cd_catalog.xml", true);
      xhttp.send();
    }
    function myFunction(xml) {
      var i;
      var xmlDoc = xml.responseXML;
      var table="<tr><th>Artist</th><th>Title</th></tr>";
      var x = xmlDoc.getElementsByTagName("CD");
      for (i = 0; i <x.length; i++) { 
        table += "<tr><td>" +
        x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
        "</td></tr>";
      }
      document.getElementById("demo").innerHTML = table;
    }
    尝试一下
  • 示例说明

    当用户点击“获取我的CD收藏”按钮时, 将执行loadDoc()函数。loadDoc()函数创建一个XMLHttpRequest对象,添加服务器响应准备就绪时要执行的函数,并将请求发送到服务器。当服务器响应准备就绪时,构建一个HTML表,从XML文件中提取节点(元素),最后使用填充了XML数据的HTML表更新元素“demo”:
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
        }
      };
      xhttp.open("GET", "cd_catalog.xml", true);
      xhttp.send();
    }
    function myFunction(xml) {
      var i;
      var xmlDoc = xml.responseXML;
      var table="<tr><th>Artist</th><th>Title</th></tr>";
      var x = xmlDoc.getElementsByTagName("CD");
      for (i = 0; i <x.length; i++) { 
        table += "<tr><td>" +
        x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
        "</td></tr>";
      }
      document.getElementById("demo").innerHTML = table;
    }
    上面示例中使用的XML文件如下所示:“/jc_script/cd_catalog.xml”。