أنت في : الرئيسية :: جافا سكريبت :: موضوع: أساسيات AJAX - الجزء الأول

الدكتور نت

السلام عليكم

منذ العام 1999م و نحن نحاول الارتقاء بالمصمم و المطور العربي عبر إضافة دروس و مقالات و دروات لتساعده على إنشاء و تطوير موقعه . لو كنت أحد هؤلاء و أحببت مساعدتنايمكننا أن ندلك على عدد من الأمور التي يمكنك القيام بها لمساعدتنا اضغط هنا و أقرأ أكثر عن الموضوع ..

أساسيات AJAX - الجزء الأول

بقلم: الدكتور نت مواضيع أخرى لنفس المحرر الدكتور نت

◄ حول الموضوع

فهرس الموضوع

وصف الموضوع

ما هي الأجاكس و كيف تستطيع الاستفادة منها .. بالإضافة لشرح مفصل لمثال بسيط ..

أرسل لصديق طباعة أضف للمفضلة صل للموضوع تعقيب

◄الفكرة النظرية

ما هي أجاكس Ajax ؟

هي اختصار لـ Asynchronous JavaScript And XML و هي تقنية من تقنيات التصميم على الويب تسمح بتطوير تطبيقات تفاعلية .لنبسط المسألة لو مثلا عند زيارة أي صفحة على الانترنت هناك محتوى و روابط لو ضغطت على رابط من الروابط سينقلك المتصفحة إلى الصفحة التي ضغط على رابطها … هذا في الأحوال العادية أما عند استخدام تقنية اجاكس فلن يتم إظهار النتائج في نفس الصفحة تلقائيا بدون الانتقال ( ستتم عملية تحميل المحتوى الجديد خلف الكواليس )

لتقريب الفكرة أكثر جرب خدمة Google suggest و التي بطباعة أي حرف في حقل البحث سيقترح عليك جوجل مجموعة من الكلمات التي تبدأ بالحرف .. كيف تم تحميل القائمة بمجرد طباعة الحرف بدون نقلك بالمتصفح .. الكلمة السحرية .. AJAX; كما يمكنك زيارة هذه المواقع للتعرف أكثر على استخداماتها :

Google Maps : يمكنك التقريب و الابتعاد و تحريك الخريطة بطريقة سلسلة و تفاعلية بدون نقل المتصفح ( بدون استخدام تقنية أخرى تفاعلية مثل الفلاش)
Bliki list : لتجميع و تصنيف مواقعك
Flicker : أشهر مجتمع على الانترنت لعرض وتبادل الصور ..لو جرب إنشاء ألبوم لك على فلكر ستجد الكثير من استخدام الاجاكس
Gmail: نظام البريد الالكتروني من جوجل .. كل شي يتم بسهولة و سرعة
writley : معالج نصوص على الخط

مما يتكون ؟

في الحقيقة هي ليست تقنية هي مجموعة من التقنيات :س

(x)html و css : لعرض و تنسيق المعلومات
Document Object Model (DOM)يتم الدخول إلى عن طريق client-side scripting language لغة برمجة من جهة العميل مثل الجافا سكريبت أوJscript للتفاعل ديناميكيا و عرض البيانات
XML لنقل و تبادل البيانات بالرغم أنه يمكنك استخدام أي صيغة حتى html
ناقل للبيانات باستخدام XMLHttpRequest و الذي سنتحدث لاحقا عنه

و بعد قراءتك للسابق قد تفكر ما الجديد أي من التقنيات السابقة معروفة و متداولة .. في الحقيقة AJAX موجودة منذ فترة طويلة على شبكة الانترنت و لكنها سميت أخيرا بهذا الاسم و تم الاخذ بها جديا .

أريد أن استخدم أجاكس اليوم ما الذي علي تعلمه؟

في الحقيقة ليس عليك تعلم شئ جديد لكن عليك تعلم كيفية جمع و توظيف جميع العناصر السابق لتكوين تطبيق تفاعلي.. و إذا لم تستخدمها لا تعتبر نفسك من العصر الجليدي للانترنت في الحقيقة استخدمها عند حاجتك لها فقط ..

الفكرة

لدينا صفحة html عادية مثلا تحتوى على استمارة من حقل واحد لإدخال كلمة اسم المستخدم .. في الأحوال العادية سنهتم بإعطاء الحقل اسم في خاصية الاسم name لكن في الحقيقة هنا نريد إضافة خاصية جديدة للحقل و هي خاصية ID و هي الأهم للوصول لمحتويات الحقل .في حالتنا سنسمي الحقل username و عند الضغط على الزر لن نقوم بوضع اسم الملف الذي سينتقل إلى محتوى الاستمارة لمعالجتها و لكن عند الضغط على الزر سنستدعي دالة من دوال الجافا سكريبت .

ثم هناك ملف الجافا سكريبت ( يمكنك تضمين الجافا سكريبت في نفس الصفحة لكن لترتيب العملية سنضع الجافا سكريبت في ملف منفصل و نستدعيه . ستحتوي على دالة استدعاء كائن XMLHttpRequest و دالة لأخذ قيمة الحقل query و أرسالة لملف المعالجة ( الذي سنذكره في النقطة التالية )و تلقي النتائج و عرضها في الصفحة تلقائيا .

سكريبت الphp ( يمكن أن يكون أي لغة برمجة أخرى لكن في مثالنا بي اتش بي) لمعالجة نتائج الاستمارة و إرسالها مرة أخرى للجافا سكريبت لعرضها .. سكريبت الphp لا يحتوي على الكثير من التغير سوى أن القيم يتم استقبالها بــ $_REQUEST و إرسال النتائج عن طريق طباعتها باستخدام Echo

لتحميل ملف المثال اضغط هنا

التنفيذ

XHTML


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="ar" lang="ar"&gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /&gt;

&lt;script language="javascript" type="text/javascript" src="javaScript.js"&gt;&lt;/script&gt;

&lt;title&gt;مثال من شبكة الدكتور نت - استخدام AJAX&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;fieldset style="padding: 2"&gt;

&lt;legend&gt;فضلا ادخل أسم المستخدم ...&lt;/legend&gt;

&lt;input type="text" name="T1" size="59" id="username" /&gt;&lt;input type="submit" name="Submit" value="عرض" onclick="makeRequest();" /&gt;

&lt;div id="showithere"&gt;

&lt;/div&gt;

&lt;/fieldset&gt;

&lt;/body&gt;

&lt;/html&gt;

أولا في رأس المستند استدعينا ملف الجافا سكريبت javascript.php


&lt;script language="javascript" type="text/javascript" src="javaScript.js"&gt;&lt;/script&gt;

ثم أنشأنا حقل من نوع input و أعطيناه id=username


&lt;input type="text" name="T1" size="59" id="username" /&gt;

ثم أضفنا زر لاستدعاء دالة الJavaScript و التي اسمها makeRequest


&lt;input type="submit" name="Submit" value="عرض" onclick="makeRequest();" /&gt;

ثم أضفنا منطقة خالية لإظهار النتائج فيها تاليا و أعطيناها id=showithere


&lt;div id="showithere"&gt;

&lt;/div&gt;

مع مراعاة انه في حالة استخدام الوسم div تأكد من ترك فراغ بواسطة nbsp; لتجنب عدم ظهور النتائج لاحقا

الجزء التالي :الطريقة العملية »
أقسام الموضوع: 1 2

تقييم الموضوع :

(8 صوت)

Loading ...

اضيف في 22 فبراير 2006
الزوار : [ 7,009 قارئ ]
هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]

أعجبك الموضوع .. أضفه في