PHP 和 ajax（二），操作xml
阿新 • • 發佈：2018-12-23
php使用ajax來讀取xml檔案。該功能設計到四個檔案：html頁面，js頁面，php頁面、xml檔案。
一、現實的功能
在html中，通過選擇改變select元素，來讀取xml檔案中相應的內容，如下圖：
二、html頁面，cdxml.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p> <span>Select a CD:</span> <select name="cds" id="cds"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bee Gees">Bee Gees</option> <option value="Cat Stevens">Cat Stevens</option> </select> </p> <p> <div: id="txtHint"><b>CD info will be listed here.</b></div:> </p> <script src="cdxml.js"></script> </body> </html>
二、js頁面，cdxml.js
(function(){ var cds = document.getElementById("cds") cds.removeEventListener("change",function(){ showCD(cds.value); }); cds.addEventListener("change",function(){ showCD(cds.value); }); var xmlHttp; function showCD(str){ xmlHttp = GetXmlHttpRequestObject(); if(xmlHttp === null){ console.log("Browser does not support Http request."); return; } xmlHttp.onreadystatechange = stateChanged; var url = generateUrl("cdxml.php",str); xmlHttp.open("GET",url,true); xmlHttp.send(null); } // ajax 請求成功，進行的操作 function stateChanged(){ if(xmlHttp.readyState==4 || xmlHttp.readyState == "complete"){ var txtHint = document.getElementById("txtHint") txtHint.innerHTML = xmlHttp.responseText; } } // 拼接url，拼接一個隨機數，防止使用快取 function generateUrl(php_path,str){ var url = php_path+"?q="+str; url += "&sid="+Math.random(); return url; } // 獲取xmlRequestObject function GetXmlHttpRequestObject(){ var xmlHttp=null; try{ // Fire,Opera 8+, Safari xmlHttp = new XMLHttpRequest(); }catch(e){ // Internet Explorer try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } })();
三、php頁面，cdxml.php
<?php $q = $_GET["q"]; // 載入xml檔案 $xmlDoc = new DOMDocument(); $xmlDoc->load("cdxml.xml"); $x = $xmlDoc->getElementsByTagName("ARTIST"); for($i=0;$i<$x->length;$i++){ // 判斷是否為 節點，使用 nodetype = 1 ，ELEMENT_NODE if($x->item($i)->nodeType === 1){ if($x->item($i)->childNodes->item(0)->nodeValue === $q){ $y = ($x->item($i)->parentNode); } } } $cd = ($y->childNodes); for($i=0;$i<$cd->length;$i++){ if($cd->item($i)->nodeType === 1){ echo $cd->item($i)->nodeName; echo " : "; echo $cd ->item($i)->childNodes->item(0)->nodeValue; echo "<br>"; } } ?>
四、xml檔案
https://github.com/hefrankeleyn/learning-area/blob/master/003PHP/php-ajax/cdxml.xml