jQuery Academy · درس

معالجة أخطاء AJAX ونجاحها

طبّق آليات متينة لمعالجة الأخطاء باستخدام دوال الاستدعاء .fail() و.always()، وعالج استرداد البيانات الناجح باستخدام .done() لإنشاء تطبيقات مرنة.

معالجة أخطاء AJAX ونجاحها درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

التعامل مع نتائج العمليات غير المتزامنة

عند إجراء طلب AJAX، تكون العملية غير متزامنة. وهذا يعني أن التعليمات البرمجية لا تنتظر استجابة الخادم، بل تواصل تنفيذ المهام الأخرى.

للتعامل مع رد الخادم (أو عدم وروده)، توفر jQuery أساليب خاصة تُسمى عمليات الاستدعاء. ولا تُنفَّذ هذه الدوال إلا عند وقوع أحداث معينة، مثل النجاح أو الفشل.

عندما تسير الأمور على ما يرام

يُعد استدعاء .done() خيارك الأساسي للتعامل مع طلبات AJAX الناجحة. ويُنفَّذ عندما يستجيب الخادم برمز حالة يشير إلى النجاح (عادةً من 200 إلى 299).

يتلقى البيانات التي يعيدها الخادم.
وهو المكان المثالي لتحديث واجهة المستخدم بالمعلومات الجديدة.

عرض البيانات الناجحة

لنجلب بعض البيانات ونعرضها عند نجاح الطلب. لاحظ كيفية ربط .done() باستدعاء $.ajax().

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data received:");
    console.log(data.title); // Access a property
    $('body').append('<p>Post Title: ' + data.title + '</p>');
  });
});

عندما تسوء الأمور

لكن ماذا لو تعذّر على الخادم تلبية طلبك؟ هنا يأتي دور استدعاء .fail(). فهو يُنفَّذ عندما يواجه طلب AJAX خطأً، مثل 404 (غير موجود) أو 500 (خطأ في الخادم).

يساعدك على إبلاغ المستخدم أو تسجيل المشكلات.
يتلقى تفاصيل الخطأ.

الاستجابة لحالات الفشل

لنجرب الجلب من عنوان URL غير موجود. سيلتقط استدعاء .fail() الخطأ ويسجل تفاصيله.

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
    method: "GET"
  })
  .done(function(data) {
    console.log("This won't run on error.");
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error! Status: " + textStatus);
    console.log("HTTP Error: " + errorThrown);
    $('body').append('<p>Error fetching data!</p>');
    $('body').append('<p>Status: ' + textStatus + '</p>');
  });
});

فهم معلمات الخطأ

يوفر استدعاء .fail() ثلاث معلمات مفيدة لمساعدتك على فهم ما حدث من خطأ:

jqXHR: كائن jQuery XMLHttpRequest، ويوفر تفاصيل منخفضة المستوى.
textStatus: سلسلة نصية تصف نوع الخطأ (مثل "timeout" أو "error" أو "abort").
errorThrown: نص حالة HTTP (مثل "Not Found" لخطأ 404).

استخدم هذه المعلمات لتقديم ملاحظات محددة إلى المستخدمين.

يُنفَّذ دائمًا، مهما كانت النتيجة

قد تحتاج أحيانًا إلى تنفيذ إجراء بصرف النظر عن نجاح طلب AJAX أو فشله. وهذه هي مهمة استدعاء .always().

يُنفَّذ دائمًا بعد أيٍّ من .done() أو .fail().
وهو مناسب جدًا لمهام التنظيف، مثل إخفاء مؤشر التحميل أو إعادة تفعيل زر.

تنفيذ مهام التنظيف

لنضف .always() إلى المثال السابق. سنحاكي حالة التحميل ونتأكد من إزالتها سواء نجح الطلب أم فشل.

$(document).ready(function() {
  $('body').append('<p id="status">Loading data...</p>'); // Simulate loading
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data: " + data.title);
    $('#status').text('Data loaded successfully!');
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Failed! " + textStatus);
    $('#status').text('Failed to load data!');
  })
  .always(function() {
    console.log("Request finished (success or failure).");
    // This could be where you hide a spinner or re-enable a button
    $('#status').append(' (Finished)');
  });
});

تنظيم عمليات الاستدعاء

تعيد أساليب AJAX في jQuery كائنًا شبيهًا بالوعد، ما يتيح لك ربط أساليب .done() و.fail() و.always() مباشرةً.

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

اختبر معلوماتك

تأمل طلب jQuery AJAX التالي:


$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

إذا استجاب الخادم بخطأ 404 Not Found، فما الذي سيُطبع في وحدة التحكم؟

تلخيص التعامل مع AJAX

لقد أتقنت عمليات الاستدعاء الأساسية اللازمة للتعامل المتين مع AJAX:

.done(): للاستجابات الناجحة.
.fail(): للتعامل مع الأخطاء.
.always(): للإجراءات التي يجب تنفيذها مهما كانت النتيجة.

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

الأسئلة الشائعة

هل درس «معالجة أخطاء AJAX ونجاحها» مجاني؟

نعم — نص درس «معالجة أخطاء AJAX ونجاحها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «معالجة أخطاء AJAX ونجاحها»؟

طبّق آليات متينة لمعالجة الأخطاء باستخدام دوال الاستدعاء .fail() و.always()، وعالج استرداد البيانات الناجح باستخدام .done() لإنشاء تطبيقات مرنة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «معالجة أخطاء AJAX ونجاحها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy