AJAX與XML

AJAX與XML實例：

下面的實例將演示網(wǎng)頁如何通過 AJAX 從 XML 文件讀取信息：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

本例由三部分組成

l? HTML表單頁面

l? PHP頁面

l? XML文件

HTML表單頁面

當(dāng)用戶在上面的下拉列表中選擇某張 CD 時，會執(zhí)行名為 "showCD()" 的函數(shù)。該函數(shù)由 "onchange" 事件觸發(fā)：

QQ截圖20161009174933.png

用戶選擇下拉列表后。調(diào)用showCD()函數(shù)

ShowCD()函數(shù)執(zhí)行以下步驟:

l? 檢查是否有 CD 被選擇

l? 創(chuàng)建 XMLHttpRequest 對象

l? 創(chuàng)建在服務(wù)器響應(yīng)就緒時執(zhí)行的函數(shù)

l? 向服務(wù)器上的文件發(fā)送請求

l? 請注意添加到 URL 末端的參數(shù)（q）（包含下拉列表的內(nèi)容）

PHP 文件

上面這段通過 JavaScript 調(diào)用的服務(wù)器頁面是名為 "2.php" 的 PHP 文件。

PHP 腳本加載 XML 文檔，"3.xml"，運行針對 XML 文件的查詢，并以 HTML 返回結(jié)果：

QQ截圖20161009174957.png

當(dāng) CD 查詢從 JavaScript 發(fā)送到 PHP 頁面時，將發(fā)生：

l? PHP 創(chuàng)建 “3.xml”文件的XML DOM 對象

l? 循環(huán)所有 "artist" 元素 (nodetypes = 1)，查找與 JavaScript 所傳數(shù)據(jù)向匹配的名字

l? 找到 CD 包含的正確 artist

l? 輸出 album 的信息，并發(fā)送到 "txtHint" 占位符

XML文件

QQ截圖20161009175012.png

該文件包含了有關(guān)CD收藏的數(shù)據(jù)

繼續(xù)學(xué)習(xí)

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showCD(str){ if(str==""){ document.getElementById("txt").innerHTML=""; return; } if(window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行 xmlhttp=new XMLHttpRequest(); }else{ //IE6,IE5瀏覽器執(zhí)行 xmlhttp =new ActiveXObject("MIcrosoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","8_2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> 選擇一個CD： <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Bonnie Tyler</option> </select> </form> </br> <div id="txt"><b>選擇下拉列表，顯示詳細信息</b></div> </body> </html>

提交重置代碼

自動運行