JSONP

جیسون لایه دار ( JSON-P) یک الگوی جاوا اسکریپت برای درخواست داده با بارگیری یک برچسب .   این مورد توسط  Bob Ippolito  در سال ۲۰۰۵ ارائه شد. JSONP بدون اینکه مانند ایجکس نگرانی بابت اشتراک منابع متقابل ( cross-domain policy  ) داشته باشد اشتراک گذاری داده ها را امکان پذیر میکند, Jsonp ترکیبی از تابع جاوااسکریپت و جیسون است. بدینشکل که تابع خود را در مکان دیگر مقدار دهی کرده و در آدرس خود فراخوانی و اجرا مینمایید.

عملکرد 
عنصر اچ تی ام‌ال <script> مجاز به اجرای محتوای برگرفته از منابع خارجی است. سرویس های پاسخ داده با داده های JSON  خالص قادر به اشتراک گذاری داده ها در دامنه قبل از تصویب CORS (اشتراک منابع متقابل) نبودند. به عنوان مثال ، یک درخواست به یک سرویس خارجی http://server.example.com/Users/1234 ممکن است یک رکورد برای یک شخص بنام فرضی "پارس" را با فرمت جیسون برگرداند. به‌شکل زیر: 
{
    "Name": "پارس",
    "Id": ۱۲۳۴,
    "Rank": ۷
}

هنگام استفاده از داده ها به‌شکل فوق در دامنه ها منجر به خطای جاوااسکریپت خواهد شد. زیرا جاوا اسکریپت قادر نیست دیتای چیسون را به‌شکل خام  بدون کمک گرفتن از ایجکس از منابع خارجی برگرداند

<script type="application/javascript"
        src="http://server.example.com/Users/1234">
</script>

مرورگر پرونده <script> را بارگیری می کند ، محتوای آن را ارزیابی می کند ، داده های JSON خام را به عنوان یک بلاک تفسیر می کند و خطای نحوی ( syntax ) را برمیگرداند. حتی اگر داده ها به عنوان یک چهارچوب جاوااسکریپت تعبیر شوند ، همچنان نمی توان با جاوااسکریپتی که در مرورگر اجرا می شود ، دسترسی پیدا کرد ، زیرا بدون تعیین تکلیف متغیر ، اعضای شیء غیرقابل دسترس هستند.

در الگوی استفاده JSONP ، درخواست نشانی وب که به صفت src در عنصر <script> اشاره شده است داده های JSON  را بازمی گرداند ، با کد جاوااسکریپت (معمولاً یک تابع) که در اطراف آن پیچیده شده است. این "بار مقدار دهی شده" و سپس توسط مرورگر اجرا می شود. به این ترتیب ، تابعی که قبلاً در محیط جاوااسکریپت تعریف شده است می تواند داده های  را مقدار دهی کند. یک درخواست و پاسخ معمولی JSONP در زیر نشان داده شده است.

اگر این محتوا:parseResponse({"name":"mahmoud", "fname":"mansouri", "age":۳۵, "city":"shiraz", "webSite":"۱mansouri.ir"});

در یک آدرس خارجی قرار داشته باشد به آدرس فرضی:http://server.example.com/Users/1234در هر آدرسی که به آن نیاز است با کمک  صفت src در عنصر <script> فراخوانی گردد. و کافیست تابع parseResponse را ساخته و بتمام مقادیر آن دسترسی داشته باشید. بدون نگرانی بابت اشتراک منابع متقابل (cross-domain policy).

تزریق عنصر اسکریپت 
JSONP  فقط هنگامی که از عنصر اسکریپت استفاده می شود معقول است. برای هر درخواست JSONP جدید ، مرورگر باید یک عنصر <script> جدید اضافه کند ، یا از مورد قبلی دوباره استفاده کند. گزینه قبلی - اضافه کردن یک عنصر اسکریپت جدید - از طریق دستکاری مدل شی‌گرای سند (DOM  ) امکان پذیر است. و به عنوان تزریق عنصر اسکریپت شناخته می شود. عنصر <script> به مدل شیءگرای سند HTML) (DOM تزریق می شود ، با نشانی وب (URL )  انتهای مورد نظر JSONP به عنوان ویژگی src تنظیم می شود. این تزریق عنصر اسکریپت پویا معمولاً توسط یک کتابخانه جاوااسکریپت  انجام می شود. جی‌کوئری و چهارچوب های دیگر توابع و چهارچوب های لازم برای JSONP دارند. گزینه های مستقل نیز وجود دارند.

نمونه ای از استفاده از جی‌کوئری برای تزریق پویا عنصر اسکریپت برای تماس JSONP به این شکل است :// Using YQL and JSONP
$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",
 
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    // Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

منابع

پیوند به بیرون 
 https://www.w3schools.com/js/js_json_jsonp.asp
 https://stackoverflow.com/a/8430374/11811807
 JSONP data source for remote domains

ای‌جکس
جی‌سان