PHP และ AJAX ตัวอย่าง XML

AJAX สามารถติดต่อการสื่อสารโดยสัมพันธ์กับไฟล์ XML。

ตัวอย่าง AJAX XML

ในตัวอย่าง AJAX ต่อไปนี้ เราจะแสดงว่าเว็บไซต์ทำไมใช้เทคโนโลยี AJAX ที่จะอ่านข้อมูลจากไฟล์ XML。

เลือก CD หนึ่งในรายการต่อไปนี้:

บันทึกข้อมูล CD ตามนี้。

ตัวอย่างนี้ประกอบด้วยหน้าเว็บสามเฉพาะ:

  • ฟอร์ม HTML แบบง่ายๆ
  • ไฟล์ XML
  • ไฟล์ JavaScript
  • หน้าแบบ PHP

ฟอร์ม HTML

ตัวอย่างของที่นั้นประกอบด้วยฟอร์ม HTML แบบง่ายๆ และลิงก์มาที่ JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>

例子解释：

เช่นเดียวกับที่คุณเห็นได้ มันเป็นฟอร์ม HTML ที่มีรายการตัดเลือกชื่อว่า "cds"

ย่อหน้าข้างล่างของฟอร์มมี div ชื่อ "txtHint" ซึ่งใช้เป็นตัวจัดทำช่องว่างสำหรับข้อมูลที่รับมาจากเซิร์ฟเวอร์ web

เมื่อผู้ใช้เลือกข้อมูล จะปฏิบัติการฟังก์ชัน "showCD" ซึ่งปฏิบัติการด้วยเหตุการณ์ "onchange"

ในทางตรงกันข้าม ในแต่ละครั้งที่ผู้ใช้เปลี่ยนค่าในรายการตัดเลือก จะเรียกฟังก์ชัน showCD

XML ไฟล์

XML ไฟล์คือ "cd_catalog.xml". แฟ้มนี้มีข้อมูลเกี่ยวกับ CD ที่เก็บเกี่ยวด้วย"

JavaScript

เป็นรหัส JavaScript ที่เก็บไว้ในแฟ้ม "selectcd.js"

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解释：

stateChanged() 和 GetXmlHttpObject 函数与上一节中的相同，您可以参阅上一页中的相关解释。

showCD() 函数

假如选择了下拉列表中的某个项目，则函数执行：

  1. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
  2. กำหนด URL ที่ส่งข้อมูล (ชื่อไฟล์) ไปยังเซิร์ฟเวอร์
  3. เพิ่มตัวแปรที่มีลิสต์แบบดาวน์และความหมายของลิสต์ (q)
  4. เพิ่มตัวเลขสุ่มเพื่อป้องกันเซิร์ฟเวอร์ใช้ไฟล์ที่มีความหมายความหมาย
  5. เรียกฟังก์ชัน stateChanged ขณะที่มีการเกิดเหตุ
  6. เปิด XMLHTTP ด้วย URL ที่ให้
  7. ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์

PHP หน้า

เพจสำหรับ JavaScript ที่เรียกใช้บนเซิร์ฟเวอร์ คือไฟล์ PHP ที่ชื่อว่า "getcd.php" ที่เป็นไฟล์ PHP ที่ง่ายๆ

เพจนี้เขียนด้วย PHP และใช้ XML DOM ที่จะโหลดไฟล์ XML:cd_catalog.xml"。

รหัสที่ปฏิบัติการ XML ในไฟล์ XML และส่งผลลัพธ์เป็น HTML:

<?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($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

ตัวอย่างที่เห็น

เมื่อมีการส่งคำขอมาจาก JavaScript ไปยังหน้า PHP จะเกิดขึ้น:

  1. PHP สร้างอ็อบเจกต์ XML DOM สำหรับไฟล์ "cd_catalog.xml"
  2. วนทั้งหมด element nodes ของ "artist" (nodetypes = 1) และค้นหาชื่อที่ตรงกับข้อมูลที่ส่งมาด้วย JavaScript
  3. หาซีดีที่มี artist ที่ถูกต้อง
  4. แสดงข้อมูลของ album และส่งไปยังตัวจับคำนำออก "txtHint"