jQuery Academy · درس

تهيئة طلبات AJAX بفعالية

استكشف الخيارات الشاملة لـ .ajax()، بما في ذلك أنواع البيانات والترويسات والتخزين المؤقت والمهلات، لضبط طلباتك غير المتزامنة بدقة وفق سيناريوهات مختلفة.

الدرس 1 من 311 خطوة

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

أطلقوا العنان لقوة .ajax()

تُعد الدالة $.ajax() في jQuery خياركم الأساسي لإجراء طلبات HTTP مع تحكم كامل. وعلى خلاف الأساليب الأبسط مثل $.get() أو $.post()، تتيح لكم $.ajax() ضبط كل جانب من جوانب الطلب بدقة.

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

البنية الأساسية لـ .ajax()

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

إليكم كيفية جلب البيانات من واجهة برمجة تطبيقات:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

عنوان URL والطريقة (type)

يحدد الخيار url نقطة النهاية الخاصة بطلبكم. ويحدد الخيار type (أو method في إصدارات jQuery الأحدث) طريقة HTTP، مثل GET أو POST أو PUT أو DELETE.

url: عنوان URL المستهدف للطلب.
type: طريقة HTTP (مثل "GET" و"POST").

$.ajax({
  url: "/api/users",
  type: "POST"
});

إرسال البيانات باستخدام `data`

استخدموا الخيار data لإرسال معلومات مع طلبكم. وبالنسبة إلى طلبات GET، تُضاف البيانات إلى عنوان URL بوصفها معلمات استعلام. أما في طلبات POST، فتُرسل في جسم الطلب.

يمكنكم تمرير كائن عادي، وسيتولى jQuery تحويله إلى سلسلة بالنيابة عنكم.

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

الاستجابة المتوقعة: `dataType`

يخبر الخيار dataType jQuery بنوع البيانات التي تتوقعون استلامها من الخادم (مثل "json" و"xml" و"html" و"text"). ويساعد ذلك jQuery على تحليل الاستجابة بشكل صحيح.

إذا لم تحددوه، يحاول jQuery استنتاجه من نوع MIME الخاص بالاستجابة.

$.ajax({
  url: "/api/products",
  dataType: "json"
});

رؤوس مخصصة: `headers`

يتيح لكم الخيار headers تعيين رؤوس HTTP مخصصة لطلبكم. وهذا ضروري لمهام مثل المصادقة (كإرسال مفتاح API) أو تحديد أنواع المحتوى.

مرّروا كائنًا تكون مفاتيحه أسماء الرؤوس وقيمه محتوياتها.

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

التحكم في التخزين المؤقت: `cache`

غالبًا ما تخزّن المتصفحات طلبات GET مؤقتًا لتسريع عمليات التحميل اللاحقة. ورغم فائدة ذلك، قد تحتاجون أحيانًا إلى بيانات جديدة في كل مرة.

عيّنوا cache: false لمنع المتصفح من تخزين الاستجابة مؤقتًا، وضمان أن يجلب طلبكم أحدث المعلومات من الخادم دائمًا.

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

حدود الطلب: `timeout`

يمكن أن تؤثر الطلبات طويلة التنفيذ سلبًا في تجربة المستخدم. يتيح لكم الخيار timeout تحديد حد أقصى للوقت (بالملي ثانية) لإكمال الطلب.

إذا لم يكتمل الطلب خلال هذه المدة، فسيُلغى، مما يؤدي إلى تشغيل دالة الاستدعاء اللاحق .fail().

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

تطبيق مباشر: إعداد AJAX متقدم

لنرَ مثالًا شاملًا يجمع عدة خيارات من $.ajax(). يجلب هذا الطلب عنصر مهام، ويحدد أن الاستجابة المتوقعة بصيغة JSON، ويضيف رأسًا مخصصًا، ويعطّل التخزين المؤقت، ويعيّن مهلة زمنية.

جرّبوا تشغيله لتروا كيف تُحدّث فقرة الإخراج!

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

اختبار إعداد AJAX

تخيلوا أنكم تبنون ميزة لإرسال تعليق مستخدم جديد إلى /api/comments. يجب أن يكون هذا طلب POST، وأن يتضمن commentText وuserId، وأن يتوقع استلام كائن JSON. ولضمان بقاء التعليق محدثًا دائمًا، تريدون أيضًا منع التخزين المؤقت في المتصفح.

أي خيارات $.ajax() التالية ضرورية لهذا السيناريو تحديدًا؟

أجب عليها في الدرس التفاعلي

مراجعة: إتقان إعداد AJAX

لقد أتقنتم فن إعداد الدالة $.ajax() في jQuery!

تعلمتم تحديد url وtype الخاص بـ HTTP.
كيفية إرسال البيانات باستخدام الخيار data.
تحديد تنسيق الاستجابة المتوقعة باستخدام dataType.
إضافة رؤوس HTTP مخصصة headers لحالات الاستخدام المتقدمة.
التحكم في التخزين المؤقت للمتصفح باستخدام cache.
تعيين حدود للطلبات البطيئة باستخدام timeout.

تمكّنكم هذه الخيارات القوية من بناء تفاعلات غير متزامنة مخصصة وموثوقة بدرجة كبيرة في تطبيقات الويب الخاصة بكم.

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 22
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «تهيئة طلبات AJAX بفعالية» مجاني؟

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

ماذا ستتعلم في «تهيئة طلبات AJAX بفعالية»؟

استكشف الخيارات الشاملة لـ .ajax()، بما في ذلك أنواع البيانات والترويسات والتخزين المؤقت والمهلات، لضبط طلباتك غير المتزامنة بدقة وفق سيناريوهات مختلفة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «تهيئة طلبات AJAX بفعالية»؟

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

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

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

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

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