شرح مفصل لمفهوم التبادل عبر الحدود في Javascript

ملخص معرفة عبر النطاق JS

قبل أن يبدأ استخدام كلمة " عبر النطاق " بشكل متكرر، كنا بالفعل نستخدمها بشكل متكرر. مثل src لـ img في موقع A، يشير إلى عنوان صورة في موقع B، لا شك في أن هذا يمكن أن يُعرض بشكل طبيعي في معظم الحالات (ولا يهم تقنية الحماية من السرقة)； بالإضافة إلى ذلك، يمكن استخدام خاصية src لـ script لتحديد موارد سكربت من موقع آخر (في بعض الحالات حتى تشجع على القيام بذلك، للاستفادة من ميزات تحميل مواقع أخرى، وتقليل عدد التزامات خادمك). ومع ذلك، إذا كنت تستخدم js لطلب بيانات من موقع آخر، مثل طريقة Ajax، فإنك ستواجه مشكلة عبر النطاق المزعجة، وهي ما نسميه عبر النطاق عادةً. بسبب الأسباب الأمنية، يتم منع الوصول عبر النطاق بشكل افتراضي من قبل جميع المتصفحات. هنا يتعلق الأمر بمفهوم سياسة المصادر: تمنع سياسة المصادر من تمكين سكربت من نطاق معين من الحصول أو التلاعب بأحداث نطاق آخر. أي أن يجب أن يكون نطاق URL المطلوب طلبًا نفسه كنطاق صفحة الويب الحالية. هذا يعني أن المتصفح يمنع المحتوى من مصادر مختلفة من التعامل بين بعضها البعض.

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

ومع ذلك، في العديد من الحالات، خاصة في ظل تطور الإنترنت المستمر اليوم، نحتاج إلى طلب واجهات البرمجة الأمامية من مختلف شركاء أو مزودي البيانات، قبل أن يتم تنظيم طريقة الوصول عبر النطاق (يبدو أن طلبات الوصول عبر النطاق في الجانب العميل قد لفتت انتباه w3c، وقالوا إن بروتوكول WebSocket في html5 يدعم تبادل البيانات عبر النطاق، ويجب أن يكون حلًا اختياريًا للتبادل عبر النطاق في المستقبل)، ما هي الطرق التي يمكننا من خلالها تجاوز هذه القيود؟ هناك العديد من الإجابات (على الرغم من أنها معقدة)، والأكثر شيوعًا هي ما يُسمى JSONP عبر النطاق.

مبدأ JSONP

أصلية JSONP تعتمد على: إضافة علامة <script> بشكل ديناميكي، وليس هناك قيود عبر النطاق على خاصية src لعلامة script. بهذا القول، فإن هذا النوع من طلبات عبر النطاق ليس له علاقة ببروتوكول XmlHttpRequest لـ Ajax.

JSONP هو اختصار لـ JSON with Padding. بسبب قيود سياسة المصادر، يسمح XmlHttpRequest فقط بطلب موارد المصدر الحالي (اسم النطاق، بروتوكول، ميناء). إذا كان علينا إجراء طلبات عبر نطاق، يمكننا استخدام علامة script في html للقيام بطلبات عبر نطاق، ويعود script المطلوب تنفيذه في الاستجابة. هذا النوع من التواصل عبر النطاق يسمى JSONP.

لنأخذ مثالاً بسيطاً:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
  <title>Test Jsonp</title> 
  <script type="text/javascript"> 
      function jsonpCallback(result) 
      { 
      alert(result.msg); 
      } 
    </script> 
  <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script> 
</head> 
<body> 
</body> 
</html>

Briefly describe the principle and process: first register a callback on the client side, then pass the name of the callback to the server (here the client and server agree to pass the key of the query string value as jsonp). At this point, the server generates json data. Then, in the form of JavaScript syntax, generate a function, the name of the function is the parameter passed up jsonp. Finally, the json data is directly placed as an argument in the function, thereby generating a js syntax document and returning it to the client. The client browser parses the script tag and executes the returned JavaScript document, which means that the predefined callback function is executed.

From the above brief description, it can be concluded that: in addition to returning a js code snippet in the form of a function, the server can naturally return all executable js snippets that conform to the specifications.

The disadvantages of JSONP are: it only supports GET requests and does not support other types of HTTP requests such as POST; it only supports cross-domain HTTP requests in this case, and cannot solve the problem of how JavaScript calls are made between two pages in different domains. (There is more below)

jQuery's Jsonp

As mentioned earlier, jsonp is not an ajax request, but jQuery still provides a way to make cross-domain requests consistent with jQuery.ajax:

$.ajax({
  url: 'http://crossdomain.com/jsonServerResponse',
  type: 'GET',
  dataType: 'jsonp',
  jsonp: "callback",
  jsonpCallback: 'functionName',
  success: function (data, textStatus, jqXHR) { }
  //……
});

كما ترون في الأعلى، تم تعيين dataType إلى jsonp لتوضيح أن هذا هو طلب متعدد المسارات، وjsonp هو مفتاح الاسم المحدد مسبقًا لتوصيل دالة الخادم كجزء من سلسلة الاستعلام، أما jsonpCallback فهي اسم الدالة الجسرية في الجافا سكريبت؛ إذا لم يتم تعيين jsonpCallback، فإن jQuery سيقوم بإنشاء اسم دالة عشوائي (سيتم تحميل دالة عالمية في مجال window، عندما يتم إدراج الكود، يتم تنفيذ الدالة، ثم يتم حذفها)، يمكن التنبؤ بأن هذه الدالة العشوائية ستقوم بتشغيل دالة success المذكورة أعلاه. (عند تعيين jsonpCallback يدويًا، لا يمكن التأكد من أن دالة success ستتم استدعاؤها، أو أن jQuery سيبحث عن الدالة المحددة، وسيكون هناك خطأ إذا لم يجده؟ مدونة الكاتب لا تعني، سيتم اختبار ذلك لاحقًا.) بالطبع، قدم jQuery نسخة بسيطة، $.getJSON، لا يمكن أن يتم التطرق إليها الآن.

يجب الانتباه إلى أن المعامل jqXHR في دالة success، في طلبات AJAX، هو الجسم jqXHR الأصلي، ويمكن اعتباره كجسم XMLHttpRequest (تنسيق أو تغليف)، ولكن في طلبات JSONP فهو ليس كذلك، ولا يمكن أن يقدم لنا معلومات كما يقدمها XMLHttpRequest في أفضل حالاته: ينقصه معلومات حالة الطلب في XMLHttpRequest، لذا لا يمكن تحفيز معظم الدوال التابعة مثل error وcomplete (jQuery 1.9.0)، ويكون دالة success التي يمكن تحفيزها تتوقع أن تكون من قبل أحداث تحميل script، وهذا يختلف تمامًا عن ميكانيكية الإعتماد على حالة XMLHttpRequest في AJAX. بعد التجربة، نجد أن zepto الذي يخرج من jQuery (v1.1.3) عند حدوث خطأ في طلبات JSONP، مثل العودة إلى وثيقة js عند رد الرأس 401، يتم تنفيذ دالة error، ولكن المعامل jqXHR في هذه الدالة ليس من النوع jqXHR الأصلي، ولا يمكن من خلاله الحصول على معلومات الرأس الرد، وفي هذه الحالة، نحن فقط نعلم أن هناك خطأ في某个 جزء، ولكن لا نعلم ما هو الخطأ المحدد. في مواقف مشابهة لنقل معلومات مفيدة من خلال الرؤوس الرد، لا يُنصح باستخدام JSONP، يمكن القول أن شروط استخدام JSONP هي: باستثناء الاستثناءات غير المتعلقة بالعمليات التجارية مثل استثناءات مشاكل الشبكة، فإن جميع الاستثناءات التجارية (بشكل عام، جميع الاستثناءات التي تنشأ بين استقبال الطلب من الخادم وإرسال الرد) يجب أن تُرجع مباشرة إلى العميل تحت شكل نتيجة الطلب، مما يسهل تحليل العميل للدالة التابعة.

شكرًا على القراءة، آمل أن يساعدكم هذا، شكرًا لدعمكم لموقعنا!

بالتأكيد، محتوى هذا المقال تم جمعه من الإنترنت، وملكه محفوظ لصاحبه، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت بطرقهم الخاصة، ويحمل هذا الموقع حقوق الملكية ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية المتعلقة بذلك. إذا اكتشفتم أي محتوى مخالف لحقوق النسخ، فنرجو منكم إرسال بريد إلكتروني إلى [email protected] (يرجى استبدال # ب @ عند إرسال البريد الإلكتروني) للإبلاغ، وقدموا الأدلة ذات الصلة، وسيتم حذف المحتوى المزعوم بشكل فوري إذا تم التحقق من صحته.

تعليمية أساسية

أنت قد تحب