Ajax XML สามารถใช้เพื่อสร้างการโต้ตอบกับไฟล์ XML ดังตัวอย่างต่อไปนี้
ซึ่งในเนื้อหานี้มีตัวอย่างที่เกี่ยวข้องกับ Ajax XML อยู่ด้วยกัน 2 ตัวอย่างประกอบด้วย
- ตัวอย่างที่ 1 การค้นหาข้อมูลไฟล์ xml
- ตัวอย่างที่ 2 live search
ตัวอย่างที่ 1 การค้นหาข้อมูลไฟล์ xml
1.ไฟล์ test_ajax_xml.php
<html> <head> <script> function showCD(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("txtHint").innerHTML=this.responseText; } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this.value)"> <option value="">Select a CD:</option> <option value="Bob Dylan">Bob Dylan</option> <option value="Bee Gees">Bee Gees</option> <option value="Cat Stevens">Cat Stevens</option> </select> </form> <div id="txtHint"><b>CD info will be listed here...</b></div> </body> </html>
ไฟล์ที่ 1 test_ajax_xml.php
การทำงานของฟังก์ชัน showCD()
- บรรทัดที่ 5 ตรวจสอบว่าได้ทำการเลือกซีดีหรือไม่
- บรรทัดที่ 9 สร้างวัตถุ XMLHttpRequest
- บรรทัดที่ 10 สร้างฟังก์ชันที่จะดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์อยู่ในสถานะที่พร้อม
- บรรทัดที่ 16 ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
2.ไฟล์ getcd.php
<?php $q=$_GET["q"]; $xmlDoc = new DOMDocument(); $xmlDoc->load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { //Process only element nodes 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++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b> "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br>"); } } ?>
ไฟล์ที่ 2 getcd.php
ไฟล์ที่ 2 คือไฟล์ที่อยู่บนเซิร์ฟเวอร์ที่ถูกเรียกจากไฟล์ที่ 1 โดยไฟล์ที่ 2 มีขั้นตอนการดำเนินงานดังนี้
- สร้างวัตถุ XML DOM
- โหลดไฟล์ “cd_catalog.xml” (ไฟล์นี้อยู่ด้านล่างสุดของหน้า)
- ทำการค้นหาแท็กที่ชื่อว่า “<ARTIST>” ทั้งหมดที่ตรงกับค่าพารามิเตอร์ (ในที่นี้ถูกเก็บไว้ที่ตัวแปร $q) ที่ส่งมายังไฟล์ที่ 2
- แสดงผลลัพธ์ไฟแสดงที่แท็กไอดีเท่ากับ txtHint
ตัวอย่างที่ 2 Live search
live search คือ เป็นคีย์เวิร์ดที่ใช้เรียกสำหรับการเขียนโปรแกรมค้นหาในลักษณะดังต่อไปนี้
ซึ่ง live search เมื่อมีการกรอกข้อมูลลงในฟอร์มค้นหา จะแสดงคำแนะเกี่ยวกับข้อมูลที่ใกล้เคียงกันกับคำค้นในลักษณะคล้าย dropdown ซึ่งเป็นประโยชน์มากเพราะ
- ผลลัพธ์จะแสดงขณะที่กำลังพิมพ์
- ผลลัพธ์จะแคบลงเมื่อพิมพ์ต่อไป
1.ไฟล์ live_search.php
<html> <head> <script> function showResult(str) { if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("livesearch").innerHTML=this.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } xmlhttp.open("GET","get_livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html>
ไฟล์ที่ 1 live_search.php
จากไฟล์ที่ 1 สามารถอธิบายได้ว่า
- บรรทัดที่ 5 หากช่องป้อนข้อมูลว่างเปล่า (str.length == 0) ฟังก์ชันจะทำการล้างเนื้อหาของแท็กไอดีเท่ากับ livesearch และออกจากฟังก์ชัน
- หากช่องป้อนข้อมูลไม่ว่างฟังก์ชัน showResult() จะดำเนินการดังต่อไปนี้:
-
- สร้างวัตถุ XMLHttpRequest
- สร้างฟังก์ชันที่จะดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์พร้อม
- ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
2.ไฟล์ get_livesearch.php
<?php $xmlDoc=new DOMDocument(); $xmlDoc->load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); //get the q parameter from URL $q=$_GET["q"]; //lookup all links from the xml file if length of q>0 if (strlen($q)>0) { $hint=""; for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { //find a link matching the search text if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } else { $hint=$hint . "<br /><a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } } } } } // Set output to "no suggestion" if no hint was found // or to the correct values if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?>
ไฟล์ที่ 2 get_livesearch.php
จากไฟล์ที่ 2 สามารถอธิบายได้ว่า หากมีการเรียกไฟล์ get_livesearch.php จะทำให้มีการดำเนินการดังนี้
- บรรทัดที่ 3 โหลดไฟล์ links.xml เก็บไว้ที่วัตถุ XML DOM ที่สร้างขึ้นใหม่
- วนซ้ำแท็ก <title> ทั้งหมดเพื่อค้นหารายการที่ตรงกันจากข้อความที่ส่งจาก JavaScript
- ตั้งค่า url และ title ที่ถูกต้องเก็บไว้ในตัวแปร “$response” หากพบรายการที่ตรงกันมากกว่าหนึ่งรายการการจับคู่ทั้งหมดจะถูกเพิ่มลงในตัวแปร “$response”
- หากไม่พบรายการที่ตรงกันตัวแปร $response จะถูกตั้งค่าเป็น “ไม่มีคำแนะนำ”
3.ไฟล์ links.xml
ซึ่งไฟล์ links.xml เป็นไฟล์ที่อยู่บนเซิร์ฟเวอร์ และเป็นไฟล์ที่ถูกไฟล์ที่ 2 เรียกนั่นเอง โดยข้อมูลภายในไฟล์มีดังนี้
<pages> <link> <title>ajax php</title> <url>https://www.narasak.com/ajax-php/</url> </link> <link> <title>ajax xml</title> <url>https://www.narasak.com/ajax-xml/</url> </link> </pages>
ไฟล์ที่ 3 links.xml
ตัวอย่างที่ 3 การแสดงข้อมูลในไฟล์ cd_catalog.xml โดยมี Navigator
<html> <body> <div id='showCD'></div><br> <input type="button" onclick="previous()" value="<<"> <input type="button" onclick="next()" value=">>"> <script> var i = 0, len; displayCD(i); function displayCD(i) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this, i); } }; xmlhttp.open("GET", "cd_catalog.xml", true); xmlhttp.send(); } function myFunction(xml, i) { var xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("CD"); len = x.length; document.getElementById("showCD").innerHTML = "Artist: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "<br>Title: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "<br>Year: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue; } function next() { if (i < len-1) { i++; displayCD(i); } } function previous() { if (i > 0) { i--; displayCD(i); } } </script> </body> </html>
ไฟล์ที่ 1 showdata_navigator.php
อธิบายไฟล์ที่ 1 ของตัวอย่างที่ 3
- ฟังก์ชัน displayCD() เป็นฟังก์ชันที่ใช้ในการเรียกไฟล์ cd_catalog.xml
- myFunction() เป็นฟังก์ชันท่ีใชในการแสดงข้อมูลที่อยู่ในไฟล์ cd_catalog.xml
- next() เป็นฟังก์ชันที่ใชในการเพิ่มดัชนีในการค้นหาข้อมูลทีละ 1 (ข้อมูลถัดไป)
- previous() เป็นฟังชั่นที่ใช้ในการลดดัชนีในการค้นหาลงทีละ 1 (ข้อมูลก่อนหน้า)
______________________________________________________________________________
ไฟล์ cd_catalog.xml
<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>Stax Records</COMPANY> <PRICE>7.90</PRICE> <YEAR>1968</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_catalog.xml