هذا الجزء الأول من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، سنتحدث في هذا الدرس حول كتابة مكونات الأجاكس في لغة Javascript كما ذكرنا، سنتعرف في البداية على كائن XMLHttpRequest والذي سنكتب عن طريقه بقية مكونات أداة الأجاكس.

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

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

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

كتابة كائن XMLHttpRequest

لكتابة كائن XMLHttpRequest في لغة Javascript نضمنه لمتغير جديد (لإستخدامه لاحقاً في بقية الخطوات)، ونستطيع تسميته requester مثلاً، سنكتب هذه الشفرة:

var requester = new XMLHttpRequest();

في النسخ السابقة لمتصفح الإكسبلورر Internet Explorer مثل الإصدار السادس والخامس  فإنه لا يدعم كائن XMLHttpRequest، ويمكن تفعيله عن طريق الكائن ActiveX الموجود في متصفح الإكسبلورر، وعن طريق كتابة هذه الشفرة:

var requester = new ActiveXObject('Microsoft.XMLHTTP');

أما المتصفحات الأخرى (إضافةً إلى النسخة السابعة وما فوق من متصفح الإكسبلورر) التي تدعم كائن XMLHttpRequest لا تحتاج إلى كائن ActiveX. ولمن يستخدم الإصدارات السابقة لمتصفح الإكسبلورر مثل الإصدار السابع فإن كائن ActiveX يمكن أن يكون معطل من الخصائص.

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

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

إستخدام تصريح try-catch

تصريح try-catch متشابه مع دالة if الشرطية، بحيث يمكنك عمل محاولة تفعيل كتابة كائن XMLHttpRequest، إذا لم نجد نتيجة، نقوم بعمل محاولة أخرى لكتابة كائن ActiveX وهنا نريد تفعيل الكائن عن طريق متصفح الإكسبلورر على سبيل المثال. وإذا لم تعطي المحاولة أي نتائج نبقي المتغير الذي كتبناه فارغاً بحيث لن نستطيع إستخدامه بسبب وجود خطأ، كما هو موضح في الشفرة التالية:

try {
 var requester = new XMLHttpRequest();
 }   catch (error) {
 try {
 var requester = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (error) {
 var requester = null;
 }
}

إستخدام دالة if الشرطية

وهذه طريقة أخرى يمكن أن تكون أسهل من السابقة، لكن لمن لم يفهم فكرة لشفرة السابقة يمكنه أن يفهمها هنا مرة أخرى، عبر عبر دالة if:

var requester = false;
if (window.XMLHttpRequest) {
 requester = new XMLHttpRequest();
} else if (window.ActiveXObject) {
 requester = new ActiveXObject("Microsoft.XMLHTTP");
}

في الطريقتين تستطيع بعدها البدأ بكتابة بقية مكونات أداة الاجاكس، أبسطها دالة if للتأكد من نجاح تضمين كائن XMLHttpRequest في متغير requester بهذه الطريقة مثلاً:

if (requester != null) {
 // كتابة بقية شفرات الأجاكس
} else {
// لبقية المستخدمين الذين لا تدعم متصفحاتهم الأجاكس
}

ويمكنك الإكتفاء بدالة if بدون else، لأن أغلب المستخدمين اليوم تدعم متصفحاتهم هذه الأداة!

في الجزء الثاني من تكملة الدرس سننتهي من أساسيات كتابة الأجاكس قبل الدخول في مثال عملي على إستخدام هذه الأداة.

أجزاء أخرى لدرس كتابة الأجاكس في Javascript: