Mô hình responseXML và AJAX trong PHP

AJAX có thể được sử dụng để trả về thông tin cơ sở dữ liệu dưới dạng XML.

Ví dụ AJAX Database chuyển XML (thuật ngữ kiểm tra: chức năng của ví dụ này chưa được triển khai)

Trong ví dụ AJAX dưới đây, chúng ta sẽ演示 cách trang web đọc thông tin từ cơ sở dữ liệu MySQL, chuyển đổi dữ liệu thành tệp XML và sử dụng tệp này để hiển thị thông tin ở nhiều vị trí khác nhau.

Ví dụ này rất tương tự như ví dụ "PHP AJAX Database" trong phần trước, nhưng có một sự khác biệt lớn: trong ví dụ này, chúng ta nhận dữ liệu dưới dạng XML từ trang PHP bằng cách sử dụng hàm responseXML.

Nhận tệp XML làm phản hồi cho phép chúng ta cập nhật nhiều vị trí trên trang, không chỉ nhận một đầu ra PHP và hiển thị ra.

Trong ví dụ này, chúng ta sẽ sử dụng thông tin nhận được từ cơ sở dữ liệu để cập nhật nhiều yếu tố <span> khác nhau.

Chọn một tên trong danh sách thả xuống

Hãy chọn một người dùng:

　

Cột này được组成 bởi bốn yếu tố:

  • Cơ sở dữ liệu MySQL
  • Biểu mẫu HTML đơn giản
  • JavaScript
  • Trang PHP

Cơ sở dữ liệu

Cơ sở dữ liệu mà chúng ta sẽ sử dụng trong ví dụ này trông như sau:

id Tên Họ Tuổi Quê hương Công việc
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Giáo viên piano
3 Joseph Swanson 39 Quahog Cảnh sát
4 Glenn Quagmire 41 Quahog Pilot

Biểu mẫu HTML

Ví dụ trên bao gồm một biểu mẫu HTML đơn giản và liên kết đến JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Chọn người dùng:
<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>

Ví dụ minh họa - Biểu mẫu HTML

  • Biểu mẫu HTML là một danh sách thả xuống, giá trị thuộc tính name là "users", các tùy chọn tương ứng với trường id trong cơ sở dữ liệu
  • Dưới biểu mẫu có một số thẻ <span>, chúng được sử dụng làm đại diện cho các giá trị khác nhau mà chúng ta nhận được
  • Khi người dùng chọn một tùy chọn cụ thể, hàm "showUser()" sẽ được thực thi. Việc thực thi hàm này được kích hoạt bởi sự kiện "onchange"

Nói cách khác, mỗi khi người dùng thay đổi giá trị trong danh sách thả xuống, hàm showUser() sẽ được thực thi và hiển thị kết quả trong thẻ <span> đã chỉ định.

JavaScript

Đây là mã JavaScript được lưu trữ trong tệp "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
 }

Ví dụ giải thích:

showUser() và hàm GetXmlHttpObject với Mô hình database MySQL và AJAX trong PHP Ví dụ trong phần này là giống nhau. Bạn có thể xem các giải thích liên quan.

Hàm stateChanged()

Nếu chọn mục trong danh sách thả xuống, hàm này sẽ thực hiện:

  1. Sử dụng hàm responseXML để định nghĩa biến "xmlDoc" là một tài liệu XML
  2. Lấy dữ liệu từ tài liệu XML này, đặt chúng vào các phần tử "span" đúng

Trang PHP

Trang web này được gọi bởi JavaScript, là một tệp PHP đơn giản có tên là "responsexml.php".

Trang này được viết bằng PHP và sử dụng cơ sở dữ liệu MySQL.

Mã nguồn sẽ thực hiện một truy vấn SQL đối với cơ sở dữ liệu và trả về kết quả dưới dạng tài liệu 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);
?>

Ví dụ giải thích:

Khi truy vấn được gửi từ JavaScript đến trang PHP, sẽ xảy ra:

  • Loại content-type của tài liệu PHP được đặt là "text/xml"
  • PHP tài liệu được đặt là "no-cache" để防止 lưu cache
  • Đặt biến $q bằng dữ liệu từ trang HTML
  • PHP mở kết nối với máy chủ MySQL
  • Tìm "user" có id đã chỉ định
  • Xuất dữ liệu dưới dạng tài liệu XML