AJAX dapat digunakan untuk komunikasi interaktif dengan database.
Section Artikel
Contoh Database AJAX
Contoh berikut akan menunjukkan bagaimana halaman web dapat mengambil informasi dari database dengan AJAX:
Contoh :
Penjelasan Contoh – Database MySQL
Tabel database yang digunakan pada contoh di atas terlihat seperti ini :
| 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 |
Penjelasan Contoh
Dalam contoh di atas, saat pengguna memilih seseorang di daftar tarik-turun di atas, fungsi yang disebut “showUser()” dijalankan.
Fungsi ini dipicu oleh peristiwa onchange.
Ini kode HTML-nya:
Contoh :
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.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">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>Penjelasan kode:
Pertama, periksa apakah orang dipilih. Jika tidak ada orang yang dipilih (str == “”), hapus konten dari txtHint dan keluar dari fungsi. Jika seseorang dipilih, lakukan hal berikut:
- Buat objek XMLHttp
- RequestBuat fungsi untuk dijalankan saat respons server siap
- Kirim permintaan ke file di server
- Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan konten daftar dropdown)
File PHP
Halaman di server yang disebut dengan JavaScript di atas adalah file PHP yang disebut “getuser.php”.
Kode sumber di “getuser.php” menjalankan kueri terhadap database MySQL, dan mengembalikan hasilnya dalam tabel HTML :
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_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>
<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);
?>
</body>
</html>Penjelasan: Ketika kueri dikirim dari JavaScript ke file PHP, hal berikut akan terjadi:
- PHP membuka koneksi ke server MySQL
- Orang yang tepat ditemukan
- Tabel HTML dibuat, diisi dengan data, dan dikirim kembali ke placeholder “txtHint”
