AJAX می تواند برای ارتباط تعاملی با پایگاه داده نیز مورد استفاده قرار گیرد.
در این قسمت نمونه برنامه ای برای انتخاب نام شخص از لیست کشویی، دریافت مشخصات شخص از سرور با کمک ایجکس و نمایش مشخصات خواهیم داشت:
مثال پایگاه داده AJAX
روش استفاده از بانک اطلاعاتی در تکنولوژی AJAX را با ذکر یک مثال نشان می دهیم. فرض کنید یک جدول بانک اطلاعاتی بصورت زیر دارید:
| 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 |
و می خواهیم کاربر بتواند در یک لیست کشویی نام شخص را انتخاب کند و به محض انتخاب نام، مشخصات کامل فرد از بانک اطلاعاتی خوانده شده و در یک جدول HTML نشان داده شود.
کد HTML برای خواندن از بانک اطلاعاتی
کد HTML برای این مثال بصورت زیر خواهد بود:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
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>
همانطور که مشاهده می کنید این کد جاوااسکریپت ابتدا بررسی می کند که شخصی انتخاب شده باشد، اگر هیچ شخصی انتخاب نشده باشد (str == “”)، محتوای txtHint را پاک کرده و از تابع خارج می شود. اگر شخصی انتخاب شده باشد، موارد زیر را انجام دهید:
- یک شیء XMLHttpRequest ایجاد می کند.
- هنگامی که پاسخ سرور آماده است، تابع اجرا می شود.
- درخواست را به یک فایل در سرور ارسال می کند.
توجه داشته باشید که پارامتر (q) به URL اضافه می شود (که مقدار انتخاب شده در لیست کشویی را دارد)
فایل پی اچ پی
صفحه سمت سروری که برای این مثال استفاده شده فایل پی اچ پی با نام getuser.php است.
کد منبع اسکریپت پی اچ پی در زیر نشان داده شده است، در getuser.php یک پرس و جو در پایگاه داده MySQL اجرا کرده و نتیجه را در یک جدول 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>
توضیح: هنگامی که درخواست از جاوا اسکریپت به فایل PHP ارسال می شود، موارد زیر اتفاق می افتد:
- پی اچ پی اتصال به سرور MySQL را باز می کند.
- فردی با نام درخواستی را از بانک اطلاعاتی می خواند.
- یک جدول HTML با داده ها پر می شود و به حفره یا سوراخ “txtHint” ارسال می شود.