السلام عليكم ...
التعامل بين الـ PHP و AJAX و قاعدة البيانات
يمكن لنا إستخدام الـ AJAX لغرض الاتصال التفاعلي مع قاعدة البيانات ، دون الحاجة لإعادة فتح الصفحة ...
نحتاج في درسنا هذا إلى أربعة أشياء :
- قاعدة بيانات
- صفحة HTML
- ملف جافا سكريبت
- صفحة PHP
أولا: قاعدة البيانات ...
ننشأ قاعدة بيانات باسم " ajax " ، يمكننا إستخدام كمثال هذا الجدول باسم " users " ... على الترتيب
id = 1 . 2 . 3 . 4
name = ali . ahmed . amine . mahmoud
age = 40 . 24 . 33 . 28
learn = sql . asp . ajax . php
تحميل ملف الـ sql لوحده ...
ثانيا: صفحة الـ HTML ...
سوف نعتمد على هذه الصفحة في مثالنا فهي تفي بالغرض
كود بلغة HTML:
<html dir=rtl> <head> <script src="selectuser.js"></script> </head> <body> <div align=center> <form>
إختر المستخدم
<select name="users" onchange="showUser(this.value)"> <option value="1">ali</option> <option value="2">ahmed</option> <option value="3">amine</option> <option value="4">mahmoud</option> </select> </form><div> <p> <div id="txtHint" align=center><b>معلومات المستخدم سوف تظهر هنا</b></div> </p> </body> </html>
شرح الصفحة:
كما ترون فهي صفحة HTML بسيطة مع صندوق إختيارات ( DropDownBox ) يسمى " users " و مع كل اسم مستخدم ، قيمة الـ id المصاحب له في قاعدة البيانات ...
أما الفقرة في الأسفل المحصورة بـالوسم <div> المسمى " txtHint " ، تعمل على إستقبال المعلومات المرسلة من الخادم ...
و عند الإختيار ، تنفذ العملية " showUser() " ... هذه العملية مرتبطة بوقوع الحدث " onchange " ...
ثالثا: ملف الجافا سكريبت ...
نحفظ ملف الجافا سكريبت باسم " selectuser.js " و هو نفس الاسم الذي استدعيناه في صفحة الـ HTML ، و هذا ما يحتويه ...
كود:
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
} شرح الملف:
في عملية showUser()
إذا تم الإختيار تقوم العملية بفعل التالي ...
- الطلب من عملية GetXmlHttpObject إنشاء الكائن XMLHTTP
- نحدد رابط ( اسم الملف ) للإرسال للخادم
- نضيف البارامتر " q " للرابط مع محتوى صندوق الإختيارات ( DropDownBox )
- نضيف عدد عشوائي لمنع استخدام خدمة الملف المخبأ ( cached file )
- طلب stateChanged عند حدوث التغيير
- فتح كائن XMLHTTP مع الرابط المعطى
- إرسال طلب HTTP إلى الخادم
رابعا: صفحة الـ PHP ...
نسمي هذه الصفحة " getuser.php " ...
في هذه الصفحة نستخدم الـ PHP إضافة إلى قاعدة البيانات ...
الكود يطلب قاعدة البيانات و يعيد النتيجة لجدول HTML
كود PHP:
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
// قاعدة البيانات
mysql_select_db("ajax", $con);
// اختيار الجدول
$sql="SELECT * FROM users WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>يدرس حاليا</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['age'] . "</td>";
echo "<td>" . $row['learn'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
توضيح الملف:
- نتصل بقاعدة البيانات
- إستخراج البيانات من الجدول المحدد بحيث المتغير q هو شرط الإستخراج ( و q هو المرسل من طرف ملف الجافا سكريبت و يحمل id الإختيار )
- و يرسل جدول الـ HTML مكان الـ div ذو الاسم " txtHint "
يمكنك تحميل ملفات الدرس من المرفقات مع ملف SQL لقاعدة البيانات ( إذا حملت ملفات الدرس ، لن تحتاج لتحميل الملف sql ، فستجده معه ) ، و تشغيل ملف " db.html " على الخادم ...
ملاحظة هامة : يسمح نقل الدرس و لكن بشرط كتابة التالي في النهاية و بخط واضح
" المصدر : منتدى بي اتش بي ... montadaphp.net "
تحياتي ...