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

AJAX สามารถใช้เพื่อส่งข้อมูลฐานข้อมูลที่เป็นรูปแบบ XML

ตัวอย่าง AJAX Database แปลงเป็น XML (ข้อความทดสอบ: ฟังก์ชันนี้ยังไม่ได้ทำงาน)

ในตัวอย่าง AJAX ต่อไปนี้ เราจะแสดงว่าหน้าเว็บเข้าถึงข้อมูลจากฐานข้อมูล MySQL และแปลงข้อมูลเป็นเอกสาร XML และใช้เอกสารนี้ในหลายส่วนของหน้าเว็บ

ตัวอย่างนี้เหมือนตัวอย่าง "PHP AJAX Database" ในบทก่อน แต่มีความแตกต่างใหญ่หลักหนึ่ง: ในตัวอย่างนี้ เราได้รับข้อมูลที่เป็นรูปแบบ XML จากหน้า PHP ผ่านฟังก์ชัน responseXML

รับ XML ไปที่เป็นคำตอบนี้ทำให้เราสามารถปรับปรุงหลายส่วนของหน้าเว็บได้ ไม่เพียงแค่รับคำออกเสียง PHP และแสดงข้อมูลออกมา

ในตัวอย่างนี้ เราจะใช้ข้อมูลที่ได้รับมาจากฐานข้อมูลเพื่อปรับปรุงหลายตัว <span> ในหน้าเว็บ

เลือกชื่อในรายการที่ดึงดูด

กรุณาเลือกผู้ใช้งานหนึ่งคน：

　

บรรทัดนี้ประกอบด้วยสี่องค์ประกอบ：

  • ฐานข้อมูล MySQL
  • ฟอร์ม HTML ง่ายๆ
  • JavaScript
  • เพจ PHP

ฐานข้อมูล

ฐานข้อมูลที่จะใช้ในตัวอย่างนี้มีลักษณะเหมือนนี้:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

ฟอร์ม HTML

ตัวอย่างดังกล่าวประกอบด้วยฟอร์ม HTML ง่ายๆ และลิงก์ไปยัง JavaScript：

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
เลือกผู้ใช้:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

ตัวอย่างชี้แจง - ฟอร์ม HTML

  • ฟอร์ม HTML คือรายการดรอปดาวน์ ค่าที่มีในอัตรายะที่มีค่าตามตารางหรือฐานข้อมูล
  • มีส่วน <span> หลายส่วนด้านล่างฟอร์ม ซึ่งใช้เป็นตัวยืนยันสำหรับค่าที่เราได้รับ
  • เมื่อผู้ใช้เลือกตัวเลือกเฉพาะเจาะจง ฟังก์ชัน "showUser()" จะทำงาน การทำงานของฟังก์ชันนี้จะดำเนินการโดยเหตุการณ์ "onchange"

ในทางกลับกัน ในแต่ละครั้งที่ผู้ใช้เปลี่ยนค่าในรายการดропดาวน์ ฟังก์ชัน showUser() จะทำงาน และแสดงผลในส่วน <span> ที่กำหนด

JavaScript

นี่คือรหัส JavaScript ที่เก็บไว้ในไฟล์ "responsexml.js":

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp = null
 if (window.XMLHttpRequest)
  {
  objXMLHttp = new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

ตัวอย่างที่อธิบาย:

ฟังก์ชัน showUser() และฟังก์ชัน GetXmlHttpObject นั้น ตัวอย่าง PHP และ AJAX MySQL ฐานข้อมูล ตัวอย่างในบทนี้เหมือนกัน คุณสามารถอ่านชี้แจงที่เกี่ยวข้องได้

ฟังก์ชัน stateChanged()

ถ้าเลือกโอปเชันในรายการด้านล่าง ฟังก์ชันนี้จะทำงาน:

  1. ด้วยการใช้ฟังก์ชัน responseXML กำหนดตัวแปร xmlDoc ให้เป็นเอกสาร XML
  2. รับข้อมูลจากเอกสาร XML และจัดเก็บข้อมูลเข้าใน "span" ที่ถูกต้อง

เพจ PHP

เพจนี้เป็นเพจบริการที่เรียกโดย JavaScript และเป็นไฟล์ PHP ที่ชื่อว่า "responsexml.php" ซึ่งเป็นไฟล์ PHP ที่เรียบง่าย

เพจนี้เขียนด้วย PHP และใช้ฐานข้อมูล MySQL。

รหัสที่ต่อไปนี้จะปฏิบัติการคำสั่ง SQL ต่อฐานข้อมูล และกลับค่าผลลัพธ์ในแบบเอกสาร XML:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q = $_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);}
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

ตัวอย่างที่อธิบาย:

เมื่อคำถามถูกส่งมายังหน้า PHP โดย JavaScript

  • ตั้งค่า content-type ของเอกสาร PHP ให้เป็น "text/xml"
  • ตั้งค่าความหมายของเอกสาร PHP ให้เป็น "no-cache" เพื่อป้องกันการจัดเก็บแคช
  • ตั้งค่าตัวแปร $q ด้วยข้อมูลที่ส่งมาด้วย HTML หน้า
  • PHP เปิดการเชื่อมต่อกับ MySQL ซีร์เวอร์
  • หา "user" ที่มี id ที่กำหนด
  • ส่งออกข้อมูลในแบบเอกสาร XML