ما هي تقنية أجاكس – AJAX وكيف تعمل؟

تشير تقنية أجاكس AJAX إلى JavaScript وXML غير المتزامنين. إنها مجموعة من معايير وتقنيات الويب التي يمكن استخدامها لإنشاء تطبيقات قائمة على الويب تتفاعل بسهولة مع المستخدمين. باختصار، يتم استخدام كائن XMLHttpRequest للتواصل مع الخوادم. يمكنه إرسال واستقبال البيانات بتنسيقات مختلفة بما في ذلك JSON وXML وHTML والملفات النصية.

يعد فهم AJAX أمرًا ضروريًا لمطوري الويب لأنه شائع الاستخدام في تطبيقات الويب الشائعة مثل خرائط Google وGmail وFacebook وTwitter.

ما هي تقنية أجاكس – AJAX؟

Ajax هو اختصار لـ “Asynchronous JavaScript and XML”، وهو نهج في تطوير الويب يستخدم تقنيات متعددة مثل JavaScript و XML أو JSON لإنشاء تطبيقات الويب التي تتفاعل مع الخادم بشكل غير متزامن. يُستخدم ajax لتحميل البيانات من الخادم وتحديث أجزاء محددة من صفحة الويب بدون الحاجة إلى إعادة تحميل الصفحة بأكملها. هذا يسمح بتحسين تجربة المستخدم وجعل التفاعل مع التطبيق أكثر سلاسة وفعالية.

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

يتضمن AJAX التقنيات التالية:

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

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

في هذا الجدول وضحنا مقارنة النموذج العادي ونموذج تقنية أجاكس – AJAX لتطبيق الويب.

تطبيقات ajax

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

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

أمثلة أجاكس

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

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

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

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

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

هل من الضروري تعلم أجاكس؟

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

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

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

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

فيما يلي أربع خطوات لتعلم AJAX:

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

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

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

مميزات أجاكس

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

عيوب أجاكس

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

مثال على كود ajax

فيما يلي بعض أمثلة التعليمات البرمجية لأمثلة ajax لتتمكن من التحقق منها معًا.

إرسال الرمز المكون من 4 أرقام وكيفية طلبه من الخادم

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

<script>

function sendcode(){
    mobile=$('.form-account #mobile').val();
    url=$('#code_send' ).attr('data-url');
    if (mobile.length != 11)
    {
        تنبيه ("يجب أن يتكون رقم الاتصال من 11 رقمًا;
    }else {
        $.ajax({
            type: 'GET',
            url: url + '/' + mobile,
            success: function(data) {
                $('#code_send').toggleClass("d-none");
                $('#code_input').toggleClass("d-none");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(JSON.parse(xhr.responseText));
            }
        });
    }
}

تحميل الصور في اجاكس

في المثال التالي، نريد عرض صورة قبل تحميل المحتوى (على سبيل المثال، يرجى الانتظار وما إلى ذلك).

في هذا الكود، إذا كان رمز حالة الطلب يساوي 250، فسيتم عرض الصورة المطلوبة، أما إذا كان هناك تناقض، فسيتم عرض صورة Gif الموضحة في حالة آخر.

<script>
 
function Load(){
 const MyRequest = new XMLHttpRequest();
 var Result = document.getElementById("Result");
 
 MyRequest.onreadystatechange = function(){
  if ( this.readyState == 4 && this.status == 250 ) {
   Result.innerHTML = this.responseText;
  }else{
   Result.innerHTML = "<div><img src='img/loading.gif' width='50'></div>";
  }
 };
 
 MyRequest.open("GET", "files/myfile-1.html");
 MyRequest.send();
}
 
</script>

إرسال بيانات النموذج (الاسم والبريد الإلكتروني) إلى الخادم باستخدام طريقة GET في Ajax

في هذا الجزء من التعليمات البرمجية، يجب إدخال معلومات النموذج ليتم إرسالها كطريقة Get. في طريقة Get، تتم إضافة المعلومات المدخلة إلى نهاية عنوان URL وإرسالها إلى العنوان المطلوب.

أما إذا كانت المعلومات المدخلة غير صحيحة، فسوف تظهر للمستخدم مع رسائل خطأ محددة.

<script>
 
function MyLoad(){
 const xhttp = new XMLHttpRequest();
 var userName = document.getElementById("UserName").value;
 var userEmail = document.getElementById("UserEmail").value;
 var result = document.getElementById("Result");
 
 if( userName == "" && userEmail == "" ){
  result.innerHTML = "لن تتمكن من الإدخال إلا إذا قمت بإدخال المعلومات الصحيحة !!!";
 }else if( userName == "" || userEmail == "" ){
  result.innerHTML = "الرجاء إكمال العناصر الضرورية";
 }else{
 xhttp.onload = function(){
 result.innerHTML = this.responseText;
 }
 xhttp.open("GET", "files/get_4.php?UserName="+userName+"&UserEmail="+userEmail+"");
 xhttp.send();
 }
}
 
</script>

إرسال بيانات النموذج (الاسم والبريد الإلكتروني) إلى الخادم باستخدام طريقة POST في Ajax

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

أما إذا كانت المعلومات المدخلة غير صحيحة، فسوف تظهر للمستخدم مع رسائل خطأ محددة.

<script>
 
function MyLoad(){
 const xhttp = new XMLHttpRequest();
 var userName = document.getElementById("UserName").value;
 var userEmail = document.getElementById("UserEmail").value;
 var result = document.getElementById("Result");
 
 if( userName == "" && userEmail == "" ){
  result.innerHTML = "لن تتمكن من الإدخال إلا إذا قمت بإدخال المعلومات الصحيحة !!!";
 }else if( userName == "" || userEmail == "" ){
  result.innerHTML = "الرجاء إكمال العناصر الضرورية";
 }else{
 xhttp.onload = function(){
 result.innerHTML = this.responseText;
 }
 xhttp.open("POST", "files/get_5.php");
 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhttp.send("UserName="+userName+"&UserEmail="+userEmail+"");
 }
}
 
</script>

مسار التعلم ajax

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

• تعلم HTML وCSS أمر ضروري.
• يجب أن يكون لديك إتقان نسبي للغة برمجة JavaScript.
• قبل أن تبدأ في تعلم الأجاكس، قم ببعض الأبحاث حول الأجاكس.
• البدء في التعلم وتعلم المفاهيم
• لا شيء يساعدك على تعلم المفاهيم أفضل من الممارسة، وهذه الممارسة رائعة إذا كانت قائمة على المشروع.
• تعلم بعض Jquery للعمل المتقدم.

كلمة أخيرة

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

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