Mẫu XML AJAX và PHP

AJAX có thể giao tiếp tương tác với tệp XML.

Ví dụ AJAX XML

Trong ví dụ AJAX dưới đây, chúng ta sẽ演示 cách trang web sử dụng công nghệ AJAX để đọc thông tin từ tệp XML.

Chọn một CD từ danh sách dưới đây

Dưới đây liệt kê thông tin CD.

Ví dụ này bao gồm ba trang:

  • Một biểu mẫu HTML đơn giản
  • Một tệp XML
  • Một tệp JavaScript
  • Một trang PHP

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="selectcd.js"></script>
</head>
<body>
<form> 
Chọn một 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>Thông tin CD sẽ được liệt kê ở đây.</b></div>
</p>
</body>
</html>

Ví dụ minh họa:

Như bạn đã thấy, nó chỉ là một biểu mẫu HTML đơn giản với danh sách thả xuống có tên là "cds".

Dòng đoạn văn dưới biểu mẫu chứa một div có tên là "txtHint".

Khi người dùng chọn dữ liệu, hàm có tên "showCD" 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 showCD sẽ được gọi.

Tệp XML

Tệp XML là "cd_catalog.xml". Tệp này chứa dữ liệu về bộ sưu tập CD.

JavaScript

Đây là mã JavaScript được lưu trữ trong tệp "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Trình duyệt không hỗ trợ yêu cầu HTTP")
 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;
}

Ví dụ minh họa:

Hàm stateChanged() và GetXmlHttpObject tương tự như trong phần trước, bạn có thể xem giải thích liên quan trong trang trước.

Hàm showCD()

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

  1. Gọi hàm GetXmlHttpObject để tạo đối tượng XMLHTTP
  2. Định nghĩa URL gửi đến máy chủ (tên tệp)
  3. Thêm tham số với nội dung danh sách thả xuống vào URL (q)
  4. Thêm một số ngẫu nhiên để tránh máy chủ sử dụng tệp đã lưu cache
  5. Gọi hàm stateChanged khi sự kiện được kích hoạt
  6. Mở đối tượng XMLHTTP bằng URL đã cho
  7. Gửi yêu cầu HTTP đến máy chủ

Trang PHP

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

Trang này được viết bằng PHP, sử dụng XML DOM để tải tệp XML "cd_catalog.xml"。

Mã nguồn chạy để tra cứu tệp XML và trả về kết quả dưới dạng 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++)
{
//Chỉ xử lý các nút phần tử
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++)
{ 
//Chỉ xử lý các nút phần tử
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Ví dụ giải thích

Khi yêu cầu được gửi từ JavaScript đến trang PHP, xảy ra:

  1. PHP tạo đối tượng XML DOM cho tệp "cd_catalog.xml"
  2. Lặp lại tất cả các phần tử "artist" (nodetypes = 1), tìm kiếm tên phù hợp với dữ liệu được truyền từ JavaScript
  3. Tìm CD chứa nghệ sĩ chính xác
  4. Xuất thông tin album và gửi đến ký hiệu "txtHint"