JSONP (JSON JSONP)
اینجا «JSONP» را ساده می بینیم. JSONP راهی برای گرفتن JSON با تگ اسکریپت است. «کراس دامین (Cross-Domain)» یعنی درخواست از دامنه دیگر. با اسکریپت، این محدودیت دور زده می شود.
مقدمه JSONP
در JSONP، سرور خروجی را داخل یک تابع می پیچد. سپس مرورگر فایل اسکریپت را لود می کند و همان تابع را صدا می زند.
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
ایجاد تگ اسکریپت پویا (JSONP)
به جای اسکریپت ثابت، هنگام نیاز اسکریپت بساز. سپس آن را به بدنه اضافه کن.
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
JSONP داینامیک با پارامتر
می توانی شیء را JSON.stringify کنی و به کوئری بدهی. سرور براساس آن پاسخ می دهد و myFunc(...) را برمی گرداند.
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Callback در JSONP
گاهی سرور نام «callback» را از آدرس می گیرد. سپس همان نام تابع را صدا می زند.
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
گام های عملی JSONP
- تابع گیرنده داده را بساز.
- تگ اسکریپت ایجاد و src را تنظیم کن.
- اسکریپت را به صفحه اضافه کن.
- نمایش داده را در تابع انجام بده.
جمع بندی سریع
- JSONP با <script> کار می کند.
- تابع callback باید global باشد.
- پارامترها را با کوئری بفرست.
- کنترل نام تابع با callback انجام می شود.
منابع داخلی: JSON و HTML، JSON و PHP، و JSONP.