استخدام AJAX مع MySQL

تستخدم AJAX مع تبادل البيانات من خلال قواعد البيانات .


أمثلة مع قواعد البيانات  Database

في المثال التالي يشرح كيف يمكن لصفحة الويب إظهار البيانات من خلال قواعد البيانات باستخدام AJAX :

مثال مباشر حول استخدام AJAX مع MySQL

شرح المثال – صفحة HTML

عندما يختار المستخدم دولة من خلال القائمة المنسدلة سيتم استدعاء الدالّة showUser() من خلال الحدث onchange :

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str==”")
{
document.getElementById(“txtHint”).innerHTML=”";
return;
}
if (window.XMLHttpRequest)
{
/*
يعمل على IE7+, Firefox, Chrome, Opera, Safari
*/
xmlhttp=new XMLHttpRequest();
} else {
/*
يعمل على IE5 و IE6
*/
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”getcustomer.asp?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<select name="users" onchange="showUser(this.value)">
<option value="">اختر بلد الزبون :</option>
<option value="1">سوريا</option>
<option value="2">تركيا</option>
<option value="3">أمريكا</option>
<option value="4">أوروبا</option>
</select>
</form>
<br />
<div id="txtHint"><b> 
هذا الزبون من أشهر الزبائن لدينا
</b></div></body>
</html>

تعمل الوظيفةshowCustomer()  كالتالي

  • يفحص اذا تم اختيار الزبون من القائمة .
  • إنشاء كائن XMLHttpRequest .
  • إنشاء function واستدعائه عندما تكون استجابة السيرفر جاهزة .
  • ارسال الطلب الى ملف على السيرفر .
  • لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى القائمة المنسدلة .

ملف PHP

تم استدعاء الصفحة على السيرفر من خلال الجافاسكربت لملف PHP يسمى getuser.php .
يقوم الكود في getuser.php بتفعيل أوامر من قاعدة البيانات MySQL و إعادة النتيجة في جدول HTML .

<?php
$q=$_GET["q"];$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user 
WHERE id = '".$q."'";
$result = mysql_query($sql);

echo "<table border='1'>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</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 "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>

شرح الكود

عند ارسال الأمر في ملف PHP مستخدمين الجافاسكربت سيحدث التالي:

  1. يفتح PHP اتصال مع سيرفر قاعدة البيانات MySQL .
  2. سيتم إيجاد اسم الدولة المطلوب .
  3. سيتم إنشاء جدول و يملىء بالبيانات و سيتم ارساله مجدداً الى مؤشر  txtHint.