![]() |
الـAjax ، ماهي ؟ مالها وماعليها؟
السلام عليكم ورحمة الله وبركاته
مقدمة: لايكاد يمر يوم دون ان يرى مصمموا المواقع مقالا يتكلم عن هذه التقنية التي اصبحت "موضة" الويب ان صح التعبير، فلا يجتمع مصممين إلا وحازت هذه التقنية على نصيب الاسد من نقاشهما فما هي تلك التقنية التي قلبت مفهوم الويب حتى انشأت معيارا جديدا في تصميم المواقع ... لعلكم تذكرون عندما قراتم موضوع الأخ Smart Vision جزاه الله خيرا عندما تكلم عن الويب 2.0 انه ذكر ان الـ Ajax اصبحت سمة تتسم بها تلك المواقع التي تتماشى مع مفهوم الويب 2.0 ، وتقنية الـ Ajax تأتي مكملة لمفهوم البساطة و سهولة التصفح التي تتسم بها مواقع الويب 2.0 وتكمن الميزة الأعظم في هذه التقنية في السماح بتحميل محتويات جديدة للصفحة دون الحاجة إلى إعادة تحميل الصفحة من البداية. ومن هنا ياتي اسمها Ajax الذي هو اختصار لـ Asynchronous JAvaScript and XML ، حيث تكمن صفة اللاتزامنية فيها (asynchronousk H) بأن هذه المحتويات يتم تحميلها من السيرفر بشكل لايتطلب تحميل بقية الصفحة ، أما كلمة الـ XML فهي تشير إلى أن تلك المحتويات التي يتم تحميلها بشكل غير متزامن فما هي إلا عبارة عن وسوم XML (بالرغم ان هذا ليس صحيحا بالضرورة) وأما كلمة Javascript فتدل على ان تلك التقنية تستخدم لغة Javascript. اسمحو لي بأن أعطي موقعي الشخصي كمثال مبسط عن هذه التقنية ayman.kwakeb.net ستلاحظ عند تنقلك بين صفحات الموقع بأن الصفحة تبقى كما هي إلا ان المحتوى النصي يتغير عند انتقالك من صفحة لأخرى التنفيذ: سأعطي الآن مثالا تعليميا مبسطا لتستخدم تلك التقنية في موقعك بداية، علينا تعريف الXmlHttpRequest Object والذي عن طريقه سنقوم بطلب محتويات جديدة قم بوضع الكود التالي بعد وسم الـ <body> مباشرة كود:
<script type="text/javascript"> والدالة التي عرفناها في الشفرة السابقة تأخد مدخلين اثنين parameters ، الأول سيعرف اين سنضع الصفحة المحملة والثاني يحدد ماهي الصفحة التي يجب تحميلها الآن سنقوم بتحديد مالذي على المتصفح فعله بعد اكتمال تحميل الصفحة المطلوبة لذا أضف على الدالة السابقة وقبل نهاية القوس الأخير كود:
xmlHttp.onreadystatechange=function() بإمكاننا حتى نضفي مزيدا من التفاعلية على الموقع ان نعرض عبارة تدل على تحميل الصفحة اثناء التحميل، لفعل هذا قم بإضافة مايلي بعد نهاية الـif في الشفرة السابقة كود:
else { ، اضف مايلي للشفرة قبل القوس الأخير كود:
xmlHttp.open("GET",url,true); كود:
Welcome to My Website قم بإنشاء صفحة اسمها contact.html وضع فيها ماتريد في نهاية المطاف سيصبح لديك مايلي كود:
<HTML> طبعا هذا مثال مصغر فقط لهذه التقنية ذو الاستخدامات المتعددة ، لكن يمكنك استخدام مخيلتك للاستفادة من هذا المثال واستخدامه بشكل مكبر، طبعا في هذا المثال نقوم بطلب الصفحة contact.html من نوعHTTP GET REQUEST، وهذا هو النوع التي تستخدمه عند فتح صفحة من المتصفح او عندما تضغط على رابط ما، اما النوع الآخر HTTP POST REQUEST وهو النوع الذي تستخدمه عادة في النماذج والform عندما تضغط على زر الارسال submit الإيجابيات: o الإقلال من الـtraffic المتبادل بين السيرفر و المتصفح وبالتالي استهلاك bandwidth أقل، حيث انك عندما تطلب المحتوى النصي فقط عند الانتقال بين الصفحات ولا تطلب بقية الصفحة إلا في المرة الأولى، فإن استهلاك الـbandwidth سيتناقص بشكل كبير o الفصل بين المحتويات والتنسيق، ستلاحظ ان التنسيق يكون موجود في الصفحة الأولى، اما بقية الصفحات فلن تكتب فيها سوى المحتوى النصي مما يسهل عليك التصميم o الإضفاء مزيد من التفاعلية على الموقع، فالزائر الذي يرى عبارات الانتظار عند تنقله بين صفحة واخرى سيشعر بتفاعل الموقع معه بدلا من الروتين الممل الذي اعتاد عليه عند ضغطه على روابط عادية السلبيات: o من السلبيات التي لابد وانك لاحظتها هي ان الضغط على رابط يؤدي في الحقيقة إلى فتح الصفحة # (وال# تدل على نفس الصفحة ولكن في منطقة معينة - bookmarking) أي انه بالنسبة للمتصفح فإنك لم تنتقل من الصفحة ذاتها طوال وجودك في الموقع، وبالتالي فإنه لا يمكنك تخزين صفحة داخلية في المفضلة أو مثلا الرجوع للصفحة السابقة باستخدام زر الخلف back او بالـhistory، إلا ان هذه المعضلة يمكن تجاوزها بعدد من الحلول ، مثل ان تضع دلالة على محتوى الصفحة بعد حرف الـ# (مثلا في مثالنا السابقة، ربط الرابط بالصفحة #contact) ثم بإمكانك عن طريق server-side script ان تعرض المحتوى المطلوب بعد فحص الquery string مثال كود:
if ($_ENF[QUERY_STRING] == '#contact') o الاعتماد على لغة الـ Javascript، وبسبب اختلاف تنفيذ الjavascript في مختلف المتصفحات، فإن على المصمم التأكد من ان الموقع يعمل بشكل صحيح على مختلف المتصفحات ، ولكن مع تواجد مكتبات متعددة تسهل من الاستفادة من تقنية Ajax ، اصبح من السهل تجاوز هذه السلبية، ومن هذه المكتبات القوية والتي استخدمها شخصيا مكتبة Prototype Javascript Framework (prototypejs.org) مواقع تستخدم Ajax: حتى ابين مدى قوة هذه التقنية ، احببت ان اشارككم بعض المواقع التي تعتمد على تقنية Ajax بشكل مكثف: http://www.ajaxwindows.com https://www.google.com/analytics/ http://flickr.com وكثير من المواقع الاخرى وهنا اصل إلى نهاية هذا الموضوع المتواضع راجيا ان اكون قدمت إفادة جديدة وسببا في فتح افاق جديدة لمن لا يعلم عن تقنية الAjax تحياتي، أيمن نجار |
ارجو من الاخوة استبدال كلم dcidocument بكلمة d o c u ment فقط (بدون المسافات)، يبدو لي ان المنتدى يقوم بإضافة dci عند مصطلحات الـjavascript لإلغاء فعاليتها
|
عليكم السلام ورحمة الله وبركاته
الاستاذ ايمن نجار هنا !! اهلا ومرحبا استاذي الكريم واشكرك على هذا الموضوع القيّم حول تقنية الأجاكس الرائعه وعشمنا كبير في ان نرى الكثير من الموضوعات المماثلة منكم بارك الله فيك وفي علمك وجهودك تحياتي |
اهلآ وسهلآ ..
أولا شرفتنا أستاذ . أيمن نجار .. موضوع مميز ومفيد جداً جداً . وتم التثبيت لتعم الفائدة , شكراً. |
السلام عليكم
الأخ خالد والسكربت العربي، شكرا لكم لتثبيث الموضوع و على ردودكم الجميلة وصدقوني الشرف لي وبإذن الله لن اقصر في إرسال مثل هذه المواضيع المتواضعة |
شكرا لك استاذي على الشرح و الامثلة الأكثر من رائع
في انتظار كل جديد من ابداعكم |
السلام عليكم
أولا : أرحب بك في الويب العربي وأشكرك أستاذ أيمن على هذا المقال الرائع والذي بلا شك سيفيد الكثير وأنا أولهم ، أما بخصوص : إقتباس:
نعم فنظام الحماية الخاص بنسخة الكمبو يمنع بعض الكلمات ! وأسمح لي بتثبيت موضوعك في المواضيع المميزة حتى تعم الفائدة بشكل أوسع ، ولك فائق التحية والإحترام وينتظر الجميع بفارغ الصبر ماستطرحه مستقبلاً . تحياتي لك |
ربي يعطيك العافية استاذنا الرائع
ولمجهوداتك الرائعة |
هل تدعم الاجاكس من قبل ال php ??
|
شكرا لكم جميعا على الردود الرائعة، اخي المشرف العام يشرفني جدا ان يتم بتثبيت موضوعي في المواضيع المميزة
عذرا على الانشغال في الآونة الاخيرة، اتت بعض الظروف وحالت بيني وبين الكتابة بالنسبة لسؤالك اخي م.عمر، فتقنية الajax في واقع الامر هي تقنية تعتمد على لغة الجافاسكربت والتي هي عبارة عن client-side language بعكس الـphp التي تعتبر server-side language، وهذا يعني ان اللغتين منفصلتين تماما ، في حين انه يتم تنفيذ شفرة الـphp على السيرفر، فإن اكواد الجافا سيتم تنفيذها من قبل المتصفح نفسه في جهاز الزائر.. أي أن الـphp لا تملك ان تدعم او لاتدعم هذه التقنية فالأمر ليس بيدها انما بيد المتصفح . لكن هناك مايسمى بالـframeworks وهي عبارة عن مكتبات من الدوال مكتوبة بلغة معينة (مثلا php) تسهل عليك تنفيذ تقنيات الـajax ، هنا قائمة بهذه المكتبات علما بأني لم اجربها او استخدمها من قبل http://ajaxpatterns.org/PHP_Ajax_Frameworks ارجو ان تكون الإجابة واضحة :) تحياتي ايمن نجار |
أشكر أخي على الشرح
|
الآخ العـّزٍِيز الأستـآإذ ايمـّن ..
تقنيـّه الـ Ajax تقنيـّه رآإئـّعه وأكثـّرٍِ المصمميـّن يتشـّوٍِقون لإستخدآمهآ .. عـّن نفسـّي لوٍِ وجـّدت حـّل لمشآإكل محركآإت البحـّث سأقوٍم بتصميم صفحآإت موٍقعي كأملـّه بتقنيـة ajax لأنهآ رآإئـّعه جدآ .. وٍِجدت نقطـّه افرحتني كثيرآ وهـّي وجـوٍد حـل لـ بوتات قوقل لكـي تقوم بأرشفة صفحات الموقع وإن كآنت بتقنية الـ ajax .. إقتباس:
لدي 7 مواقع .. في اكثـر مواقعـّي استخدم هذآ المـّلف لحمآإية الموقع ليـّس إلآ .. وموآقع اخرى استخدمه لهآك الـ vbseo .. اللي اكتشفتـّه مـّن خلآإل تجربتي مـّع تجربتـي مع هذآ المـّلف انه يقوٍم بأوامر على السيرفر ...!! مدري يمكـّن غلطآن .. لأكـن اتمنى منـّك ان تكتـّب عن كيفيـة العمل في هذآ المـّلف وجعل بوتات قـوقل تستطيع أرشفـة جميـع الصفحأت اللي تكون بتقنيـّى الـ ajax ... وإن كآإنت برؤس اقلآإم .. شاكرآ لك كل مآإقدمتـّه من معـلومآإت رآإئـّعه ويحتآإج اليهآإ المصمٍّم العربـّي .. تقبـّل مروري .. |
إقتباس:
ودمتم |
مشكووووووور أخي على الشرح الجميل
|
اشكرك يا غالي على الطرح الجميل
ولكن لدي سؤال مهم طبعا انا لما اصمم موقع اراعي انه اكثر زوار الموقع اناس مالهم في البرمجة ولما استخدم كود الاجاكس مثل اللي انت طارحه.. الاكسبلورر يعطي رسالة الخطأ To help protect your securituy, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options... طبعا كثير ناس ما رح تدري عن هالرسالة ويمكن حتى تفكر الافضل انه ما تفعل الاكتيف كونتينت وبالتالي الروابط ما حتشتغل انا لاحظت انه فيه كثير مواقع متغلبة على هالمشكلة في تقنية الاجاكس.. حاولت اشوف الكود البرمجي.. لكن للاسف مستخدمين ملف جافا سكريبت منفصل للاجاكس اتمنى اجد منك رد عن طريقة التخلص من هالمشكلة ولك التحية |
لووووووووووووووووول
عفوا عفوا عفوا عفوا... وجدت سبب الخلل يبدو ان الرسالة تظهر في حالة محاولتي فتح صفحة تحوي عنصر نشط على نفس الجهاز كأن يكون المسار C:\Documents and Settings\Faisal\Desktop وهو اجراء امني لكن حين افتحها على السيرفر المحلي او من الانترنت فلن اواجه هذه المشكلة اشكركم |
مشكور يالغلا ..
|
والله لا يحرمنا من جديدك
|
الله يجزاك الخير يالغالي..
|
شكرا لك اخ Ayman موضوع رائع
|
جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 12:00 AM. |
Powered by vBulletin
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Copyright © ArabWebTalk.Com 2004-2012