شـــرح لتقنيــة أجاكــس Ajax

[هنادي]

ما هي أجاكس Ajax ؟

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


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

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


مما يتكون ؟

• XHTML or HTML

• JavaScript

• CSS

• XML

كيف تعمل ؟

الأجاكس كانت موجودة منذ زمن ولكن لم يعرف أحد أهميتها أو كيفية استخدامها بالشكل الصحيح

حتى قامت شركة Google بتوظيفها في برامجها الجديدة كالـ Gmail و Google maps.



تكون ميزة وقوة الأجاكس في أنها كلما أراد المستخدم أن يطلب معلومة من ال Server-Side

أوعن طريق الخادم يتم ذالك (( من دون الحاجة لإعادة تحميل الصفحات ))

فلغات برمجة الويب تنقسم إلى قسمان Client-Side وهي JavaScript والـ VBScript

وقسم آخر يسمى بالـServer-Side وهي كالـPHP و الـ ASP

لكن الأجاكس لغة Client-Side مع ذالك تقوم بطلب أي معلومة من الـServer-Side

ومن دون الحاجة لطلب أو إعادة تحميل كامل الصفحة.


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

وفي المربع والمخطط الثاني يتم إستخدام تقنية الأجاكس كوسيط بين Web Browser

الذي هو Clinet-Side وبين الـ Web Server الذي هو الـ Server-Side .

ويمكن إستخدام AJAX في أي لغة برمجة ومن ضمنها الـ ASP

وهناك موقع خاص من شركة Microsoft عن إستخدام الأجاكس في ASP

وفيه الكثير من المواضيع الخاصة بالأجاكس وهذا هو رابط الموقع :

http://www.asp.net/ajax/

موقع أكثر من رائع فيه شرح عن طريق مقاطع الفيديو بشل واضح ومبسط


للتوضيح بشكل اكبر :

http://qatardr.net/gfx/userclassimages/drnet_author_1_22_2_2006_01_46_50_PM.png



وللحديث بقية

[هنادي]

ماهي إيجابيات وسلبيات تقنية الأجاكس ؟؟

الإيجابيات:
• لا تحتاج إلى إعدادات خاصة في السيرفر

يكفي إن يكون المتصفح يدعم تقنية HTTP Requests

• ويساعد في تخفيف الضغط على السيرفر

• سهولة التعامل مع السيرفر، بأن جعل المتصفح يتقاسم معه بعض المعاملات

والتعامل معه من خلال الاستعلامات فقط

• خفة التصفح، بأن يجعل المتصفح لا يعيد تحميل الصفحات من جديد




السلبيات:
• بالضرورة يجب ان يكون المتصفح يدعم JavaScript او VbSript اوJScript ومع هذا يجب
إن يدعم الكائن HTTP Requests

• الملفات المستجلبة (إن صحت التسمية) لن تتعرف عليها محركات البحث، فمثلا عندك
صفحة أخبار، بها عناوين آخر الأخبار، وعند النقر على عنوان يقوم الكود بجلب الموضوع
الخاص به عن طريق أجاكس، فإن محركات البحث لن تتعرف على ذاك الموضوع أو تلك
المواضيع، بل فقط على تلك العناوين الموجودة في الصفحة، وكل ما يظهر في السورس،
ومعلوم أن محركات البحث تتبع الروابط وتستكشف صفحاتها، لكن مع أجاكس لا توجد روابط،
بل استدعاء الكود والكود يجلب الموضوع أو الصفحة أو الكود، إذا على محرك البحث أن
يدخل وسط السورس ويلتوي مع كود أجاكس ليستكشف الرابط المراد جلبه هل هو كود أم صورة
أم صفحة... ، وهذا ستبعد، لكن ليس مستحيل خصوصا مع محرك البحث google .

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


ملاحظة : هذا الموضوع له علاقة بموضوع الأخ عادل على الرابط :

تصفح قوقل بدون اتصال (http://7asabco.com/showthread.php?t=3709&highlight=%DE%E6%DE%E1
)

اتمنى ان الموضوع يحوز على استحسانكم .. ويضيف لمعلوماتكم

[روح الياسمين]

شكرا شكرا شكرا هنوده
على التوضيح
تم الحفظ لتفصيص الموضوع ( قراءته بتمهل وتمعن)

[هنادي]

العفــــــــــــــو حبيبتي روح

اتمنى تكون فكرته واضحة

لو عندك اي سؤال تفضلي عنوني

شرفني مرورك وردك على موضوعي ياعسل

[دنيا الأمل]

يسلمو هنوده

جاري الاطلاع

جزاك الله خير

[دفء المشاعر]

جزاك الله الخيرو العافيه

[هنادي]

الله يسلم قلبك حبيبتي دنيا

شكرا لمرورك وردك

[هنادي]

شكرا غاليتي دفء لمرورك وردك

تحيتي لك

[تماراTMARA]

تسلم يمناك هنودة الغالية
الله يحفظك ويرعاك

[stn555]

شرح موفق يا اختنا هنادي .............

جزاك الله خيرا...

[هنادي]

الله يسلمك حبيبتي تمارا

شكرا لك غاليتي

[هنادي]

اتمنى الشرح كان واضح .. واستفدتوا من الموضوع

شرفني مرورك وردك أستاذ سلطان...

شكرا لك

[هنادي]

حبيت أضيف معلومة ممكن تقرب وتوضح لكم الصورة بشكل أفضل

بدل إعادة تحميل الصفحة بالكامل تظهر صورة رمزية

هذي بعض الأشكال المنتشرة بالمواقع :

http://www.ajaxload.info/top/ff/ff/ff/ff/00/00/5-0.gif

http://www.ajaxload.info/top/ff/ff/ff/38/38/38/1-1.gif

وغيرها: http://www.ajaxload.info/

[7asabco.com]

:) :) :) :)

مشكورة حبيبتي هنادي على الشرح المميز

:) :) :) :)

[هنادي]

العفو حبيبتي

احساسي فقدته

نور موضوعي بمرورك

واتمنى استفدتي من الشرح

تحيتي لك ياعسل

[thaqfan]

معلومات مفيدة ـــــــــــــــــــ جزاك الله خيرا

[هنادي]

واياك ان شاءالله

شكرا لمرورك...

تحيتي لك