درس: استخدام الAJAX مع الPHP (بطلب Pal-Heart)
السلام عليكم ورحمة الله وبركاته .. كنا انا و الاخ Pal-Heart نتكلم في موضوع الAJAX .. وقال لي لماذا لا تعمل درس .. وقلت له فكرة جيدة .. "ستكون هذه اول محاولة لي في عمل درس وانشاء الله تعجبكم"
المقدمة:
ماهي الAJAX، اولا هي تنطق مثل ما تنطق الفريف اللذي يلعب في الدوري الهولندي "أياكس"، طبعاً كل واحد له نطّقة الخاص ولكن هي ليست المشكلة، المشكلة هي ماهو ذالك الشيء الذي يسمى AJAX
AJAX: هي عبارة عن مجموعة من التقنيات تتعامل مع بعضها البعض، مثل الHTML و الCSS و الXML و الAjavaScript من ناحية العميل Client "اي الكمبيوتر اللذي يتصفح الانترنت" و أي تقنية في عملية برمجة الخوادم Servers "اي الكمبيوترات التي تكون فيها لغة برمجة كالPHP او الASP مثلاً و فيها قاعدة بيانات"
الAJAX هي اختصار للجملة Asynchronous JavaScript And XML "الإتصال العشوائية بين جافا سكربت و XML" يعني شيء معقد صح ؟ لا .. وبالخط العريض لا .. هذة الجملة طلعت بعد ما استعملتها الشركات الكبرى لاول مرة، لانها كانت متصلة جداً بالXML والان المبرمجين صاروا يشكون منها، فبدء البعض بعدم استعمال الXML للتعقيد الذي يرونة من استخدامة بعض الشيء " ولكن في درس اخر سؤوضح مزايا الXML في الAJAX" .... فصاروا يستخدمون شيء اسمة الAHAH وهي اختصار لكلمة Asynchronous HTTP And HTML اي "الإتصال العشوائي بين الHTTP و الHTML" .. الحين الجملة صارت اسهل للبلع ..صح؟ لانها صارت تستخدم اشياء و تعاريف تفهمونها .. بالرغم من انه مازال يستخدم الJavaScript في تعاملاتة .... ولكن ليس بالتعقيد اللذي هو علية سابفا
انا اعلم ان اكثر الناس يستخدمون الAJAX كمصطلح بدلاً من الAHAH ولكن لكثرة انتشار تلك الكلمة، ابقوة بنفس الاسم ولكن الفكرة مختلف فليلاً ولكن اسهل بكثير في البرمجة
لماذا AJAX؟ وما الفائدة منة؟
طيب سؤال جميل، صح؟ خليني اشرح ليش بدئت اصلاً هذة التقنية.
تخيل انت تستخدم استضافة غالية الثمن .. و انت لديك الملايين من الزوار "كم اتمنى ذالك في موقعي" و انت تدفع للمستضيف على اساس استخدامك للBandwidth اي لكمية البيانات الخارجة من السرفر الى جمهورك ؟؟
وايضاً تخيل ان لديك خدمة مجانية للاستعلام، ما اذا كان نطاق "Domain" قابل للحجز ام لا؟
وانت استخدمت تصميم تقليدي للموقع (اي بدون اجاكس) .. اي ان الزائر ينقر على الزر "ابحث" بعد تعبئة البيانات الازمة .. مع ان الرد سيكوف فقط ب"نعم قابل للحجز" او "لا، الموقع محجوز من قبل شخص اَخر" ولكن في الطريقة التقليدية انت ستضطر لارسال الصفحة من جديد بصورها و جداولها و الوانها و كل هذا فقط لاضافة سطر واحد ؟؟؟؟ لماذا كل هذا التبذير ؟ صح ؟ اذا كان موقعك مثل موقعي .. "ما احد يعدّي علية" لن يكون لديك اي اهمية ولكن المواقع الكبيرة تهتم به لانها على الاقل ستقلل من المصارف بقدر %60 الى %90 بالمائة !!!
ها؟ الان عرفتوا ان فكرة الاجاكس ليس اكثر من مجرد حضرمي يريد ان يقتصد؟ "مع العلم انا اصلي حضرمي" المهم .. ممكن تقول في نفسك ليش اتعلم الاجاكس دة ؟ مالة داعي اضيع وقتي ؟؟ لا لا .. الاجاكس تطور بكثير .. الان بامكانك ان تبرمج مواقع تتعامل معة كما تتعامل مع برنامج الدريم ويفر او الاوفيس .. او الاوتلوك ؟ .. ربما بعض مواقع الاجاكس تظنها مواقع فلاش ولكن كلها اجاكس؟؟ فليش ما تخلي موقعك "كووووووووووول"؟
============
متطلبات الدرس:
في درسنا هذا يجب ان يكون لديك:
1- سرفر .. Apache او ISS او اي خادم تود استخدامة
2- PHP لان الدرس سيستخدم الPHP كلغة اساسية في برمجة الخادم
*- تعلم كيف تركبها (السرفر و الPHP) من اي درس يمكن ان تبحث عنة في سوالف او في اي موقع اخر
*- معرفة القليل من الPHP و تكون لديك بعض الخلفية عن الJavaScript
*-ركبّ MySQL لكن ليس الان .. فقط ضعة في البال لان في الجزء الثاني من الدرس ساحاول ان استخدام قاعدة
للبيانات لكي يكون الدرس شامل وقابل للتطبيق في برامجكم المستقبلية ...
الدرس: (المستوى مبتدء الى متوسط)
في هذا الدرس سوف نتعلم كيفية عمل استدعاء جزئية معينة من ملف في الخادم "السرفر" ووضعة الناتج من تلك
الاستدعاء في صفحة محمولة مسبقاً .. اي سنغير بعض محتوى الموقع من دون عملية تحديث للصفحة نفسها ..
بالعربي سنتعلم كيف نسوي سحر في الHTML
==================
حمل المرفقات الموجودة مع هذا الدرس
==================
لنبدء
اولا لنعمل ملف HTML اللذي سيحتوي على زر و مكان للتحديث و JavaScript صغير مبرمج لكي ستدعي المعطيات من الموقع ...
كود HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ar" lang="ar"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript" src="javaScript.js"></script> <style type="text/css"> td{ font-size:36px } </style> <title>الاجاكس</title> </head> <body> <table width="200" border="1"> <tr> <td id="ChangeHere">يرقة</td> </tr> <tr> <td> <input type="submit" name="Submit" value="حول" onclick="get_From_Server();" /> </td> </tr> </table> </body> </html>
شرح الكود:
1- index.html <بالمناسبة معنى كلمة ChangeHere هي (غيّر هنا)!">
ملف الHTML مافية اي تعقيد ابداً ... بس لاحض شيء عجيب ... وهو <td/>يرقة<"td id="ChangeHere> .. "لماذا هذة الزيادة .. بعضكم ممكن يقول "ما كانت الID نستخدمها فقط في قواعد البيانات للتميز من سجل واخر؟" نعم يستخدم في التميز من سجل لاخر ولكن الJavaScript ايضاً يريد ان يميز من شيئ لاخر .. وذالك باعطاء الاماكن بتعاريف مثل الID "لا تخف سيتوضح الامر عندما نشرح اوامر الJavaScript"
2- javaScript.js "الملف الذي يحوي اوامر الJavaScript"
قبل ما تقرء السطر التالي ... شمرّ الثوب و ارفع الاكمام ... لان هنا يبدء الشغل المتعب
لنشرح سطر بسطر
}()function get_From_Server
هذا مجرد تعريف للدالة .. ومعناها بالعربي "خذ من السرفر"
Answer هي المتغير الذي سيحوي المعلوما الاتية من السرفر .. معليش ساستعمل قليل من البرمجة الكائنية Object Orented لانة لا يوجد طريقة ثانيةكود HTML:try{ Answer = new XMLHttpRequest(); }catch(error){ try{ Answer = new ActiveXObject("Microsoft.XMLHTTP"); }catch(error){ Answer = null; return false; }
try اي جرّب تستخدم الامر Answer = new XMLHttpRequest و اذا ما نفع استخدم الامر
ولماذا التجارب ؟ لان التعامل ما المتصفح انترنت اكبلورار مختلف من التعامل مع المتصفحات الاخرى .. يعني اذا ما نفع الطريقة الاولى (خاصة بجميع المتصفحات) جرب الثانية (والطريقة الثانية خاصة بالمتصفح انترنت اكبلورار)كود HTML:Answer = new ActiveXObject("Microsoft.XMLHTTP");
معليك من التجارب .. لان الJavaScript سيجرب ولكن النتيجة نفسها
السطر ;Answer.onreadystatechange = change_when_have_info
مجرد تعريف للحاوي Answer، لكي يعرف ماهي الدالة الذي يستخدمة اذا وصل المعلومات !!
("Answer.open("POST", "ajax.php
تقول للحاوي اين يجد النتيجة ... وهي مثل ما ترون ان النتيجة موجودة في الملف ajax.php
;(Answer.send(null
تقول للحاوي Answer ان يرسل البيانات الان ... لا تقلق من شئن الnull الان ... هذا في الجزء الثاني من الدرس
()function change_when_have_info
نعرف الدالة الذي سيستخدمها الحاوي Answer بعدما تلقى نتيجة من ملف الPHP
معليك من الباقي المهم اعلم ان الرقم 200 تعني العملية تمت بنجاح
... الان ممكن اشرح ليش وضعت الID في ملف الHTML
السطر document.getElementById('ChangeHere').innerHTML = Answer.responseText
يفوم بالتالي .. الذهاب الى المستند document و البحث فية بالامر getElementById و تحديد مكان الID الموجود بالمستند واسمة 'ChangeHere' و لكي يستبدل الناتج من Answer.responseText بالامر innerHTML
3- الملف ajax.php (الملف الذي يحوي النتيجة)
ملف الPHP ماهو بذالك التعقيد .. لانة فقط يطبع الكلمة "فراشة"
==============
معليش عقدتكم شوي .. بس جرّب وترى انها سهلة جداً
ملاحظة:
انا أفضّل النقد و الاضاقات اكثر من الشكر والمدح
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة hilaby
مشكور اخوي والله ما قصرت اشتغل تمام التمام 