Contoh AJAX dan XML PHP

AJAX dapat berinteraksi secara interaktif dengan berkas XML.

Contoh AJAX XML

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

Pilih satu CD di daftar berikut di bawah:

Daftar informasi CD di sini.

Contoh ini termasuk tiga halaman:

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

Form HTML

Contoh di atas termasuk form HTML sederhana serta tautan 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 ditampilkan di sini.</b></div>
</p>
</body>
</html>

Contoh penjelasan:

Seperti yang Anda lihat, ini hanya formulir HTML sederhana yang mempunyai daftar pilihan yang jatuh bernama "cds".

Paragraf di bawah formulir mengandung div yang bernama "txtHint". Div ini digunakan sebagai placeholder untuk data yang diambil dari server web.

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

Artinya, setiap pengguna mengubah nilai dalam daftar pilihan yang jatuh, fungsi showCD akan dipanggil.

Berkas XML

Berkas XML adalah "cd_catalog.xmlberisi data koleksi CD.

JavaScript

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

Contoh penjelasan:

Fungsi stateChanged() dan GetXmlHttpObject sama seperti di bab sebelumnya, Anda dapat melihat penjelasan yang relevan di halaman sebelumnya.

Fungsi showCD()

Jika salah satu item di daftar pilihan di pilih, fungsi akan dieksekusi:

  1. Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP
  2. Definiskan URL yang dikirim ke server (nama berkas)
  3. Tambahkan parameter (q) ke URL dengan konten daftar pilihan
  4. Tambahkan angka acak untuk mencegah server menggunakan berkas yang di-cache
  5. Panggil stateChanged saat terjadi peristiwa
  6. Membuka objek XMLHTTP melalui URL yang diberikan
  7. Mengirim permintaan HTTP ke server

Halaman PHP

Halaman server yang dipanggil oleh JavaScript ini adalah berkas PHP sederhana bernama "getcd.php".

Halaman ini ditulis dalam PHP, menggunakan XML DOM untuk memuat berkas XML "cd_catalog.xml"。

Pemrosesan kode berhadapkan berkas 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++)
{
//Proses hanya node elemen
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++)
{ 
//Proses hanya node elemen
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Contoh Penjelasan

Ketika permintaan dari JavaScript dikirim ke halaman PHP terjadi:

  1. PHP membuat objek XML DOM untuk berkas "cd_catalog.xml"
  2. Lakukan perulangan semua elemen "artist" (nodetypes = 1), mencari nama yang cocok dengan data yang disampaikan JavaScript
  3. Temukan CD yang mengandung artis yang benar
  4. Output informasi album dan kirim ke penanda tempat "txtHint"