Contoh responseXML AJAX dan PHP

AJAX dapat digunakan untuk mengembalikan informasi database dalam format XML.

Contoh AJAX Database ke XML (Petunjuk pengujian: Fungsi ini belum diimplementasikan)

Dalam contoh AJAX di bawah ini, kami 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 sangat mirip dengan contoh "PHP AJAX Database" di bab sebelumnya, namun ada perbedaan yang besar: Dalam contoh ini, data yang didapatkan dari halaman PHP melalui fungsi responseXML berupa data berformat XML.

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

Dalam contoh ini, kami akan menggunakan informasi yang diterima dari database untuk memperbarui banyak elemen <span> di halaman.

Pilih nama dalam daftar turun

Pilih pengguna yang satu:

　

Kolom ini terdiri dari empat elemen:

  • Database MySQL
  • Formulir HTML sederhana
  • JavaScript
  • Laman PHP

Database

Database yang akan digunakan dalam contoh ini melihat seperti ini:

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

Formulir HTML

Contoh yang di atas mengandung formulir HTML sederhana serta pautan 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>

Pengertian Contoh - Borang HTML

  • Borang HTML adalah senarai turun yang name atributnya adalah "users", pilihan nilai dihubungkan dengan field id pangkalan data
  • Bawah borang ada beberapa elemen <span>, yang digunakan sebagai penanda bagi nilai yang kami terima
  • Ketika pengguna memilih pilihan khusus, fungsi "showUser()" akan dijalankan. Pemanggilan fungsi ini diaktifkan oleh peristiwa "onchange"

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

JavaScript

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

Contoh penjelasan:

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

Fungsi stateChanged()

Jika pilihan dalam daftar turun dipilih, fungsi ini akan dijalankan:

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

Laman PHP

Laman pelayan yang dipanggil oleh JavaScript ini adalah berkas PHP sederhana yang dinamai "responsexml.php".

Laman ini ditulis dalam PHP dan menggunakan pangkalan data MySQL.

Kod akan menjalankan penyelidikan SQL terhadap database dan mengembalikan hasil dalam dokumen 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);
?>

Contoh penjelasan:

Ketika permintaan dari JavaScript sampai ke halaman PHP, akan terjadi:

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