AJAX 可用於與XML 檔案進行互動式通訊。
AJAX XML 實例
下面的範例將示範網頁如何使用AJAX 讀取來自XML 檔案的資訊:
實例
實例解析- loadXMLDoc() 函數
當使用者點擊上面的"取得我收藏的CD"這個按鈕,就會執行loadXMLDoc() 函數。
loadXMLDoc() 函數建立XMLHttpRequest 對象,新增當伺服器回應就緒時執行的函數,並將請求傳送到伺服器。
當伺服器回應就緒時,會建立一個HTML 表格,從XML 檔案中提取節點(元素),最後使用XML 資料的填充id="demo" 的表格元素:
非同步載入XML 文檔
function loadXMLDoc ( ) { 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 ; } AJAX 伺服器頁面
上面這個範例中使用的伺服器頁面其實是一個名為"cd_catalog.xml" XML 檔案。