JSONP

جیسون لایه دار ( JSON-P) یک الگوی جاوا اسکریپت برای درخواست داده با بارگیری یک برچسب <script>. این مورد توسط 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