ما هو JSONP؟

ما هو JSONP، ما هو JSONP، كيف يتم استخدام JSONP؟

أولاً يجب أن نعرف

1. المبدأ الأساسي لـ JSONP هو أن الصفحة المستهدفة تستدعي طريقة الصفحة المحلية وتدخل المعلمات.
2. الصفحات الديناميكية التي نستخدمها عادة هي jsp و php و aspx.

لماذا نحتاج إلى JSONP؟

نظرًا لقيود أمان المتصفح، لا يمكن طلب البيانات مباشرة عبر المجالات (بما في ذلك أسماء النطاقات الجذرية المختلفة، أو أسماء النطاقات الفرعية، أو المنافذ المختلفة) ما لم يكن اسم النطاق المستهدف قد منحك الإذن بالوصول. على سبيل المثال، من خلال إعداد crossdomain.xml أو من خلال منح الإذن في رأس HTTP.

لكن crossdomain.xml سيسمح للمواقع المحددة بالوصول إلى جميع البيانات، بينما إعدادات الرأس تكون معقدة جداً.

لذا يمكنك ضبط jsonp في بيانات الإرجاع المصرح بها لديك للسماح لجميع المتصلين بالحصول على البيانات من هذه الواجهة.

مبدأ JSONP

jsonp هو مبدأ استخدام ردود الاستدعاء.

في صفحة الويب، إذا قمت بإدراج js من صفحات ويب أخرى، فإن js في هذه الصفحة يمكنه استدعاء كود صفحتك.

الطلبات المباشرة لـ js ونتائج التعليمات البرمجية javascript التي يتم إخراجها من الصفحات الديناميكية (jsp، php، aspx) لها نفس التأثير.

function showjson(json){
    alert(json.url);
}

如果引用的js或动态页面里有 showjson({"url":" http://www.bejson.com "});这行代码的话,那就会弹出 http://www.bejson.com

الطريقة الأولى لـ jsonp هي تحميل الهدف بشكل جافا سكريبت، على الرغم من أن الطرف الآخر هو في الواقع PHP.

سنقوم بطلب ذلك في هذه الصفحة. http://www.ibilibili.com/static/js/forbejson/userinfo.php بيانات الصفحة، ستحتوي هذه الصفحة php على دالة رد نداء showjson، لاستدعاء دالة showjson الموجودة في صفحتنا bejson وتمرير json إليها:

< ?php 
    // هنا في صفحة PHP، يتم استدعاء دالة showjson، ويجب أن تتطابق هذه الدالة مع دالة الاستدعاء المعرفة في الصفحة المحلية أعلاه.
    echo 'showjson({"url":"http://www.bejson.com"})';
?>

طلب دالة استدعاء في PHP:

$("#getuserp").click(function(){
    $.getScript("//www.bejson.com/test/userinfop.php");
});

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

طلبت www.bejson.com/test/userinfop.php صفحة،

页面里输出了 showjson({"url":" http://www.bejson.com "}) ,

لأنها تُعتبر بـ تحميله على شكل ملف جافا سكريبت لذلك سيقوم بإجراء استدعاء لصفحة showjson المحلية (انظر السهم الأخضر) وسيمرر معلمات json (انظر السهم الأحمر)، وبالتالي ستظهر عنوان url الموجود في json.

استخدام ajax من jQuery لطلب jsonp مباشرة

شكراً قرع حدد خطأ في الكود وقدم الكود الصحيح.

​x
 $.ajax({
     url:'//www.bejson.com/test/userinfop.php',
     type:"GET",
            dataType:"jsonp",
            jsonp: false, 
            jsonpCallback: "showjson", // يجب أن تكون القيمة هنا مماثلة لاسم دالة الاستدعاء.
            success:function(data){
                console.log("Script loaded and executed.");
            },
            error:function (textStatus) { //الدالة التي تُستدعى بعد فشل الطلب
                console.log(JSON.stringify(textStatus));
            }
});