AJAX 入門:第三個範例
The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu
請勿轉貼
在動態網頁設計的時候,我們經常需要依據使用者所選取的資料來決定 呈現的選項;例如,在本範例中,使用者可以選擇某個特定的城市,然後 網頁會依照使用者所選擇的城市來顯示使用者可以選擇的行政區;所以,如果 使用者選擇台中市的話,它只能選擇台中市的行政區,而不可能選到高雄市 的苓雅區。 要解決這樣的問題,傳統上都使用 DHTML 或者配合後端程式的使用來達成。 如果僅僅使用 DHTML 的方式來做,使用者會從伺服器端下載所有的城市,以及每一個 城市的行政區,這會造成大量的資料傳輸,非常不好。可是如果使用 後端程式的方式,使用者就必須像第一個範例中非 AJAX 網頁的情形,必須 每一次重新載入新資料都要等待(同步化的原因),非常不方便。所以,我們 就試著以 AJAX 的方式來解決。(範例無法在 Google 執行,請自行操作或者點選demo 網頁。)
請選擇適當的城市以及行政區:
說明:
- 設計 HTML 元件,其內容如下:
<form name="myform"> 城市: <select name="city" onChange="display(document.myform.city.options[selectedIndex].text);"> <option value="none" selected="1">--</option> <option value="ks">高雄</option> <option value="chung">台中</option> </select><br/> <div id="label" class="off">行政區:</div> <select name="areas" class="off"> </select> </form>
<style type="text/css"> .off { display: none } .on { display: inline } </style>
- 設計 display(str):由於 onChange 的時候,display() 會被呼叫,而且
城市的名稱會當作參數傳遞給 display()。所以,如果使用者選擇 "--",則
display() 只需要確保行政區的名稱(也就是 label)以及其下拉式選單 areas
不會出現,因此它們兩個必須如下的設定為 off:
if(str == '--') { document.getElementById('label').className = "off"; document.myform.areas.className = "off"; }
- alertContents(http_request) 的設計:由於所有的行政區 XML 檔中,行政區
的名稱都是標籤名稱為 area 的文字節點(Text node),所以,程式中需要針對
這樣的結構把所有這樣的節點都找出來(也就是程式中 nodes 所代表);另外,
由於使用者可能選完台中之後,又選擇高雄,所以在把新的 nodes 的內容加到
current 節點(也就是代表下拉式選單 areas)之前,需要先把其內容刪除掉。
var nodes = xmldoc.getElementsByTagName('area'); var current = document.myform.areas; // 使用者可能選完台中之後,又選擇高雄 // 如果有舊的 option,把它們清除掉 var anode, tnode; while(current.hasChildNodes()) { anode = current.firstChild; current.removeChild(anode); }
01 for(var i=0; i<nodes.length; i++) { 02 anode = document.createElement("option"); 03 anode.setAttribute("value", i); 04 if(i == 0) 05 anode.setAttribute("selected", "1"); 06 current.appendChild(anode); 07 tnode = document.createTextNode(nodes[i].firstChild.data); 08 anode.appendChild(tnode); 09 }
行 數 HTML 節點 新節點 第 02 行 <select>
</select><option/> 第 03 行 <select>
</select><option value="0"/> 第 04-05 行 <select>
</select><option value="0" selected="1"/> 第 06 行 <select>
<option value="0" selected="1"/>
</select>加到 HTML 後就不在這裡顯示,避免變得太複雜。 第 07 行 <select>
<option value="0" selected="1"/>
</select>中區 (綠色代表文字節點) 第 08 行 <select>
<option value="0" selected="1">中區</option>
</select> - 完整的程式碼如下:
<script language="javascript"> <!-- function display(str) { if(str == '--') { document.getElementById('label').className = "off"; document.myform.areas.className = "off"; } else { // insert AJAX code here var http_request = false; if(window.XMLHttpRequest) { // Mozilla, Safari, .... http_request = new XMLHttpRequest(); } else if(window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } // 定義事件處理函數為 alterContents() http_request.onreadystatechange = function() { alertContents(http_request); }; if(str == '高雄') { url = 'ks.xml'; } else { url = 'taichung.xml'; } http_request.open('GET', url, true); http_request.send(null); } } function alertContents(http_request) { if (http_request.readyState == 4) { if (http_request.status == 200) { var xmldoc = http_request.responseXML; var nodes = xmldoc.getElementsByTagName('area'); var current = document.myform.areas; var anode, tnode; while(current.hasChildNodes()) { anode = current.firstChild; current.removeChild(anode); } for(var i=0; i<nodes.length; i++) { anode = document.createElement("option"); anode.setAttribute("value", i); if(i == 0) anode.setAttribute("selected", "1"); current.appendChild(anode); tnode = document.createTextNode(nodes[i].firstChild.data); anode.appendChild(tnode); } document.getElementById('label').className = "on"; document.myform.areas.className = "on"; } else { alert('There was a problem with the request.'); } } } // --> </script>
- 練習題: 請依據本範例,設計一對下拉式選單;第一個下拉式選單出現 產品分類(例如:3C 產品、時尚流行等),當選擇第一個選單項目之後,會出現 該產品分類的產品(例如,若使用者選擇 "3C 產品",則出現個人電腦、筆電、 平板電腦等產品)。
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu
沒有留言:
張貼留言