Contoh XML AJAX PHP

AJAX dapat berinteraksi dengan berkas XML secara interaktif.

Contoh AJAX XML

Dalam contoh AJAX di bawah ini, kami akan menunjukkan bagaimana halaman web menggunakan teknologi AJAX untuk membaca informasi dari berkas XML.

Pilih satu CD di daftar di bawah ini:

Daftar informasi CD di sini.

Contoh ini termasuk tiga halaman:

  • Formulir HTML sederhana
  • Berkas XML
  • Berkas JavaScript
  • Halaman PHP

Formulir HTML

Contoh di atas termasuk formulir HTML sederhana serta pautan ke JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Pilih 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>Info CD akan dipaparkan di sini.</b></div>
</p>
</body>
</html>

Penggunaan contoh:

Seperti yang anda lihat, ia hanya borang HTML sederhana yang mempunyai senarai turun yang dinamakan "cds".

Paragraf di bawah borang mengandungi div yang dinamakan "txtHint". Div ini digunakan sebagai penanda untuk data yang didapat dari pelayan web.

Ketika pengguna memilih data, fungsi yang dipanggil adalah "showCD". Eksekusi fungsi ini diaktifkan oleh peristiwa "onchange".

Arti lainnya, setiap kali pengguna mengubah nilai dalam senarai turun, fungsi showCD akan dipanggil.

Fail XML

Fail XML adalah "cd_catalog.xml“。Fail ini mengandungi data koleksi CD.”

JavaScript

Ini adalah kod JavaScript yang disimpan di fail "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;
}

Penggunaan contoh:

Fungsi stateChanged() dan GetXmlHttpObject adalah sama seperti di bab sebelumnya, sila rujuk penjelasan yang relevan di halaman sebelumnya.

Fungsi showCD()

Jika pilihan daripada senarai turun dipilih, fungsi akan dijalankan:

  1. Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP
  2. Tentukan URL untuk dihantar ke pelayan (nama fail)
  3. Tambahkan parameter (q) ke URL dengan kandungan senarai turun
  4. Tambahkan nombor acak untuk mengelakkan pelayan menggunakan fail cache
  5. Panggil fungsi stateChanged apabila berlangsung peristiwa
  6. Membuka objek XMLHTTP melalui URL yang diberikan
  7. Menghantar permintaan HTTP ke pelayan

Halaman PHP

Laman pelayan yang dipanggil oleh JavaScript ini adalah fail PHP sederhana bernama "getcd.php".

Laman ini ditulis dalam PHP, menggunakan XML DOM untuk memuat dokumen XML "cd_catalog.xml"。

Penggunaan kod untuk menjalankan kerucut berdasarkan fail XML dan mengembalikan hasil dalam bentuk 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 />");
  } 
}
?>

Contoh Penjelasan

Pada masa permintaan daripada JavaScript ke halaman PHP terjadi:

  1. Objek XML DOM PHP untuk menghasilkan fail "cd_catalog.xml"
  2. Luncurkan semua elemen "artist" (nodetypes = 1), cari nama yang sepadan dengan data yang dihantar JavaScript
  3. Cari CD yang mengandungi artis yang betul
  4. Output maklumat album dan kirim ke penanda tempat "txtHint"