السلام عليكم ورحمة الله وبركاته
مقدمة:
لايكاد يمر يوم دون ان يرى مصمموا المواقع مقالا يتكلم عن هذه التقنية التي اصبحت "موضة" الويب ان صح التعبير، فلا يجتمع مصممين إلا وحازت هذه التقنية على نصيب الاسد من نقاشهما فما هي تلك التقنية التي قلبت مفهوم الويب حتى انشأت معيارا جديدا في تصميم المواقع ...
لعلكم تذكرون عندما قراتم موضوع الأخ 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
تحياتي،
أيمن نجار
الـAjax ، ماهي ؟ مالها وماعليها؟
رائع جدا
النمط المتتابع
