jQuery Academy · درس

‏AJAX عبر النطاقات (CORS/JSONP)

افهم تقنيات إجراء طلبات AJAX عبر النطاقات وطبّقها باستخدام JSONP أو تهيئة ترويسات CORS على الخادم لتبادل البيانات بأمان.

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

AJAX عبر النطاقات: التحدي

عندما يحاول موقعك جلب بيانات من موقع آخر، يُسمى ذلك طلب AJAX عبر النطاقات. وغالبًا ما يكون هذا الأمر معقدًا!

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

فهم سياسة المصدر نفسه

تُسمى القاعدة الأمنية التي ذكرناها للتو سياسة المصدر نفسه (SOP). وهي إحدى ميزات أمان المتصفح الأساسية.

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

مثال: لا يمكن لصفحة من mywebsite.com جلب البيانات مباشرةً من api.anotherdomain.com.

CORS: حل حديث

للسماح بأمان بالطلبات عبر النطاقات، طوّر مجتمع الويب تقنية مشاركة الموارد عبر المصادر (CORS). وهي الطريقة الحديثة والمعيارية للتعامل مع ذلك.

تعمل CORS عبر السماح للخادم بإبلاغ المتصفح صراحةً بأن وصول نطاقات أخرى معينة إلى موارده مسموح به.

CORS: الإعداد من جهة الخادم

يُضبط CORS بشكل أساسي على الخادم الذي يوفر البيانات. ويرسل الخادم ترويسات HTTP خاصة في استجابته لتحديد المصادر المسموح بها.

الترويسة الأساسية هي Access-Control-Allow-Origin. وهي تحدد النطاقات التي يمكنها الوصول إلى المورد.

Access-Control-Allow-Origin: * (يسمح بأي نطاق)
Access-Control-Allow-Origin: https://yourdomain.com (يسمح بنطاق محدد فقط)

CORS: طلبات العميل باستخدام jQuery

من جهة العميل (باستخدام jQuery)، لا يختلف إنشاء طلب CORS غالبًا عن إنشاء طلب AJAX عادي، بشرط إعداد الخادم بشكل صحيح.

تتولى jQuery اتصالات مستوى المتصفح. وما عليك سوى توجيه استدعاء $.ajax() إلى عنوان URL عبر النطاقات.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: طلبات ما قبل الإرسال (OPTIONS)

بالنسبة إلى بعض طلبات CORS "المعقدة"، تنفذ المتصفحات طلب ما قبل الإرسال قبل إرسال الطلب الفعلي. وهذه خطوة أمان إضافية.

يستخدم طلب ما قبل الإرسال أسلوب HTTP ‏OPTIONS لطلب الإذن من الخادم. فإذا منحه الخادم، يرسل المتصفح الطلب الفعلي بعد ذلك (مثل PUT أو DELETE أو الطلبات التي تتضمن ترويسات مخصصة).

JSONP: بديل أقدم

قبل انتشار CORS على نطاق واسع، كان JSONP (JSON with Padding) حلًا شائعًا للتغلب على مشكلة الطلبات عبر النطاقات، خصوصًا في المتصفحات أو واجهات API الأقدم.

يتجاوز JSONP سياسة المصدر نفسه باستخدام سماح المتصفح بتحميل وسوم <script> من أي نطاق بطريقة مبتكرة.

JSONP: آلية العمل

إليك كيفية عمل JSONP:

تنشئ وسم <script> ديناميكيًا وتعيّن قيمة src فيه إلى عنوان URL عبر النطاقات.
يلف الخادم، الذي يتوقع طلب JSONP، بيانات JSON في استدعاء دالة (وهو ما يُسمى "التغليف").
ينفذ المتصفح هذا النص البرمجي، فيستدعي دالة معرّفة عالميًا في صفحتك، ويمرر البيانات كوسيط لها.

JSONP: التنفيذ باستخدام jQuery

تبسّط jQuery تنفيذ JSONP بدرجة كبيرة. فما عليك سوى تحديد dataType: "jsonp" في استدعاء $.ajax().

تتولى jQuery تلقائيًا إنشاء وسم <script> الديناميكي، وإنشاء اسم فريد لدالة الاستدعاء، وتنفيذها عند وصول الاستجابة.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS مقابل JSONP: الفروقات الأساسية

رغم أن كلتيهما تعالجان مشكلات الطلبات عبر النطاقات، فإن لـ CORS وJSONP خصائص مختلفة:

CORS: معيار حديث، يستخدم ترويسات HTTP، وآمن، ويدعم جميع أساليب HTTP، ويتطلب إعدادًا من جهة الخادم.
JSONP: حل أقدم، يستخدم وسوم <script>، وأقل أمانًا، ويدعم طلبات GET فقط، ويُنفذ من جهة العميل، ويتطلب من الخادم تغليف الاستجابة.

تحقق سريع: الطلبات عبر النطاقات

أي العبارات التالية صحيحة بشأن طلبات AJAX عبر النطاقات؟

مراجعة: إتقان الطلبات عبر النطاقات

لقد تعلمت كيفية تجاوز سياسة المصدر نفسه عند إجراء طلبات AJAX عبر النطاقات!

CORS هو المعيار الحديث والآمن، ويعتمد على ترويسات HTTP من جهة الخادم لمنح الإذن.
JSONP حل أقدم وأقل أمانًا لطلبات GET، ويستخدم وسوم <script> الديناميكية.

فضّل CORS دائمًا متى أمكن، لأنه أكثر أمانًا ومرونة. ويُستخدم JSONP أساسًا مع الأنظمة القديمة أو في حالات محددة.

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

هل درس «‏AJAX عبر النطاقات (CORS/JSONP)» مجاني؟

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

ماذا ستتعلم في «‏AJAX عبر النطاقات (CORS/JSONP)»؟

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

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

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

كم من الوقت يستغرق درس «‏AJAX عبر النطاقات (CORS/JSONP)»؟

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

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

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

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

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