Contoh responseXML AJAX dan PHP

AJAX dapat digunakan untuk mengembalikan informasi database dalam bentuk XML.

Contoh AJAX Database ke XML (Petunjuk tes: fungsi ini belum diimplementasikan)

Pada contoh AJAX di bawah ini, kita akan menunjukkan bagaimana halaman web membaca informasi dari database MySQL, mengkonversi data ke dokumen XML, dan menggunakan dokumen ini untuk menampilkan informasi di berbagai tempat.

Contoh ini mirip dengan contoh "PHP AJAX Database" di bagian sebelumnya, tetapi ada perbedaan besar: di contoh ini, kita mendapatkan data dalam bentuk XML melalui fungsi responseXML dari halaman PHP.

Menerima dokumen XML sebagai tanggapan memungkinkan kita untuk memperbarui berbagai tempat di halaman, bukan hanya menerima output PHP dan menampilkannya.

Dalam contoh ini, kita akan menggunakan informasi yang diterima dari database untuk memperbarui beberapa elemen <span>.

Pilih nama di dalam daftar turun

Pilih pengguna satu

　

Kolom ini terdiri dari empat elemen:

  • Database MySQL
  • Form HTML sederhana
  • JavaScript
  • Halaman PHP

Database

Database yang akan digunakan di contoh ini seperti berikut:

id Nama Depan Nama Belakang Umur Tempat Asal Pekerjaan
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Guru Pianino
3 Joseph Swanson 39 Quahog Petugas Polisi
4 Glenn Quagmire 41 Quahog Pilot

Form HTML

Contoh di atas termasuk form HTML sederhana serta tautan ke JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Pilih Pengguna:
<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>

Contoh Penjelasan - Formulir HTML

  • Formulir HTML adalah daftar turun, nilai atribut name-nya adalah "users", dan opsi yang tersedia sejalan dengan kolom id basis data
  • Bawah formulir ada beberapa elemen <span>, yang digunakan sebagai penanda untuk nilai yang kami terima
  • Ketika pengguna memilih opsi yang spesifik, fungsi "showUser()" akan dijalankan. Eksekusi fungsi ini di trigger oleh peristiwa "onchange"

Arti lainnya, setiap kali pengguna mengubah nilai di daftar turun, fungsi showUser() akan dijalankan dan menampilkan hasil di elemen <span> yang ditentukan.

JavaScript

Ini adalah kode JavaScript yang disimpan di berkas "responsexml.js":

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert("Peramban tidak mendukung Permintaan HTTP");
  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="Umur: ";
 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;
 }
}
fungsi GetXmlHttpObject()
 { 
 var objXMLHttp=null
 jika (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 kembalikan objXMLHttp
 }

Contoh penjelasan:

Fungsi showUser() dan GetXmlHttpObject dengan Contoh Database MySQL AJAX dan PHP Contoh di bagian ini sama. Anda dapat melihat penjelasan yang relevan di sana.

Fungsi stateChanged()

Jika pilihan dalam daftar deret dipilih, fungsi ini dijalankan:

  1. Dengan menggunakan fungsi responseXML, definisikan variabel "xmlDoc" sebagai dokumen XML
  2. Ambil data dari dokumen XML ini, dan tempatkannya di elemen "span" yang benar.

Halaman PHP

Halaman server yang dipanggil oleh JavaScript ini adalah berkas PHP sederhana dengan nama "responsexml.php".

Halaman ini ditulis dalam PHP dan menggunakan database MySQL.

Kode akan menjalankan query SQL terhadap database dan mengembalikan hasil dalam dokumen XML:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//Sebuah tanggal di masa lalu
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
jika (!$con)
 {
 die('Tidak dapat terhubung: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="Pilih * Dari 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);
?>

Contoh penjelasan:

Ketika kueri datang dari JavaScript ke halaman PHP, terjadi:

  • Dokumen content-type PHP diatur menjadi "text/xml"
  • Dokumen PHP diatur menjadi "no-cache" untuk mencegah penyanggaan
  • Tetapkan variabel $q dengan data yang dikirim melalui halaman HTML
  • PHP membuka koneksi ke server MySQL
  • Temukan "user" dengan id yang ditentukan
  • Output data dalam dokumen XML