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

تتناول هذه المقالة كل ما تحتاج لمعرفته حول اجاكس، بما في ذلك تعريفها والأمثلة العملية وكيفية تعلم التقنية وإيجابياتها وسلبياتها.

ما هي اجاكس؟

يشير اجاكس (Ajax) إلى جافاسكريبت وXML غير المتزامنين. إنها مجموعة من تطوير الويب لبناء مواقع وتطبيقات أكثر استجابة. يسمح أجاكس لصفحات الويب بتحديث محتواها دون أن يضطر المستخدمون إلى إعادة تحميل الصفحة.

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

وفي الوقت نفسه، تقوم لغة التوصيف القابلة للتوسيع (XML) بنقل البيانات بين خادم الويب والمتصفح. وبصرف النظر عن XML، يتم استخدام تنسيقات أخرى مثل النص العادي وJSON بشكل متكرر لتبادل البيانات.

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

كيف يعمل اجاكس؟

يضم أجاكس التقنيات التالية:

• XHTML وCSS – لعرض المعلومات.
• نموذج كائن المستند (DOM) – لعرض البيانات الديناميكية وتفاعلها.
• XML وHTML وXSLT – لتبادل البيانات ومعالجتها. ومع ذلك، قام العديد من المطورين باستبدال XML بـ JSON منذ نشأته من جافا سكريبت.
• كائن XMLHttpRequest – يسمح بالاتصال غير المتزامن مع خادم الويب.
• جافا سكريبت – لغة البرمجة التي تربط كل تقنيات الويب هذه.

المبادئ العامة لـ أجاكس بسيطة. ومع ذلك، فإن وجود المعرفة التقنية الحالية سيساعدك على فهم سير العمل بشكل أسرع.

ألقِ نظرة على الجدول أدناه لمقارنة النموذج التقليدي بنموذج اجاكس لتطبيق الويب.

جدول المقارنة:

أمثلة عملية على اجاكس

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

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

لم يكن هذا هو الحال في أوائل التسعينيات عندما لم يتم تقديم هذه التكنولوجيا الجديدة بعد. كان عليك إعادة تحميل جوجل لتظهر توصية جديدة على شاشتك.

فيما يلي المزيد من الأمثلة المفيدة لطريقة اجاكس في حياتنا اليومية:

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

هل يجب أن أتعلم اجاكس؟

يعد تعلم أجاكس أمرًا سهلاً نسبيًا، خاصة إذا كانت لديك معرفة مسبقة بـ HTML وXML وJavaScript وCSS.

بالنسبة للمطورين المتقدمين، قد يستغرق فهم اجاكس ساعة أو ساعتين فقط نظرًا لأن التقنية تنفذ مهارات التطوير التي أتقنتها بالفعل.

إذا كنت مبتدئًا، فعادةً ما يستغرق الأمر ساعة لتعلم المبادئ الأساسية ويومًا أو يومين لفهم صيغ XMLHttpRequest – مفتاح أجاكس.

سواء كنت مطورًا متقدمًا أو جديدًا، نوصي بالتدرب على استخدام أمثلة واقعية لإتقان التقنية.

فيما يلي أربع خطوات لتعلم اجاكس:

• تعرف على JavaScript وHTML وXML وCSS – هذه اللغات هي متطلبات أساسية لتعلم اجاكس.
• ابحث عن كيفية استخدام اجاكس – تعرف على كيفية تطبيق اجاكس على تطبيقات الويب والتقنيات المستخدمة لتطويرها. على سبيل المثال، ادرس خرائط جوجل، التي تقوم بتشغيل اجاكس لاسترداد بيانات الخرائط الجديدة.
• دراسة جي كويري – العديد من تطبيقات الويب التي تستخدم اجاكس تقوم أيضًا بتشغيل جي كويري. لذلك، نوصي بتعلم أساسيات جي كويري لكتابة تطبيقات اجاكس المتقدمة.
• أنشئ مشروعًا باستخدام Ajax – ضع معرفتك ومهاراتك التنموية موضع التنفيذ.

مثل موضوعات تطوير الويب الشائعة الأخرى، تمتلك اجاكس العديد من مصادر التعلم.

في هذا القسم، قمنا بإدراج أفضل خمس دورات عبر الإنترنت لتعلم اجاكس:

• تعلم JavaScript AJAX في ساعة واحدة بواسطة Udemy – ستعلمك هذه الدورة كيفية استخدام أجاكس لتشغيل طلبات GET وPOST وإنشاء تجربة تفاعلية وإنشاء محتوى ديناميكي. يتكون من فيديو مدته ساعة، وسعره 14.99 دولارًا.
• JavaScript وAJAX: تقنيات التكامل من LinkedIn Learning – ستتعلم في هذه الدورة المبادئ الأساسية لـ Ajax وكيفية دمج XML وjQuery وJSON. تبلغ تكلفة هذه الدورة 34.99 دولارًا.
• مقدمة إلى AJAX من Udacity – ستعلمك هذه الدورة التدريبية المجانية كيفية تقديم طلبات غير متزامنة باستخدام وظيفة اجاكس الخاصة بـ jQuery وواجهات برمجة تطبيقات بيانات المستخدم. ستتمكن أيضًا من إنشاء تطبيق ويب لممارسة مهاراتك.
• مقدمة عن AJAX مقدمة من W3Schools – في هذه الدورة المجانية، ستتعرف على أساسيات أجاكس. بالإضافة إلى ذلك، توفر W3Schools اختبارات وممارسات في كل قسم لاختبار معلوماتك.
• برنامج AJAX التعليمي من Tutorials Point – ستعلمك هذه الدورة المجانية المبادئ الأساسية لـ AJAX وكيفية تطبيقها. توصي Tutorials Point أيضًا بالدورات التدريبية الأخرى ذات الصلة بالموضوع لمساعدتك على فهم AJAX بشكل أفضل.

الجانب العالمي

اجاكس هي تقنية مستخدمة عالميًا وجزء أساسي من تطوير الواجهة الأمامية، مما يجعلها واحدة من أكثر المهارات المطلوبة. وفقًا لـ Glassdoor، يبلغ متوسط راتب مطور الواجهة الأمامية حوالي 102000 دولار سنويًا.

يكسب المطورون الذين لديهم أقل من عام واحد من الخبرة حوالي 100000 دولار سنويًا. من ناحية أخرى، قد يحصل كبار مطوري الواجهة الأمامية على متوسط راتب يزيد عن 120 ألف دولار سنويًا.

إيجابيات وسلبيات اجاكس

قبل استخدام أجاكس، فكر في إيجابياته وسلبياته:

الايجابيات

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

سلبيات

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

الملخص

اجاكس عبارة عن مجموعة من تقنيات تطوير الويب المستخدمة بشكل أساسي لإرسال واستقبال البيانات من الخادم بشكل غير متزامن.

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

مع ازدياد شعبية هذه الطريقة، هناك العديد من فرص العمل لمطوري الويب ذوي المعرفة بـ اجاكس. لقد قمنا بتجميع قائمة من الموارد لمساعدتك على تعلم اجاكس، بما في ذلك الدورات التدريبية عبر الإنترنت من Udemy وLinkedin Learning وUdacity وW3Schools وTutorialsPoint.

بالإضافة إلى ذلك، قمنا بشرح إيجابيات وسلبيات بناء تطبيق اجاكس.

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