Asynchronous JavaScript and XML

Home

AJAX Tutorial
Knowledge Developer Database Internet Resource
AJAX Tutorial
1. แนะนำ AJAX
2. ตัวอย่าง AJAX
3. การสร้าง XMLHttpRequest Object
4. การส่งคำขอไปแม่ข่าย
5. การตอบสนองจากแม่ข่าย
6. onreadystatechange Event
7. AJAX PHP/ASP
8. AJAX Database
9. AJAX XML
 
Internet
PHP
SSI
HTML
AJAX
 

AJAX XML

AJAX สามารถใช้การสื่อสารแบบปฏิสัมพันธ์กับไฟล์ XML

ตัวอย่าง AJAX XML

ตัวอย่างนี้จะสาธิต การ fetch สารสนเทศของเว็บเพจจากไฟล์ XML ด้วย AJAX

เลือกซีดี:
สารสนเทศซีดีแสดงผลที่นี่...

อธิบายตัวอย่าง - stateChange() Function

เมื่อผู้ใช้คลิกปุ่ม “เลือกซีดี” ฟังก์ชัน loadXMLDoc() ได้รับการประมวลผล

ฟังก์ชัน loadXMLDoc() สร้างอ๊อบเจค XMLHttpRequest เพิ่มฟังก์ชันประมวลผล เมื่อการตอบสนอง จากแม่ข่ายพร้อม แล้วส่งออกคำขอไปยังแม่ข่าย  

เมื่อการตอบสนองจากแม่ข่ายพร้อม จะสร้างตาราง HTML ขึ้นมา node (element) ได้รับการดึง ออกมาจากไฟล์ XML แล้วปรับปรุงสุดท้ายที่ตัวเก็บ txtCDInfo ด้วยตาราง HTML ที่เติมข้อมูล XML

<html>
<head>
<script type="text/javascript">
function showCD(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
เลือกซีดี:
<select name="cds" onchange="showCD(this.value)">
<option value="">เลือกซีดี:</option>
<option value="แอม เสาวลักษณ์ ลีละบุตร">แอม เสาวลักษณ์ ลีละบุตร</option>
<option value="เจนนิเฟอร์ คิ้ม">เจนนิเฟอร์ คิ้ม</option>
<option value="ปนัดดา เรืองวุฒิ">ปนัดดา เรืองวุฒิ</option>
<option value="แก้ม เดอะสตาร์">แก้ม เดอะสตาร์</option>
<option value="เอ็นโดรฟิน">เอ็นโดรฟิน</option>
<option value="ดา เอ็นโดรฟิน">ดา เอ็นโดรฟิน</option>
<option value="ปาล์มมี่ อีฟ ปานเจริญ">ปาล์มมี่ อีฟ ปานเจริญ</option>
<option value="ศรัณย่า ส่งเสริมสวัสดิ์">ศรัณย่า ส่งเสริมสวัสดิ์</option>
<option value="ฝน ธนสุนทร">ฝน ธนสุนทร</option>
<option value="ไฮแจ็ค">ไฮแจ็ค</option>
<option value="บิ๊กแอส">บิ๊กแอส</option>
<option value="แบล็คเฮด">แบล็คเฮด</option>
<option value="พาราด็อกซ์">พาราด็อกซ์</option>
<option value="อาร์มแชร์ิ">อาร์มแชร์</option>
</select>
</form>
<div id="txtHint"><b>สารสนเทศซีดีแสดงผลที่นี่...</b></div>

</body>
</html>


ฟังก์ชัน showCD() ทำงานดังนี้

  • ตรวจสอบ ถ้ามีการเลือกซีดี
  • สร้างอ๊อบเจค XMLHttpRequest
  • สร้างการประมวลผลฟังก์ชัน เมื่อการตอบสนองของแม่ข่ายพร้อม
  • ส่งออกไฟล์บนแม่ข่าย
  • ให้สังเกตว่า พารามิเตอร์ (q) ได้รับการเพิ่มสู่ URL (ด้วยเนื้อหาของ dropdown list)

The PHP File

เพจบนแม่ข่ายที่เรียกโดย JavaScript คือไฟล์ PHP ชื่อ "getcd.php"

สคริปต์ PHP โหลดเอกสาร XML ชื่อ “cd_catalog.xml” แล้วจะเรียกคิวรี่จากไฟล์ XML และส่งกลับผลลัพธ์เป็นไฟล์ HTML  


<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_song_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 />");
  }
}
?>


เมื่อคิวรี่ CD ได้รับการส่งจาก JavaScript ไปยังเพจ PHP จะเกิดการประมวลดังนี้

  1. PHP สร้างอ๊อบเจค XML DOM
  2. ค้นหา <artist> elements ที่ตรงกับชื่อที่ส่งจาก JavaScript
  3. ส่งผลลัพธ์สารสนเทศอัลบั้ม (ส่งไปที่ตัววาง “txtHint”)

 


  
[an error occurred while processing this directive]