الويب العربي - الـAjax ، ماهي ؟ مالها وماعليها؟

الويب العربي (http://www.arabwebtalk.com/index.php)

- تطويرالمواقع (http://www.arabwebtalk.com/forumdisplay.php?f=47)

- - الـAjax ، ماهي ؟ مالها وماعليها؟ (http://www.arabwebtalk.com/showthread.php?t=66966)

الـ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">

function ajaxopen(div, url)

  {

  var xmlHttp;

  try

    {

    // Firefox, Opera 8.0+, Safari

    xmlHttp=new XMLHttpRequest();

    }

  catch (e)

    {

    // Internet Explorer

    try

      {

      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

      }

    catch (e)

      {

      try

        {

        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

      catch (e)

        {

        alert("Your browser does not support AJAX!");

        return false;

        }

      }

    }

  }

</script>

هنا تلاحظ اننا قمنا بتعريف متغير xmlHttp والذي سنقوم من خلاله بطلب صفحات لوضعها في الصفحة الحالية
والدالة التي عرفناها في الشفرة السابقة تأخد مدخلين اثنين parameters ، الأول سيعرف اين سنضع الصفحة المحملة والثاني يحدد ماهي الصفحة التي يجب تحميلها

الآن سنقوم بتحديد مالذي على المتصفح فعله بعد اكتمال تحميل الصفحة المطلوبة
لذا أضف على الدالة السابقة وقبل نهاية القوس الأخير

كود:

xmlHttp.onreadystatechange=function()

  {

  if(xmlHttp.readyState==4)

    {

dcidocument.getElementById(div).innerHTML = xmlHttp.responseText;

    }

  }

وهنا حددنا انه عند وصول حالة التحميل إلى الحالة 4 (والتي تعني اكتمال التحميل) فإنه على المتصفح وضع هذه المحتويات داخل الdiv المحدد في الصفحة (المزيد عن الـdiv فيما بعد)
بإمكاننا حتى نضفي مزيدا من التفاعلية على الموقع ان نعرض عبارة تدل على تحميل الصفحة اثناء التحميل، لفعل هذا قم بإضافة مايلي بعد نهاية الـif في الشفرة السابقة

كود:

else { 

dcidocument.getElementById(div).innerHTML = "Loading, Please Wait...";

}

ثم سنقوم باستخدام xmlHttp لطلب الصفحة التي تمرر للدالة
، اضف مايلي للشفرة قبل القوس الأخير

كود:

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

اما الآن ، لاستخدام هذه الدالة في صفحة، عليك إنشاء صفحة مشابهة لما يلي بعد نهاية الوسم</script>

كود:

Welcome to My Website

<br>

<div id='content'>

Please <a href='#' onclick="javascript:ajaxopen('content', 'contact.html');">Click Here</a> to contact me

</div>

هنا قمنا بتحديد منطقة اسميناها content، ثم استخدمنا الدالة التي عرفناها سابقة لطلب الصفحة contact.html ووضعها في المنطقة المسماة content
قم بإنشاء صفحة اسمها contact.html وضع فيها ماتريد

في نهاية المطاف سيصبح لديك مايلي

كود:

<HTML>

 <HEAD>

  <TITLE> Ajax Test</TITLE>



<script type="text/javascript">

function ajaxopen(div, url)

  {



  var xmlHttp;

  try

    {

    // Firefox, Opera 8.0+, Safari

    xmlHttp=new XMLHttpRequest();

    }

  catch (e)

    {

    // Internet Explorer

    try

      {

      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

      }

    catch (e)

      {

      try

        {

        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

      catch (e)

        {

        alert("Your browser does not support AJAX!");

        return false;

        }

      }

    }



        xmlHttp.onreadystatechange=function()

          {

          if(xmlHttp.readyState==4)

                {

                        dcidocument.getElementById(div).innerHTML = xmlHttp.responseText;

                }

                else

                { 

                        dcidocument.getElementById(div).innerHTML = "Loading, Please Wait...";

                }

          }

        xmlHttp.open("GET",url,true);

        xmlHttp.send(null);

  }

</script>



 </HEAD>



 <BODY>

Welcome to My Website

<br>

<div id='content'>

Please <a href='#' onclick="javascript:ajaxopen('content', 'contact.html');">Click Here</a> to contact me

</div>



 </BODY>

</HTML>

لا تنس ان تقوم بإنشاء صفحة contact.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')

                include("contact.php")

o ايضا من السلبيات التي يسببها استخدام تقنية Ajax هو عدم توفر المحتوى النصي للصفحات الداخلية لمحركات البحث التي تطلق الـrobots لفهرسة الموقع، فبالنسبة لgooglebot على سبيل المثال، فلن يرى سوى الصفحة الأولى ، لأنه لا يفهم معنى الـJavascript ولايقوم بتنفيذها فلن يستطيع الوصول إلى الصفحات الأخرى، وايضا لحل هذه المعضلة يمكن استخدام ملفات htaccess لعرض صفحة اخرى للـ search bots غير التي يقوم السرفر بعرضها للمتصفحين الآخرين، وهذه الصفحة تحوي روابط عادية وليست javascript
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 لإلغاء فعاليتها

عليكم السلام ورحمة الله وبركاته

الاستاذ ايمن نجار هنا !!

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

واشكرك على هذا الموضوع القيّم حول تقنية الأجاكس الرائعه
وعشمنا كبير في ان نرى الكثير من الموضوعات المماثلة منكم

بارك الله فيك وفي علمك وجهودك

تحياتي

اهلآ وسهلآ ..
أولا شرفتنا أستاذ . أيمن نجار ..
موضوع مميز ومفيد جداً جداً .
وتم التثبيت لتعم الفائدة , شكراً.

السلام عليكم

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

شكرا لك استاذي على الشرح و الامثلة الأكثر من رائع
في انتظار كل جديد من ابداعكم

السلام عليكم

أولا : أرحب بك في الويب العربي

وأشكرك أستاذ أيمن على هذا المقال الرائع والذي بلا شك سيفيد الكثير وأنا أولهم ، أما بخصوص :

إقتباس:

ارجو من الاخوة استبدال كلم dcidcidcidocument بكلمة 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 هو عدم توفر المحتوى النصي للصفحات الداخلية لمحركات البحث التي تطلق الـrobots لفهرسة الموقع، فبالنسبة لgooglebot على سبيل المثال، فلن يرى سوى الصفحة الأولى ، لأنه لا يفهم معنى الـJavascript ولايقوم بتنفيذها فلن يستطيع الوصول إلى الصفحات الأخرى، وايضا لحل هذه المعضلة يمكن استخدام ملفات htaccess لعرض صفحة اخرى للـ search bots غير التي يقوم السرفر بعرضها للمتصفحين الآخرين، وهذه الصفحة تحوي روابط عادية وليست javascript

هذآ المـّلف htaccess إلى الآن لـّم افهـم فآئدة وجـودهـ على السيـرفر ..

لدي 7 مواقع .. في اكثـر مواقعـّي استخدم هذآ المـّلف لحمآإية الموقع ليـّس إلآ ..

وموآقع اخرى استخدمه لهآك الـ vbseo ..

اللي اكتشفتـّه مـّن خلآإل تجربتي مـّع تجربتـي مع هذآ المـّلف انه يقوٍم بأوامر على السيرفر ...!!

مدري يمكـّن غلطآن .. لأكـن اتمنى منـّك ان تكتـّب عن كيفيـة العمل في هذآ المـّلف وجعل بوتات قـوقل تستطيع أرشفـة جميـع الصفحأت اللي تكون بتقنيـّى الـ ajax ... وإن كآإنت برؤس اقلآإم ..

شاكرآ لك كل مآإقدمتـّه من معـلومآإت رآإئـّعه ويحتآإج اليهآإ المصمٍّم العربـّي ..

تقبـّل مروري ..

إقتباس:

اقتباس من مشاركة كاره المدارس (المشاركة 388257)

الآخ العـّزٍِيز الأستـآإذ ايمـّن ..

تقنيـّه الـ Ajax تقنيـّه رآإئـّعه وأكثـّرٍِ المصمميـّن يتشـّوٍِقون لإستخدآمهآ ..

عـّن نفسـّي لوٍِ وجـّدت حـّل لمشآإكل محركآإت البحـّث سأقوٍم بتصميم صفحآإت موٍقعي كأملـّه بتقنيـة ajax لأنهآ رآإئـّعه جدآ ..

وٍِجدت نقطـّه افرحتني كثيرآ وهـّي وجـوٍد حـل لـ بوتات قوقل لكـي تقوم بأرشفة صفحات الموقع وإن كآنت بتقنية الـ ajax ..

هذآ المـّلف htaccess إلى الآن لـّم افهـم فآئدة وجـودهـ على السيـرفر ..

لدي 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 موضوع رائع