PHP dan MySQL misalnya AJAX
AJAX dapat digunakan untuk komunikasi interaktif dengan database.
AJAX contoh database
Contoh berikut akan menunjukkan bagaimana sebuah halaman web melalui AJAX membaca informasi dari database:
contoh
Contoh menjelaskan - database MySQL
Pada contoh di atas, kita menggunakan tabel database adalah sebagai berikut:
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | Brewery |
| 2 | Lois | Griffin | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Police Officer |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
Contoh menjelaskan - Halaman HTML
Bila pengguna dalam daftar drop-down di atas, pilih pengguna, akan mengeksekusi bernama "showUser ()" fungsi. Fungsi ini dengan acara "onchange" dipicu:
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<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>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
showUser () fungsi melakukan langkah-langkah berikut:
- Periksa apakah pengguna yang dipilih
- Buat XMLHttpRequest objek
- Membuat fungsi ketika server siap untuk melakukan respon
- Berkas pada server untuk mengirim permintaan
- Harap perhatikan ditambahkan ke akhir dari parameter URL (q) (berisi isi dari daftar drop-down)
file PHP
Server di atas melalui JavaScript memanggil halaman ini disebut "getuser.php" file PHP.
Kode sumber akan berjalan "getuser.php" di sekali untuk query database MySQL dan mengembalikan hasil dalam tabel HTML:
<?php
$q=$_GET["q"];
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Penjelasan: Ketika permintaan dikirim dari JavaScript ke file PHP akan terjadi:
- PHP membuka koneksi ke database MySQL
- Menemukan pengguna yang dipilih
- Membuat tabel HTML, mengisi data dan mengirimkan kembali "txtHint" placeholder