دليل JSONP

Jsonp (JSON مع الملء) هو "نمط استخدامه" من JSON، يتيح للصفحة الحصول على بيانات من اسماء مجالات أخرى (مواقع) أخرى، أي قراءة بيانات عبر الحدود.

ما هو JSONP؟

JSONP هو JSON محمل بالملء.

قد يؤدي طلب ملف من مجال آخر إلى مشكلة بسبب سياسة التبادل عبر الحدود.

لا يظهر هذا المشكلة عند طلب سكربت من مجال آخر.

يستغل JSONP هذا الميزة ويستخدم<script>استخدام تسمية النص بدلاً من Object XMLHttpRequest لطلب الملف.

　　<script src="jsonp_demo.php">

ملف على الخادم (jsonp_demo.php) يغلف النتيجة داخل استدعاء الدالة:

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc(".$myJSON.");";
　　?>

المعادلة "myFunc" الموجودة على الجهاز العميل قادرة على معالجة بيانات JSON:

function myFunc(myObj) {
　　document.getElementById("output").innerHTML = myObj.name;
}

الفرق بين JSON و JSONP

JSON: يستخدم JavaScript JSON (مثال JavaScript Object Notation) للتبادل البيانات عبر الشبكة. يتحقق JavaScript من بيانات JSON، وهي مجرد نص من نموذج JavaScript Object.

　　{"name":"Seagull", "age":22, "city":"New Delhi"}

JSONP: JSONP هو JSON مملوء. في هذا السياق، يعني المملوء وضع الدالة في JSON ثم إرجاعها إلى الطلب.

　　myFunc({ "name":"Seagull", "age":22, "city":"New Delhi" })

طرق استخدام JSONP

• في رمز HTML، شامل علامة script. سيكون مصدر العلامة script هو URL الذي سيتم استخراج البيانات منه. يسمح الخدمة Web بتحديد دالة المراجعة. في URL، سيكون هناك معامل callback في النهاية.

• عندما يواجه المتصفح عنصر script، سيقوم بإرسال طلب HTTP إلى URL المصدر.

• سيستخدم الخادم JSON المرسل م封装 في استدعاء دالة لاستعادة الاستجابة.

• سيقوم المتصفح بتحليل الاستجابة JSON المكتوبة كشريط نصي وتحويلها إلى عنصر JavaScript. سيتم استدعاء الدالة المراجعة، وسيتم نقل العنصر المولد إليها.

إنشاء علامة script ديناميكية

في هذا المثال، سيتم تنفيذ وظيفة "myFunc" عند تحميل الصفحة بناءً على موقع علامة script الموضوعة.

ولكن يجب إنشاء علامة script فقط عند الحاجة.

في هذا المثال، سيتم إنشاء وإدراج<script>علامة:

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}