هذا الجزء الثالث من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، ذكرنا في الدرس الماضي بقية كتابة مكونات الأجاكس وباقي خصائص كائن XMLHttpRequest مع عرض المثال الإفتراضي في آخر الدرس.

في الجزء الثالث والأخير من الدرس سنعرض مثال عملي على ما تعلمناه سابقاً في كيفية الإتصال بشكل تفاعلي مع الخادم بواسطة الأجاكس، سيكون التطبيق عبارة عن عرض للأحداث بإختيار السنة التي تمت فيها الحدث، وسيتم إستدعاء البيانات مباشرةً دون تحديث الصفحة من ملف php سيتولى إستدعاء البيانات كاملة من قاعدة بيانات من نوع MySQL.

في البداية سنعرض شفرة XHTML العادية والتي ستكون منسقة بواسطة ملف CSS خارجي (ملف CSS ستجده في المرفقات، لن نحتاج إليه في هذا الدرس):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <link href="style.css" type="text/css" rel="stylesheet" />
 <title>حدث في مثل هذه السنة</title>
 <script type="text/javascript">
     // شفرة Javascript
     // التي سنكتب من خلالها مكونات الأجاكس
     ..
 </script>
</head>

<body>

<div id="wrap">
     <div id="form">
     <p>تطبيق بسيط يطرح حدث معين مرتبط بالسنة التي يضعها الزائر.</p>
         <form method="GET">
         <p>إختر السنة التي تم فيها الحدث
             <select name="year">
                 <option selected="selected">إختر السنة</option>
                 <option>...</option>
                 <option>...</option>
             </select>
         </p>
         </form>
     </div>

<!-- ظهور محتوى المستدعى بواسطة الأجاكس -->
<!-- بواسطة عنصر content -->
     <div id="content">
         ..
     </div>
</div>

</body>
</html>

إلى الآن لم نبدأ بكتابة شفرة Javascript ولا شفرة PHP والمكان الذي سنضع فيه محتويات المستدعاه سيكون ضمن الصنف content وسيتم عرض السنوات ضمن العنصر select (ستعرض على شكل إختيارات في قائمة واحدة) كما هو موضح في الشفرة في الأعلى، هذه صورة توضيحية بعد لصفحة التطبيق:

بالنسبة لإستخدام لغة PHP وقاعدة بيانات من نوع MySQL، سنبدأ بعرض مكونات حقول الجدول التي سندخل قيم الأحداث فيها، مثل هذا الجدول:

events-application_database

لا ننسى بالطبع شفرة الإتصال بقاعدة بيانات في ملف PHP مع تعديل بسيط على البيانات:

<?php
$connect = mysql_connect('localhost', 'root', 'password');
$db_connect = mysql_select_db('test', $connect);
if (!$connect) { die('لم يتم الإتصال: ' . mysql_error()); }
mysql_query("set charset UTF8");
?>

لعرض السنوات التي سيختارها مستخدم التطبيق ضمن عنصر Select:

<p>إختر السنة التي تم فيها الحدث
     <select name="year" class="year">
         <option selected="selected">إختر السنة</option>
         <?php
         $result = mysql_query("SELECT * FROM events WHERE event_cloned = 'N' ORDER BY event_year DESC");
         while($row = mysql_fetch_array($result)) {
         echo '<option value="'.$row['event_year'].'">'.$row['event_year'].'</option>';
         }
         ?>
     </select>
</p>

جميع ما ذكرته في الأعلى سيكون في ملف واحد (فلنسميه index.php مثلاً)، يمكننا تضمين باقي شفرات PHP الأخرى في ملف واحد والتي لها علاقة بإستدعاء البيانات مباشرةً بالأجاكس ، ولكن فضلنا وضعها مستقلة وإسمها هنا query.php، وهذه محتويات الملف (الوصف عن طريق التعليقات داخل الشفرة):

<?php
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db($table, $connect);
if (!$connect) { die('Could not connect: ' . mysql_error()); }
mysql_query("set charset UTF8");
?>

// تعريف المتغير event_year
// ولإستقبال هذا المتغير في إكمال الإتصال بالأجاكس
if($_GET['year']) {
     $event_year = $_GET['year'];
     $result = mysql_query("SELECT * FROM events WHERE event_year = '$event_year'");

     // عرض المعلومات من قاعدة بيانات بإستخدام التكرار
     // وبواسطة الدالة while
     while($row=mysql_fetch_array($result)) {
         echo '<div><h2>'.$row['event_name'].'</h2>';
         echo '<p>'.$row['event_description'].' <span>(تاريخ '.$row['event_date'].')</span></p>';
         echo '</div>';
     }
}

هكذا سيتبقى لنا شفرة Javascript وإستخدام الأجاكس في إستدعاء أحداث السنة مباشرةً دون اللجوء إلى تحديث الصفحة مرة أخرى، هذه هي شفرة Javascript المتبقية:

function ajaxRequest(textValue) {
     var requester = false;

     if(window.XMLHttpRequest) {
         requester = new XMLHttpRequest;
     } else if (window.ActiveXObject) {
         requester = new ActiveXObject("Microsoft.XMLHTTP");
     }

     if(requester) {
     requester.onreadystatechange = function() {
         if(requester.readyState == 0 || requester.readyState == 1) {
             document.getElementById('content').innerHTML = '<img src="loading.gif" alt="Loading" />';
         }
         if(requester.readyState == 4 || requester.readyState == "complete") {
         if(requester.status == 200 || requester.status == 304) {
             document.getElementById('content').innerHTML = requester.responseText;
         } else {
             document.getElementById('content').innerHTML = 'هناك خطأ في طلب إستدعاء البيانات';
         }
     }
     }
     requester.open("GET", "query.php?year=" + textValue, true);
     requester.send(null);

     }
}

إستخدمنا متغير بإسم textValue في دالة ajaxRequest (جميع مكونات الأجاكس داخل هذه الدالة) لإستخدامه لاحقاً في عنصر Select لتضمين السنة (مكونة من 4 أرقام مثل 2009) في خاصية open ويكتمل الرابط الذي نريد إستدعائه، بقية الشفرة شرحتها في الدروس السابقة من هذه السلسلة ويمكنك الرجوع إليها عبر هذه الروابط:

وفي نفس الشفرة السابقة إستخدمنا طريقة GET في الإتصال بالخادم وتضمين متغير year وقيمته التابعة لملف query.php في الخاصية open.

وأخيراً تبقى تعديل أخير وهو على عنصر select الذي يحتوي على السنوات المسجلة في قاعدة البيانات، ونستخدم هنا خاصية onchange (تعني في حال تغيير الإختيار) ونضمن فيها الدالة ajaxRequest ونشير إلى متغير textValue بقيمة الإختيار الذي يؤشر عليه المستخدم (ليكتمل الإتصال كامل):

<select name="year" onchange="ajaxRequest(this.value)">
     <option selected="selected">إختر السنة</option>
     <?php
     $result = mysql_query("SELECT * FROM events WHERE event_cloned = 'N' ORDER BY event_year DESC");
     while($row = mysql_fetch_array($result)) {
     echo '<option value="'.$row['event_year'].'">'.$row['event_year'].'</option>';
     }
     ?>
 </select>

الشفرة كاملة

أضع الشفرة كاملة هنا لرؤية المثال كامل من مكان واحد وستجد في الملف المرفق نفس المكتوب هنا، إلا أن المحتويات الموجودة في الملف المرفق تحتوي على شفرة لإضافة الأحداث إلى قاعدة البيانات لم أضعها هنا، فقط إكتفيت في إستدعاء الأحداث من القاعدة وإستخدام الأجاكس في إستدعاء الحدث بدون تحديث الصفحة:

<?php
$table = 'test';
$info = 0;

$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db($table, $connect);
if (!$connect) { die('Could not connect: ' . mysql_error()); }
mysql_query("set charset UTF8");

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <link href="style.css" type="text/css" rel="stylesheet" />
 <title>حدث في مثل هذه السنة</title>
 <script type="text/javascript">
 //<![CDATA[
 function ajaxRequest(textValue) {
 var requester = false;

 if(window.XMLHttpRequest) {
     requester = new XMLHttpRequest;
 } else if (window.ActiveXObject) {
     requester = new ActiveXObject("Microsoft.XMLHTTP");
 }

 if(requester) {
     requester.onreadystatechange = function() {
     if(requester.readyState == 0 || requester.readyState == 1) {
         document.getElementById('content').innerHTML = '<span>Loading</span>';
     }
     if(requester.readyState == 4 || requester.readyState == "complete") {
         if(requester.status == 200 || requester.status == 304) {
             document.getElementById('content').innerHTML = requester.responseText;
         } else {
             document.getElementById('content').innerHTML = '<p>هناك خطأ في طلب إستدعاء البيانات</p>';
         }
    }
 }
 requester.open("GET", "query.php?year=" + textValue, true);
 requester.send(null);

 }
 }
 //]]>
 </script>
</head>

<body>

<div id="wrap">
 <?php
 if ($info == 1) {
     echo '<div id="info">';
     echo $info_msg;
     echo '</div>';
 }
 ?>
 <div id="form">
 <p>تطبيق بسيط يطرح حدث معين مرتبط بالسنة التي يختارها الزائر.</p>
     <form method="GET">
         <p>إختر السنة التي تم فيها الحدث
         <select name="year" onchange="ajaxRequest(this.value)">
             <option selected="selected">إختر السنة</option>
             <?php
             $result = mysql_query("SELECT * FROM events WHERE event_cloned = 'N' ORDER BY event_year DESC");
             while($row = mysql_fetch_array($result)) {
             echo '<option value="'.$row['event_year'].'">'.$row['event_year'].'</option>';
             }
             ?>
         </select>

         <span> (مثال: 2009)</span> , <small><a href="events.php?action=add">إضافة حدث</a></small>
         </p>
     </form>
 </div>

 <div id="content"></div>

</div>

</body>
</html>

أنصحك بمشاهدة المثال ورؤية الملفات المرفقة لفهم الدرس بشكل صحيح، وتطبيق مثال آخر خاص بك.

أجزاء أخرى لدرس كتابة الأجاكس في Javascript: