AJAX XML

AJAX 可用於與 XML 檔案進行互動式通訊。

AJAX XML 實例

下面的範例將示範網頁如何使用AJAX 讀取來自XML 檔案的資訊：

實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,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();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

實例解析 - loadXMLDoc() 函數

當使用者點擊上面的"獲得 CD 資訊"這個按鈕，就會執行 loadXMLDoc() 函數。

loadXMLDoc() 函數建立 XMLHttpRequest 對象，新增當伺服器回應就緒時執行的函數，並將請求傳送到伺服器。

當伺服器回應就緒時，會建立一個 HTML 表格，從 XML 檔案中提取節點（元素），最後使用已經填充了 XML 資料的 HTML 表格來更新 txtCDInfo 佔位符：

##function loadXMLDoc(url)

{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// 代碼IE7+、 Firefox、Chrome、Opera、Safari
xmlhttp=new XMLHttpRequest();
}
else
{// IE6、IE5
的程式碼xmlhttp=new ActiveXObject("Microsoft.XMLHTTP ") ;
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt=" < table border='1'><tr><th> 標題    x=xmlhttp.responseXML.documentElement。getElementsByNameName。 (CD");
    for (i=0;i      {
      txt=txt + "";## getElementsByTagName("TITLE");
        {
        try
          { + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)# > </td> ;              }
#        }
    xx=x[i].getElementsByTagName("藝人")   {
          txt=txt + "< td >” + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)# > </td> ;";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    文檔。 getElementById('txtCDInfo').innerHTML=txt;
    }
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

AJAX 伺服器頁面

上面這個範例所使用的伺服器頁面實際上是一個名為"cd_catalog .xml" XML 檔案。

AJAX XML

AJAX XML 實例

實例

實例解析 - loadXMLDoc() 函數

AJAX 伺服器頁面

PHP中文網