JSONP یک روش برای ارسال داده JSON است بدون اینکه نگران مسائل دامنه باشد.
JSONP از شیء XMLHttpRequest استفاده نمی کند.
JSONP از تگ <script> استفاده می کند.

معرفی JSONP

JSONP برای JSON با Padding نام گذاری شده است.

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

درخواست یک اسکریپت خارجی از دامنه دیگری این مشکل را ندارد.

JSONP از این مزیت استفاده می کند و به جای آن از شیء XMLHttpRequest فایل ها را با استفاده از تگ اسکریپت درخواست می کند.

فایل سرور

فایل در سرور نتایج را در داخل یک تابع فراخوانی می کند:

نتیجه تماس با یک تابع به نام "myFunc" با داده JSON را به عنوان یک پارامتر باز می گردد.
اطمینان حاصل کنید که این عملکرد بر روی مشتری وجود دارد.

عملکرد جاوا اسکریپت

تابع به نام "myFunc" بر روی سرویس دهنده قرار گرفته است و آماده پردازش داده های JSON است:

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

ایجاد یک برچسب اسکریپت پویا

مثال بالا کار تابع myFunc را هنگامی که صفحه در حال بارگذاری است، بر اساس جایی که تگ اسکریپت را قرار داده اید، این کار بسیار رضایت بخش نیست.
تگ اسکریپت فقط زمانی ایجاد می شود که لازم باشد:

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

نتایج پویا JSONP

مثال های بالا هنوز ایستا هستند.
به عنوان نمونه پویایی را به فایل phpارسال کنید، و اجازه دهید فایل php یک شی JSON را بر اساس اطلاعاتی که به آن می رسد را باز گرداند.

توضیح فایل PHP

• درخواست را به یک شی تبدیل کنید، با استفاده از تابع json_decode ()
•      به پایگاه داده دسترسی پیدا کنید و آرایه را با داده های درخواست شده پر کنید.
•      آرایه را به یک شیء اضافه کنید.
•      تبدیل آرایه به JSON با استفاده از تابع json_encode ().
•      "myFunc ()" را در اطراف شی بازگشتی قرار دهید.

function clickButton() {
    var obj, s
    obj = { "table":"products", "limit":10 };
    s = document.createElement("script");
    s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
    document.body.appendChild(s);
}
function myFunc(myObj) {
    var x, txt = "";
    for (x in myObj) {
        txt += myObj[x].name + "
";
    }
    document.getElementById("demo").innerHTML = txt;
} 

تابع فراخوانی

هنگامی که شما هیچ کنترل فایل سرور ندارید، چگونه فایل سرور را برای تماس با عملکرد صحیح دریافت می کنید؟
گاهی اوقات فایل سرور یک تابع فراخوانی را به عنوان یک پارامتر ارائه می دهد:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}