عند مواجهة مشاكل عبر المجال في تطوير المشروع ، يتم حلها عمومًا من خلال JSONP. ولكن ما هو JSONP وما هو مبدأ التنفيذ. يمكنك دراستها بعناية خلال وقت فراغ المشروع.
1. ما هو JSONP؟
لفهم JSONP ، يجب أن أذكر JSON ، فما هو JSON؟
JSON هي مجموعة فرعية من التدوين الحرفي الكائن لجافا سكريبت. نظرًا لأن JSON هي مجموعة فرعية من JavaScript ، يمكن استخدامها في اللغة دون أي ضجة أو ضجة.
JSONP (JSON مع PADDING) هو بروتوكول غير رسمي يسمح بدمج علامات البرنامج النصي على جانب الخادم بالعودة إلى العميل ، ويتم تحقيق الوصول عبر المجال من خلال شكل رد اتصال JavaScript (وهذا مجرد تطبيق بسيط لـ JSONP).
2. ما هو استخدام JSONP؟
نظرًا لقيود سياسة الأصل من نفس ، فإن XMLHTTPrequest يسمح فقط بموارد المصدر الحالي (اسم المجال ، البروتوكول ، المنفذ). من أجل تنفيذ طلبات المجال المتقاطع ، يمكن تنفيذ طلبات المجال المتقاطع من خلال علامات البرنامج النصي ، ثم إخراج بيانات JSON على الخادم وتنفيذ وظائف رد الاتصال ، وبالتالي حل طلبات بيانات المجال المتقاطع.
جيل JSONP
1. كما نعلم جميعًا ، يتم تقييد موارد طلب AJAX من خلال نفس المجال ، سواء كانت موارد ثابتة أو صفحات ديناميكية أو خدمات الويب.
2. في الوقت نفسه ، وجدنا أنه عند استدعاء ملفات JS على صفحة الويب ، لا تتأثر بالمجال المتقاطع (ليس فقط ، لقد وجدنا أيضًا أن جميع العلامات التي تحتوي على السمة "src" لها قدرات عبر المجال ، مثل <script> ، <img> ، <frame> ، إلخ).
3. يمكن تخيل أنه في الوقت الحاضر ، إذا كنت ترغب في الوصول إلى البيانات عبر المجالات عبر الويب (عناصر التحكم ActiveX ، وكلاء الخادم ، و Websockets HTML5 ، وما إلى ذلك) ، فهناك احتمال واحد فقط ، أي أن الخادم سيقوم بتحميل البيانات إلى ملف تنسيق JS للعميل للاتصال والمعالجة
4. نقل البيانات. نحن نعلم أن تنسيق بيانات الأحرف النقي المسمى JSON يمكنه وصف هياكل البيانات المعقدة بإيجاز ، كما أنه يدعمه JS. يمكنه بسهولة معالجة البيانات في هذا التنسيق على العميل.
5. الحل واضح في لمحة. يستدعي جانب الويب ملفات JS التي تم إنشاؤها ديناميكيًا على خادم المجال المتقاطع بنفس طريقة برنامج الاتصال. السبب في أن الخادم يرغب في إنشاء ملفات JS بشكل ديناميكي هو الحصول على اسم وظيفة رد الاتصال الخاص بالعميل وتمرير البيانات المطلوبة من قبل العميل إلى تنسيق JSON (أو السلسلة النقية).
6. بعد أن نجح العميل في استدعاء ملف JS ، يتم الحصول على المعلمات في وظيفة رد الاتصال. الباقي هو معالجة البيانات. تبدو هذه الطريقة مشابهة جدًا لـ Ajax ، لكنها ليست هي نفسها (JQuery تغلف JSONP و Ajax معًا ، وإذا كنت لا تفهم ، فسوف تخلط بينها)
7. من أجل تسهيل العميل لاستخدام البيانات ، تم تشكيل بروتوكول نقل غير رسمي تدريجياً. الناس يطلقون عليه jsonp. تتمثل إحدى النقاط الرئيسية لهذا البروتوكول في السماح للمستخدمين بتمرير معلمة رد الاتصال إلى الخادم. عندما يقوم الخادم بإرجاع البيانات ، سيتم استخدام معلمة رد الاتصال كاسم دالة للف بيانات JSON ، بحيث يمكن للعميل تخصيص وظائفه الخاصة لمعالجة بيانات الإرجاع تلقائيًا.
حسنًا ، لا أعرف ما إذا كنت تفهم JSONP. إذا لم يكن الأمر كذلك ، فسوف ألخص ذلك. إذا لم يكن لديك ذلك ، فلا تضربني.
في الواقع ، فإن المبدأ هو أن العميل يطلب رابطًا ويضيف المعلمات المطلوبة. رد الاتصال يعني أنه طلب JSONP (الواجهة الأمامية والخلفية الخلفية يمكن توحيدها من تلقاء نفسها). الخلفية تخيل رابط الطلب وتجد أنه طلب JSONP. ثم يقوم بإنشاء طريقة استدعاء ، ويقوم بإنشاء سلسلة ديناميكيًا (يمكن أن تكون JSON أو سلسلة خالصة) وفقًا لمعلمات الطلب. وبهذه الطريقة ، يمكن للعميل الوصول إلى البيانات وإجراء المعالجة اللاحقة.
بعد قوله كثيرًا ، ليس أسلوبي عدم إضافة رمز ، أقوم بإضافة رمز. .
اختبار الوظيفة (البيانات) {console.log (data)} var url = "http://www.x.com/test؟a=1&callback=test" // تمرير المعلمة قيمة من 1 إلى x.com/test ، وأخبره أن اسم الوظيفة المطلوب هو "اختبار" // الخلفية Intercepts the backback. تقوم معالجة الخلفية بإنشاء اختبار الاختبار التالي (البيانات الوهمية) ("AAAAAA") ({a: 1 ، b: 2}) document.getElementsByTagName ('head') [0] .appendChild (script) ؛ // ثم سيتم استدعاء طريقة اختبار الصفحة ، وهو مبدأ التنفيذ لـ JSONP.عن واقع JSONP في jQuery
$ .ajax ({type: "get" ، url: "http: //xdcn/asych/adv.html؟ loc = 8 & callback =؟" ، // أخبر الخلفية أن هذا هو طلب JSONP ، ما هي الطريقة التي يجب أن تسمى؟ تم تشغيله على النجاح) النوع: "post" ، // jsonp يمكنه إرسال طلبات الحصول فقط ، حتى لو قمت بتعيين نوع الطلب على postdatatype: "jsonp" ، // أخبر jQuery أن هذه بيانات JSONP ، فأنت بحاجة إلى إنشاء علامات نصية لتحميل jsdata: "؟") $ ("body"). إلحاق (بيانات) ؛} ،*/خطأ: الدالة (xmlhttprequest ، textStatus ، errorthRown) {//alert(errorthrown) ؛} )).done(function(data) {$((body") senmend () ؛بعد قراءة الكود والتعليقات أعلاه ، أعتقد أن الجميع يفهمها. على الرغم من أن jQuery يغلف JSONP في Ajax ، إلا أنه مختلف بشكل أساسي.
يتمثل جوهر AJAX في الحصول على محتويات أخرى غير هذه الصفحة من خلال XMLHTTPREQUEST ، في حين أن جوهر JSONP هو إضافة علامات <script> ديناميكيًا للاتصال بنصوص JS التي يوفرها الخادم.
لذلك ، فإن الفرق بين Ajax و JSONP ليس ما إذا كان المقطع العرضي. يمكن لـ AJAX أيضًا تحقيق مجال متقاطع من خلال الوكيل من جانب الخادم ، ولا يستبعد JSONP نفسها عملية الاستحواذ على البيانات في نفس المجال.
كما ذكر أعلاه ، لا يجب أن تكون تنسيقات البيانات من JSONP و AJAX JSON ، ولكن يمكن أن تكون أيضًا سلاسلًا نقية.
باختصار ، JSONP ليست مجموعة فرعية من AJAX ، وحتى إذا كان JQuery يلف JSONP في AJAX ، فإنه لا يمكن تغيير هذا.
ما ورد أعلاه هو شرح مفصل لمثال طلب المجال المتقاطع من JS JSOP المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!