PHP開發基礎教學之AJAX與...LOGIN

PHP開發基礎教學之AJAX與XML

AJAX與XML實例:

#AJAX可以與XML檔案互動式通訊

下面的實例將示範網頁如何透過AJAX 從XML 檔案讀取資訊:

本例由三個部分組成

 HTML表單頁面

 PHP頁面

     XML檔案
  • HTML表單頁面
  • 當使用者在上面的下拉清單中選擇某張CD 時,會執行名為"showCD()" 的函數。此函數由 "onchange" 事件觸發:
  • 原始碼見1.php

    <!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 浏览器执行
    		xmlhttp=new XMLHttpRequest();
    	}else{
    		//IE6,IE5浏览器执行
    		xmlhttp =new ActiveXObject("MIcrosoft.XMLHTTP");
    	}
    	xmlhttp.onreadystatechange=function(){
    		if(xmlhttp.readyState==4&&xmlhttp.status==200){
    			document.getElementById("txt").innerHTML=xmlhttp.responseText;
    		}
    	}
    	xmlhttp.open("GET","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>

    使用者選擇下拉清單後。呼叫showCD()函數
  • ShowCD()函數執行下列步驟:

# 檢查是否有CD 被選擇

 創建XMLHttpRequest 物件

建立在伺服器回應就緒時執行的函數

 向伺服器上的檔案傳送請求

#請注意新增到URL 末端的參數(q)(包含下拉清單的內容)

  • PHP 檔案

  • 上面這段透過JavaScript 呼叫的伺服器頁面是名為"2.php" 的PHP 檔案。

    PHP 腳本載入XML 文檔,"3.xml",執行針對XML 文件的查詢,並以HTML 返回結果:
  • 原始碼見2.php

    <?php
    $q=$_GET["q"];
    $xmlDoc = new DOMDocument();
    $xmlDoc->load("3.xml");
    $x=$xmlDoc->getElementsByTagName('ARTIST');
    for ($i=0; $i<=$x->length-1; $i++)
    {
    	// 处理元素节点
    	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("<b>" . $cd->item($i)->nodeName . ":</b> ");
    		echo($cd->item($i)->childNodes->item(0)->nodeValue);
    		echo("<br>");
    	}
    }
    ?>

     
當CD 查詢從JavaScript 傳送到PHP 頁面時,會發生:

#PHP 建立「8_3.xml」檔案的XML DOM 物件

 循環所有"artist" 元素(nodetypes = 1),找出與JavaScript 所傳資料向匹配的名字


找到CD 包含的正確artist

輸出album 的訊息,並傳送到"txtHint" 佔位符

  • XML檔

  • #原始碼見3.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    
    <CATALOG>
    	<CD>
    		<TITLE>Empire Burlesque</TITLE>
    		<ARTIST>Bob Dylan</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>Columbia</COMPANY>
    		<PRICE>10.90</PRICE>
    		<YEAR>1985</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Hide your heart</TITLE>
    		<ARTIST>Bonnie Tyler</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>CBS Records</COMPANY>
    		<PRICE>9.90</PRICE>
    		<YEAR>1988</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Greatest Hits</TITLE>
    		<ARTIST>Dolly Parton</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>RCA</COMPANY>
    		<PRICE>9.90</PRICE>
    		<YEAR>1982</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Still got the blues</TITLE>
    		<ARTIST>Gary Moore</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Virgin records</COMPANY>
    		<PRICE>10.20</PRICE>
    		<YEAR>1990</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Eros</TITLE>
    		<ARTIST>Eros Ramazzotti</ARTIST>
    		<COUNTRY>EU</COUNTRY>
    		<COMPANY>BMG</COMPANY>
    		<PRICE>9.90</PRICE>
    		<YEAR>1997</YEAR>
    	</CD>
    	<CD>
    		<TITLE>One night only</TITLE>
    		<ARTIST>Bee Gees</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Polydor</COMPANY>
    		<PRICE>10.90</PRICE>
    		<YEAR>1998</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Sylvias Mother</TITLE>
    		<ARTIST>Dr.Hook</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>CBS</COMPANY>
    		<PRICE>8.10</PRICE>
    		<YEAR>1973</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Maggie May</TITLE>
    		<ARTIST>Rod Stewart</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Pickwick</COMPANY>
    		<PRICE>8.50</PRICE>
    		<YEAR>1990</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Romanza</TITLE>
    		<ARTIST>Andrea Bocelli</ARTIST>
    		<COUNTRY>EU</COUNTRY>
    		<COMPANY>Polydor</COMPANY>
    		<PRICE>10.80</PRICE>
    		<YEAR>1996</YEAR>
    	</CD>
    	<CD>
    		<TITLE>When a man loves a woman</TITLE>
    		<ARTIST>Percy Sledge</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>Atlantic</COMPANY>
    		<PRICE>8.70</PRICE>
    		<YEAR>1987</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Black angel</TITLE>
    		<ARTIST>Savage Rose</ARTIST>
    		<COUNTRY>EU</COUNTRY>
    		<COMPANY>Mega</COMPANY>
    		<PRICE>10.90</PRICE>
    		<YEAR>1995</YEAR>
    	</CD>
    	<CD>
    		<TITLE>1999 Grammy Nominees</TITLE>
    		<ARTIST>Many</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>Grammy</COMPANY>
    		<PRICE>10.20</PRICE>
    		<YEAR>1999</YEAR>
    	</CD>
    	<CD>
    		<TITLE>For the good times</TITLE>
    		<ARTIST>Kenny Rogers</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Mucik Master</COMPANY>
    		<PRICE>8.70</PRICE>
    		<YEAR>1995</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Big Willie style</TITLE>
    		<ARTIST>Will Smith</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>Columbia</COMPANY>
    		<PRICE>9.90</PRICE>
    		<YEAR>1997</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Tupelo Honey</TITLE>
    		<ARTIST>Van Morrison</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Polydor</COMPANY>
    		<PRICE>8.20</PRICE>
    		<YEAR>1971</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Soulsville</TITLE>
    		<ARTIST>Jorn Hoel</ARTIST>
    		<COUNTRY>Norway</COUNTRY>
    		<COMPANY>WEA</COMPANY>
    		<PRICE>7.90</PRICE>
    		<YEAR>1996</YEAR>
    	</CD>
    	<CD>
    		<TITLE>The very best of</TITLE>
    		<ARTIST>Cat Stevens</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Island</COMPANY>
    		<PRICE>8.90</PRICE>
    		<YEAR>1990</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Stop</TITLE>
    		<ARTIST>Sam Brown</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>A and M</COMPANY>
    		<PRICE>8.90</PRICE>
    		<YEAR>1988</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Bridge of Spies</TITLE>
    		<ARTIST>T'Pau</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Siren</COMPANY>
    		<PRICE>7.90</PRICE>
    		<YEAR>1987</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Private Dancer</TITLE>
    		<ARTIST>Tina Turner</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>Capitol</COMPANY>
    		<PRICE>8.90</PRICE>
    		<YEAR>1983</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Midt om natten</TITLE>
    		<ARTIST>Kim Larsen</ARTIST>
    		<COUNTRY>EU</COUNTRY>
    		<COMPANY>Medley</COMPANY>
    		<PRICE>7.80</PRICE>
    		<YEAR>1983</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Pavarotti Gala Concert</TITLE>
    		<ARTIST>Luciano Pavarotti</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>DECCA</COMPANY>
    		<PRICE>9.90</PRICE>
    		<YEAR>1991</YEAR>
    	</CD>
    	<CD>
    		<TITLE>The dock of the bay</TITLE>
    		<ARTIST>Otis Redding</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>Atlantic</COMPANY>
    		<PRICE>7.90</PRICE>
    		<YEAR>1987</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Picture book</TITLE>
    		<ARTIST>Simply Red</ARTIST>
    		<COUNTRY>EU</COUNTRY>
    		<COMPANY>Elektra</COMPANY>
    		<PRICE>7.20</PRICE>
    		<YEAR>1985</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Red</TITLE>
    		<ARTIST>The Communards</ARTIST>
    		<COUNTRY>UK</COUNTRY>
    		<COMPANY>London</COMPANY>
    		<PRICE>7.80</PRICE>
    		<YEAR>1987</YEAR>
    	</CD>
    	<CD>
    		<TITLE>Unchain my heart</TITLE>
    		<ARTIST>Joe Cocker</ARTIST>
    		<COUNTRY>USA</COUNTRY>
    		<COMPANY>EMI</COMPANY>
    		<PRICE>8.20</PRICE>
    		<YEAR>1987</YEAR>
    	</CD>
    </CATALOG>
  • 該檔案包含了有關CD收藏的資料
  • ##學習心得
  • 本範例主要包含以下知識點:
  •  表單基礎:下拉選項

    onchange事件:在網域的內容改變時發生
  • 函數呼叫、函數傳值
  • #### AJAX XMLHttpRequest物件的建立、在伺服器回應的時候執行的函數、向伺服器上的檔案傳送請求:見1-5講學習心得############HTML DOM getElementById()方法:傳回擁有指定ID 的第一個物件的參考####### ######XML相關知識############ 建立XML DOM物件############載入XML檔案到新的XML DOM物件###
  •  取出特定標籤名的物件:getElementsByTagName()

  • 取得特定元素的子節集合:HTML DOM childNodes

  • # 取得第一個button 元素的節點值:HTML DOM nodeValue

  • # 取得body 元素的節點類型:HTML DOM nodeType

#下一節
<!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 浏览器执行 xmlhttp=new XMLHttpRequest(); }else{ //IE6,IE5浏览器执行 xmlhttp =new ActiveXObject("MIcrosoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","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>
章節課件