تقنيات الأجاكس البديلة .. الجزء الثانى ( مقال مترجم )

[Egyptian]

قمت مسبقاً بعرض وترجمة الجزء الأول من المقالة على الرابط التالى
http://www.swalif.net/softs/showthread.php?t=152271
وأثناء تصفحى لموقع webreference وجدت الجزء الثانى من المقال
فقمت بترجمته وهاهو ذا بين يديكم

========================

فى المقال السابق من هذه السلسلة .. تعلمت كيفية تحميل السكريبت الديناميكى. والتى تتعلق بإنشاء عنصر <script/> ديناميكى وإستخدامه لتحميل الجافا سكريبت من الخادم. ولكى تفعل هذا العمل, لا بد ان يكون متصفحك متوافق مع الـ DOM. فى الجزء الثانى سوف تتعلم كيف تستخدم الصور والكوكيز لإتاحة إتصالات الخادم والوكيل حتى على المتصفحات القديمة والتى لا تدعم خاصية الـ Dom.

الصور والكوكيز (Images and Cookies)
عندما تبدأ الناس بالتفكير فى الكوكيز هذه الأيام, معظم التفكير يتجه حول المسائل المتعلقة بالحماية والآمان. السباى وير والقراصنة التى تتبع كل خطوة. هذه المخاوف تعطى مفهوم ماذا يحدث فى عالم الويب, ولكن الكوكيز فى الحقيقة عبارة عن قطع بسيطة من البيانات والتى يمكن المرور إليها بواسطة كل من الخادم والملقم الوكيل. ومع ذلك, لقد وضعت بعض القيود على الكوكيز والتى لابد من ان تكون على علم مها قبل إستخدام الكوكيز
وهذه القيود هى:

كل نطاق يمكن تخزين 20 كوكيز كحد أقصى على جهاز المستخدم. وهو الأفضل لكي يتم إعادة إستخدام الكوكيز فى اى وقت ممكن بدلاً من إعادة تحميلها.
الحجم الكلى للكوكيز ( متضمناً الإسم وعلامة = والقيمة ) لايمكن ان يتعدى 4096 بايت, وهذا يعنى ان الكوكيز مفيدة جداً فى حفظ كميات بسيطة من البيانات.
العدد الكلى للكوكيز على جهاز المستخدم لا يتعدى 300 كوكيز.
=======

ومنذ صدور متصفح نتسكيب 3, أصبح يمكن أن تغير رمز الـ src لصورة ما بإستخدام الجافا سكريبت. وهذا يعد طلب, وبناء على ذلك يجلب معه معلومات الكوكيز من الخادم. وعلى الوجه الأخر تطلق الصورة حدث تحميلى عندما ينتهى تحميل الصورة كلياً, تسمح لك بمعرفة بالضبط متى تكون البيانات التى طلبتها جاهزة. وهذا ما يجعل الصور الطريقة المثلة لمعالجة الكوكيز من اجل إتصالات الخادم والملقم الوكيل.

التقنية (The Technique)
التقنية الأساسية وراء إستخدام الصور والكوكيز مشابهه للصور المحملة مسبقاً ( Preloading images ) سوف تحتاج إلى إنشاء عنصر <img/> و تحديد رمز الـ src الخاص به. ولكى يخبرك متى يتم تحميل الصورة . حدد معالج التحميل (OnLoad):

var oImg = document.createElement("img");
oImg.onload = function () {
alert("Image is ready");
}
oImg.src = "/path/to/myimage.gif";

على عكس إنشاء عنصر <script/> الديناميكى, فإن تحميل الصورة يتم بمجرد تحديد رمز الـ src, بمعنى أنك لا تحتاج إلى إضافة صورة للصفحة. فى الواقع أنت لاتحتاج إلى إستخدام عنصر <img/> مطلقاً, يمكنك إستخدام كائن الصور:

var oImg = new Image();
oImg.onload = function () {
alert("Image is ready");
}
oImg.src = "/path/to/myimage.gif";

بالطبع هذا مجرد جزء من العملية. إذا كان طلب الصورة معنى بإحضار البيانات فى ملف كوكيز, سوف تحتاج إلى قراءة هذه البيانات فى معالج التحميل (onload). وطريقة getCookie() تتيح لك وصول أسهل إلى قيم كوكيز محددة:

function getCookie(sName) {
var sRE = "(?:; )?" + sName + "=([^;]*);?";
var oRE = new RegExp(sRE);

if (oRE.test(document.cookie)) {
return decodeURIComponent(RegExp["$1"]);
} else {
return null;
}
}

وبدون الدخول أكثر فى هذا الكود, فإن ملف الكوكيز document.cookie يعيد سلسلة متتاليه من الزوجين ( القيم-والأسماء) والتى تم ترميزها ترميزURL وتم فصلها بواسطة فواصل منقوطة. هذه الوظيفه تحدث عبر الدالة المطابقة للقيمة المعطاه للإسم المدخل.

مثال
والآن بعد ان أخذت خلفية عن تلك التقنية, حان الوقت لأخذ جوله عبر مثال كامل. كما فى المقال السابق سيكون المثال بسيط جداً حتى تستطيع فهم كل ما يجرى فيه, يمكن إستخدام نفس التقنيات لنتائج وغايات أكثر تعقيداً.

أول شئ سوف تحتاجه هو صورة صغير 1×1 بصيغة GIF. من المهم جداً ان تكون الصورة أصغر ما يمكن حيث أنك تريد أن تكون الإستجابة بأسرع مايمكن. وبما أن هذه الصورة لن يتم عرضها. فيمكن أن تكون صورة واحده بيضاء لسرعة تحميلها.

بعد ذلك, الصفحة الجانبية للخادم لابد من ان تقبل المدخل من الداله الشرطية. ونتيجة هذه الصفحة ثنائية: وهو قبول البيانات القادمة و إعداد ملفات الكوكيز بالبيانات المخرجة. بمجرد عمل الطلب من الصورة, سوف تحتاج أن تتأكد من ان الصفحة تعيد الصورة, وإلا سوف يحدث خطأ ما. وأفضل طريقة لفعل ذلك هو أن يتم تعديل نوع المحتويات ( content-type ) لهذه الصفحة ليكون image/gif , أعد الكوكيز, وبعد ذلك أرسل الصفحة إلى الصورة ذات البكسل الواحد:

<?php
header("Content-type: image/gif");
setcookie("info", "Hello, ".$_GET["name"]);
header("Location: pixel.gif");
?>

صفحة البى اتش بى البسيطة هذه تقبل الدالة الشرطية للإسم ( name ) وتضيف إليه (Hello). وهذه القيمة مخزنه فى الكوكيز المسماه (info) للإستخدام بعد ذلك. السطر الأخير يرسل الطلب إلى الصورة (pixel.gif), ويضمن إعادة الصورة الحقيقة. أحفظ هذا الكود فى صفحة تسمى بـ image.php.

هل تتذكر وظيفة makeRequest() فى المقال السابق؟ هذه إعادة صياغة لها بإستخدام الصور:

function makeRequest(sUrl, oParams, fnCallback) {
for (sName in oParams) {
if (sUrl.indexOf("?") > -1) {
sUrl += "&";
} else {
sUrl += "?";
}
sUrl += encodeURIComponent(sName) + "=" + encodeURIComponent(oParams[sName]);
}

var oImg = new Image();
oImg.onload = fnCallback;
oImg.src = sUrl
}

سوف تلاحظ كثير من التشابهات بين هذه الوظيفة والوظيفة المستخدمه لتقنية تحميل السكريبت الديناميكى. وإنشاء الرابط URL والدالة الشرطية الخاصة به هو نفسه بالضبط. الإختلاف الرئيسى, جانباً من إستخدام صورة ما, هو أن وظيفه الأستدعاء قد مرت إليه. وهذه الوظيفة قد حددت لمعالج التحميل onload الخاص بالصورة قبل بداية الطلب.

وظائف أخرى هامة لهذا المثال كالتالى:

function getInfo() {
var oParams = {
"name": document.getElementById("txtInput").value
};
makeRequest("image.php", oParams, handleResponse);
}

function handleResponse() {
alert("Info from server: " + getCookie("info"));
}

وظيفة الـ getInfo() عندما يتم الضغط على الزر فى صفحة المثال. هناك مربع كتابة مع رقم خاص لمدخل الكتابة ( txtInput ) والذى يمكنك عن طريقه إدخال أى قيمة تريد. وهذه القيمة يتم إمرارها بالضبط كالـ name فى الدالة الشرطية. بعد ذلك, يتم إستدعاء طريقة makeRequest(), بإمرار الرابط image.php تقوم دالة الإستدعاء و البرامترز parameters بإستدعاء handleResponse(). بمجرد إستقبال الإستجابة من الخادم, تقوم تلك الوظيفة بعرض المعلومات التى تم إستقبالها. يمكنك تجربة المثال بالضغط هنا ويمكنك تحميله بالضغط هنا

[B]ملاحظة:B]
بعض إصدارات بى اتش بى تقوم بتحويل المسافة فى الكوكيز كـ+ بدلاً من 20%, فى اى حالة يتوجب عليك تقديم هذا فى كود الجافا سكريبت. عند تجربه المثال إذا ظهرت لك علامة + فى النتيجة مكان المسافة. فسوف تحتاج إلى تغيرها يدوياً إلى مسافة.

العوائق

بما أن تلك التقنية فعالة للإتصالات داخل السيرفر, يوجد هناك بعض العوائق والحدود لإستخدام تلك التقنية.

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

العائق الثانى كمية البيانات التى يمكن حفظها بإستخدام الكوكيز. بالرغم من ان تقنية تحميل السكريبت الديناميكى لها حدود لإرسال البيانات إلى السيرفر, فإن إستخدام تقنية الصور والكوكيز تقوم بتحديد كل من كمية البيانات المرسلة والمستقبلة أيضاً. والـ 4096 بايت المحددين للكوكيز محددين بصرامة, ولن تستقبل أى تحذير إذا قمت بتخطى ذلك الحجم.

وكما انك فى تقنية تحميل السكريبت الديناميكى لا تستطيع إستخدام طلب POST فقط GET, هو نفس الحال بالنسبة لتلك التقنية أيضاً. تأكد تماماً انك لا تضع بيانات حساسة فى الدالة الشرطية.

الحقوق

العنوان الأصلى للمقال
http://www.webreference.com/programming/ajax_tech2

حقوق الترجمة محفوظة لـ xSitez.info

يمكنك نقل الترجمة بشرط ذكر المصدر
xsitez.info

[Muhammad Habib]

ماشاء الله.. رائع جدا

جزاك الله خيرا... في انتظار المزيد

[Egyptian]

مشكور أخى محمد حبيب

جزانا الله خيراً واياكم بإذن الله

وإن شاء الله فى المزيد

[الطير]

مشكوووووووووووور

[Egyptian]

العفو أخى الكريم