يمكن استخدام AJAX للتواصل بشكل تفاعلي مع قاعدة البيانات.
مثيل قاعدة بيانات AJAX
سيوضح المثال التالي كيفية قراءة صفحة الويب للمعلومات من قاعدة البيانات من خلال AJAX:
ملف SQL لجدول مواقع الويب المستخدم في هذا البرنامج التعليمي: sites.sql.
شرح المثال - قاعدة بيانات MySQL
في المثال أعلاه، يبدو جدول قاعدة البيانات الذي استخدمناه كما يلي:
Mysql> حدد * من مواقع الويب؛+----+----------+------------------------------------- -----+-------+--------+| الاسم |. عنوان اليكسا |+----+---------. -----+---------------------------+-------+-------- -+|.جوجل |.https://www.google.cm/ 1|الولايات المتحدة الأمريكية| http://www.codercto.com/ |. 4689 |.ويبو | |. الولايات المتحدة الأمريكية |+----+--------------------------------- -+-------+---------+5 صفوف في المجموعة (0.01 ثانية)
شرح المثال - صفحة HTML
عندما يقوم المستخدم بتحديد مستخدم في القائمة المنسدلة أعلاه، يتم تنفيذ وظيفة تسمى "showSite()". يتم تشغيل هذه الوظيفة بواسطة حدث "onchange":
كود ملف test.html:
< ! أتش تي أم أل > <أتش تي أم أل> <الرأس> < ميتا مجموعة الأحرف = " utf-8 " > <title> البرنامج التعليمي للمبرمج ( codercto.com ) </title> وظيفة <النص البرمجي> موقع العرض ( شارع ) { لو ( شارع == " " ) { مستند getElementById ( " txtHint " ) ; لو ( نافذة .XMLHttpRequest ) { // رمز تنفيذ متصفح IE7+ وFirefox وChrome وOpera وSafari xmlhttp = جديد XMLHttpRequest ( ) ; آخر { // رمز تنفيذ متصفح IE6 وIE5 xmlhttp = جديد ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = الدالة ( ) { لو ( xmlhttp . ReadyState == 4 && xmlhttp . الحالة == 200 ) { مستند getElementById ( " txtHint " ) . innerHTML = xmlhttp ; } xmlhttp</ الرأس > <الجسم> <النموذج> < حدد الاسم = " المستخدمين " onchange = " showSite(this.value) " > < خيار value = " " > حدد موقع ويب: </ option > < خيار القيمة = " 1 " > جوجل </ option > < خيار القيمة = " 2 " > تاوباو </ الخيار > < خيار value = " 3 " > البرنامج التعليمي للمبرمج </ option > < خيار value = " 4 " > ويبو </ option > < خيار القيمة = " 5 " > فيسبوك </ option > </اختر> </النموذج> < ر > < شعبة id = " txtHint " > < b > يتم عرض معلومات موقع الويب هنا... </ b > </ div > </الجسم> </html> تقوم الدالة showSite() بالخطوات التالية:
تحقق مما إذا تم تحديد موقع ويب
إنشاء كائن XMLHttpRequest
قم بإنشاء وظيفة يتم تنفيذها عندما تكون استجابة الخادم جاهزة
إرسال طلب إلى ملف على الخادم
يرجى ملاحظة أن المعلمة (q) تمت إضافتها إلى نهاية عنوان URL (التي تحتوي على محتويات القائمة المنسدلة)
ملفات PHP
صفحة الخادم التي تم استدعاؤها أعلاه من خلال JavaScript هي ملف PHP يسمى "getsite_mysql.php".
يقوم الكود المصدري في "getsite_mysql.php" بتشغيل استعلام على قاعدة بيانات MySQL ويعيد النتائج في جدول HTML:
رمز الملف getsite_mysql.php:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $ _GET [ " q " ] ) : ' ' if ( فارغ ( $q ) ) { صدى ' يرجى اختيار موقع ويب ' ; $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; ( ! $ يخدع ) { يموت ( ' تعذر الاتصال: ' . mysqli_error ( $ con ) ) } // حدد قاعدة البيانات mysqli_select_db ( $con , " test " ) ; // ضبط التشفير لمنع الأحرف الصينية المشوهة mysqli_set_charset ( $con , " utf8 " ) ; $ sql = " SELECT * FROM
Websites WHERE = ' " ; $ result = mysqli_query ( $ con , $ sql ) " <table border='1'><tr><th>المعرف</th><th>اسم موقع الويب</th><th>عنوان URL لموقع الويب</th><th>تصنيف Alexa</th><th> البلد</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { صدى " <tr> " ; " <td> " . $ row [ ' id ' ]" <td> " . $ row [ ' name ' ]" <td> " . $ row [ ' url ' ]" <td> " . $ row [ ' alexa ' ]" <td> " . $ row [ ' country ' ]" </tr> " } صدى " </table> " ; شرح: عندما يتم إرسال استعلام من JavaScript إلى ملف PHP، ماذا يحدث:
يفتح PHP اتصالاً بقاعدة بيانات MySQL
ابحث عن المستخدم المحدد
أنشئ جدول HTML واملأه بالبيانات وأرسل العنصر النائب "txtHint".
