AJAX می‌تواند برای ارتباط تعاملی با یک پایگاه داده استفاده شود.
مثال پایگاه داده با AJAX
مثال زیر نشان می‌دهد که چگونه یک صفحه وب می‌تواند اطلاعات را از یک پایگاه داده با استفاده از AJAX فراخوانی کند:
<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", "family.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>توضیح مثال
در مثال بالا، هنگامی که کاربر فردی را از لیست کشویی انتخاب می‌کند، تابعی به نام showUser() اجرا می‌شود.
این تابع با رویداد onchange فراخوانی می‌شود.
- ابتدا بررسی می‌شود که آیا فردی انتخاب شده است یا نه. اگر هیچ فردی انتخاب نشده باشد (
str == "")، محتوایtxtHintپاک می‌شود و تابع خاتمه می‌یابد. - اگر فردی انتخاب شده باشد، اقدامات زیر انجام می‌شود:
- ایجاد یک شیء
XMLHttpRequest - ایجاد تابعی که هنگام آماده شدن پاسخ سرور اجرا شود
- ارسال درخواست به یک فایل در سرور
- توجه داشته باشید که پارامتر
qبه URL اضافه می‌شود (با محتوای لیست کشویی)
- ایجاد یک شیء
فایل PHP
صفحه‌ای که توسط جاوااسکریپت فراخوانی می‌شود یک فایل PHP به نام family.php است.
کد زیر در family.php یک کوئری علیه یک پایگاه داده MySQL اجرا می‌کند و نتیجه را در یک جدول HTML برمی‌گرداند:
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost', 'peter', 'abc123');
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);
?>توضیحات
هنگامی که کوئری از جاوااسکریپت به فایل PHP ارسال می‌شود، مراحل زیر انجام می‌شود:
- PHP یک اتصال به سرور MySQL باز می‌کند.
- فرد مورد نظر پیدا می‌شود.
- یک جدول HTML ایجاد می‌شود، با داده‌ها پر می‌شود و به مکان‌نما
txtHintبازگردانده می‌شود.
این روش به شما امکان می‌دهد تا به صورت دینامیک و بدون نیاز به بارگذاری مجدد کل صفحه، اطلاعات را از پایگاه داده واکشی و نمایش دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام