JSONP

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

معرفی JSONP

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

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

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

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

فایل سرور

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

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

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

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

تابع جاوااسکریپت در jsonp
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 را بر اساس اطلاعاتی که به آن می رسد را باز گرداند.

query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit); $outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo "myFunc(".json_encode($outp).")"; ?>

توضیح فایل PHP

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

تابع 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; }
مشاهده مثال

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

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

تابع CALLBACK
function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط