AJAX XML實例

AJAX 可用來與 XML 文件進行交互式通信。

本節通過解析實例來使你了解AJAX是如何讀取XML文件的信息的！

我們首先實例化或創建XMLHttpRequest（XHR）對象實例化或創建JavaScript的對象：

xhr = new XMLHttpRequest();

但是，IE5和IE6不支持XMLHttpRequest，您需要以不同的方式實例化它：

xhr = new ActiveXObject ("Msxml2.XMLHTTP")

注：Windows 10附帶的Microsoft Edge默認Web瀏覽器自然支持XMLHttpRequest的。）

因此，實例化XHR變得有點麻煩，你必須首先測試用戶的瀏覽器如何支持它。

var xhr;
if（window.XMLHttpRequest）{ //適用于大多數現代Web瀏覽器
    xhr = new XMLHttpRequest（）;
}
else（window.ActiveXObject）{ //對于IE5,IE6
    xhr = new ActiveXObject（"Msxml2.XMLHTTP"）;
}

AJAX XML 實例

下面的例子將演示網頁如何使用 AJAX 來讀取來自 XML 文件的信息：

實例

Get CD info

實例解釋 - loadXMLDoc() 函數

當用戶點擊上面的“獲得 CD 信息”這個按鈕，就會執行 loadXMLDoc() 函數。

loadXMLDoc() 函數創建 XMLHttpRequest 對象，添加當服務器響應就緒時執行的函數，并將請求發送到服務器。

當服務器響應就緒時，會構建一個 HTML 表格，從 XML 文件中提取節點(元素)，最后使用已經填充了 XML 數據的 HTML 表格來更新 txtCDInfo 占位符：

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

AJAX 服務器頁面

上面這個例子中使用的服務器頁面實際上是一個 XML 文件，名為 "cd_catalog.xml"。