AJAX XML

Ajax XML สามารถใช้เพื่อสร้างการโต้ตอบกับไฟล์ XML ดังตัวอย่างต่อไปนี้

ซึ่งในเนื้อหานี้มีตัวอย่างที่เกี่ยวข้องกับ Ajax XML อยู่ด้วยกัน 2 ตัวอย่างประกอบด้วย 

  1. ตัวอย่างที่ 1 การค้นหาข้อมูลไฟล์ xml
  2. ตัวอย่างที่ 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. ผลลัพธ์จะแสดงขณะที่กำลังพิมพ์
  2. ผลลัพธ์จะแคบลงเมื่อพิมพ์ต่อไป

 

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 สามารถอธิบายได้ว่า

  1. บรรทัดที่ 5 หากช่องป้อนข้อมูลว่างเปล่า (str.length == 0) ฟังก์ชันจะทำการล้างเนื้อหาของแท็กไอดีเท่ากับ livesearch และออกจากฟังก์ชัน
  2. หากช่องป้อนข้อมูลไม่ว่างฟังก์ชัน 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

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors:

Send