ماهو الأجاكس ؟؟؟ وهل هو لغة برمجة أم تقنية بإستخدام اللغات الموجودة ؟؟؟
لماذا نستخدم هذه التقنية ؟؟؟ وما الهدف منها ؟
سوف نتعرف في هذا الدرس علي كل هذه الاسئله
- (Asynchronous Java Script &Xml)إختصار ل (AJAX)الأجاكس
-(Java Script) و(Xml) الأجاكس ليست لغة برمجة جديدة وأنما هي تقنية بإستخدام
أولا :-
وذلك عن طريق كتابة عنوان الموقع في المستعرض بالشكل التالي (Server) عندما نقوم بطلب موقع ويب من الخادم
www.adresswebsite.com
يقوم المستعرض بالإتصال بالخادم وذلك عن طريق إرسال طلب للخادم ومن ثم يقوم الخادم بالرد علي طلب العميل سواء كان موجود
الطلب أو لم يكن موجود
الطلب أو لم يكن موجود
لو كانت الصفحة موجودة علي هذا الخادم وعنوان الموقع صحيح سوف يقوم الخادم بتحميل الصفحة وإرسالها للعميل وإن لم تكن موجودة يقوم إيضا الخادم بالرد بأن هذه الصفحة ليست لديه كما يتضح من الصورة الاتية
وكما
نعلم ان شكل صفحة الموقع تكون عبارة عن جزء علوي ويسمي (header) وجزء سفلي ويسمي (footer)
وقائمة (menu) والمحتوي (content) ودائما لا يتغير الجزء
العلوي ولا الجزء السفلي ولا القائمة ولكن
الذي يتغير هو المحتوي عندما أنتقل بالقائمة من صفحة لصفحة من خلال الروابط وكمثال
توضيحي بسيط لشكل الموقع نعرض صورة بسيطة توضح ذلك :
وعند أختيار أي صفحة من خلال القائمة نقوم بطلب هذه الصفحة من الخادم وبالتالي يقوم الخادم بتحميل الصفحة مرة أخري بكل محتوياتها من (header, footer ,menu, content) ولكن الذي يهمنا ألا وهو المحتوي الجديد فقط ولكن يقوم الخادم بتحميل جميع اجزاء الصفحة والمحتوي الجديد مما يسبب زيادة تحميل علي الخادم وخاصة إذا كان الموقع يمتلك الكثير من الزوار مما يتسبب في حودث مشاكل بالخادم واستغراق وقت أطول في تحميل الصفحات ومن هنا جاءت تقنية الأجاكس لتقوم بحل هذه المشكلات مما يؤدي إلي تحسين أداء الخادم من خلال تقليل التحميل وسرعة التنقل بين الصفحات وأمكانيه إرسال أو استقبال بيانات بدون تحديث الصفحة.
ومن ثم نكون قد عرفنا فائدة أستخدام هذه التقنية وسوف نكمل الحديث عن هذه التقنية في الدرس القادم ان شاء الله وكيفية استخدامها والله الموفق .
نبدأ بأول جزء من الاجاكس
سوف نقوم بإنشاء صفحتين الأولي وليكن أسمها ajax.php وسوف نقوم بكتابة الكود الموضح بالصوره أسفل في هذه الصفحة
تحتوي علي هذا السطر فقط من الكود info.php وسوف نقوم بإنشاء صفحه ثانيه
وسوف نقوم بإيضاح كل جزء في الكود وشرحه بالتفصيل حتي يتسني للقاريء فهم الكود بسهولة
اولاً:
بإستخدام الزر الموجود أسفل الصفحة info.php وظيفتها جلب المعلومات من الصفحة الثانية وهي صفحة getinfo الدالة
XMLHttpRequest نقوم بإنشاء كائن
request وهو لضمان عمل الكود علي المتصفحات القديمة والحديثة وفي هذا الجزء نقوم بإنشاء الطلب
الدالة on ready state changeنستخدمها لإستقبال الرد من السيرفر (response)
الخاصية ready state
تعطي معلومات عن حالة السريفر وهي تاخد قيم من 0 إلي 4
0))لم
يتم الاتصال بالسريفر
(1)تم
الاتصال بالسريفر
(2)تم
استقبال الطلب في السيرفر
(3)
جار معالجة الطلب
(4)تم
الانتهاء من الطلب والرد جاهز
الدالة
open هي التي تستطيع بها فتح الطلب request وتحدد من خلالها معلومات
تخص هذا الطلب
أما
الدالة send وظيفتها القيام بإرسال الطلب
سوف
نتكلم بشيء من التفصيل عن المتغيرات الخاصة بدالة request
المتغير
الاول Get وممكن نضع Post ولكن Get أسهل
وأسرع ولكن نستخدم Post
في حالة تحديث بيانات في قاعدة البيانات الخاصة بالموقع أو في حالة إرسال بيانات بحجم كبير حيث لايوجد
حجم محدد لها من البيانات المرسلة او في حالة ارسال بيانات مستخدم حيث انها اكثرأمانا من Get
المتغير
الثاني اسم الصفحة التي سوف نقوم بإرسال الطلب إليها
المتغير الثالث True
ومعناها ان الكود غير متزامن بمعني أنه أثناء إرسال الطلب من الممكن ان أقوم ببعض
العمليات حتي يتم تنفيذ كود الجافا سكريبت
إلي اللقاء في الدرس القادم بإذن الله
أنتظر تعليقاتكم و أسئلتكم ......
بقلم م / نهله شحاته
