آموزش Ajax > مثال های عملی کار با Ajax > کاربرد Ajax در پایگاه داده
کاربرد Ajax در پایگاه داده :
در این بخش قصد داریم ، تا با ارائه یک مثال عملی و تشریح گام به گام آن ، نحوه استفاده
و کار با دستورات Ajax ، برای فراخوانی و دریافت اطلاعات از یک پایگاه داده و
سپس نمایش آنها ، بر روی یک صفحه PHP را نمایش دهیم .
در این مثال یک منوی کرکره ای قرار دارد که نام چندین مشتری در آن تعیین شده است .
کاربر با انتخاب نام هر کدام از مشتریان ، به اطلاعات آن دسترسی پیدا خواهد کرد .
هنگامی که کاربر گزینه ای را در منوی کرکره ای انتخاب می کند ، مجموعه ای از
دستورات Ajax و PHP اجرا شده و در پس زمینه صفحه ، به پایگاه داده متصل می شوند . سپس
اطلاعات درخواستی را دریافت کرده و پس از انتقال به صفحه در بخش مورد نظر ، به روز
رسانی می نماید .
1 ) کد فایل html و تابع ( ) showUser :
هنگامی که کاربر گزینه ای را از منوی کرکره ای بر روی صفحه انتخاب می کند ، رویداد
( ) onchnage کنترل اجرا شده و تابع ( ) showUser را فراخوانی می کند . این رویداد
مقدار انتخاب شده در کنترل را به وسیله دستور this.value به پارامتر str در تابع ارسال
می کند ، تا به تابع اعلام کند ، کاربر کدام گزینه را انتخاب کرده است .
جدول زیر ، کد فایل HTML و کد تابع ( ) showUser را نمایش می دهد . کد آن را مرور نمایید
. سپس به توضیح گام به گام آن پرداخته ایم .
این پروژه دارای یک فایل PHP نیز می باشد که کد آن ، عملیات اتصال به پایگاه
داده را انجام می دهد . برای مشاهده کد آن ، به بخش سوم مثال بروید
.
کد صفحه
HTML
و کد تابع
ShowUser ( )
|
<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">Ali</option>
<option
value="2">Reza</option>
<option
value="3">Mohsen</option>
</select>
</form>
<br>
<div id="txtHint">
<b>اطلاعات مشتری:</b>
</div>
</body>
</html>
|
|
: اطلاعات مشتری
|
2 ) توضیح گام به گام کد مثال :
هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :
- این بخش کد مثال ، بررسی می کند اگر کادر متن خالی نبوده و کاربر گزینه
ای را انتخاب کرده باشد ، ( " "== str ) ، تابع مقدار عنصر txtHint
موجود بر روی صفحه را پاک کرده و از تابع خارج می شود .
- این بخش از کد یک شی XMLHttpRequest
را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را
قرار داده ایم .
- این بخش از کد ، بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته
و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود
بر روی صفحه قرار می دهد .
- این بخش از کد ، شی xmlhttp ، را آماده کرده و به وسیله
متد GET ، آن را به فایل مورد نظرمان یعنی getuser.php ارسال
می کند .
همچنین توجه داشته باشید ، که متغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال
شده است ، که بعدا در آن دریافت و استفاده خواهد شد .
- فرم HTML موجود بر روی صفحه نیز ، کنترل کرکره ای را نمایش می دهد ، که کاربر می تواند
از آن انتخاب نماید .
- همچنین تگ div با id برابر txtHint ، پاسخ Ajax ارسالی را از سرور دریافت
کرده و با یک عملیات به روز رسانی نمایش می دهد .
3 ) نمایش و توضیح کد فایل PHP :
این پروژه دارای یک فایل PHP هم می باشد ، که عملیات اتصال و دریافت از پایگاه داده
را انجام می دهد .
نام این فایل getuser.php است که دستور Ajax صفحه HTML ، فایل PHP را با پاس دادن متغیر
str به آن ، فراخوانی و اجرا می کند .
این صفحه مقدار پارامتر str ، که همان گزینه انتخاب شده در منوی کرکره ای است را دریافت
کرده و به پایگاه داده متصل می شود . سپس اطلاعات فرد انتخاب شده را از پایگاه داده
استخراج کرده و به صفحه HTML بر می گرداند .
جدول زیر کد قایل PHP مثال را نمایش می دهد . آن را مرور نمایید . به توضیح بخش های
مختلف آن پرداخته ایم : ( توضیحات کوتاه با // )
کد فایل
PHP
|
< ?php
$q=$_GET["q"];
// این دستور مقدار پارامتر ارسالی از دستور ای جکس را دریافت می کند
$con = mysql_connect('localhost', 'Developer ' , 'abc123');
// ایج اد ارتباط با پایگاه داده مورد نظر
mysql_select_db("ajax_demo", $con); //
انتخاب جدول مورد نظر
$sql="SELECT * FROM user WHERE id = '".$q."'";
// q دریافت اطلاعات از جدول مورد نظر بر
مبنای پارامتر
$result = mysql_query($sql);
// result
ریختن نتیجه عملیات انتخاب اطلاعات از پایگاه داده در متغیر
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>";
while($row = mysql_fetch_array($result))
// ساخت جدول در خروجی با نتیجه دریافتی از پایگاه داده
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con); // قطع ارتباط
با پایگاه داده
?>
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان بگذارید :