JSONP

JSONP روشی است که می‌توان JSON داده‌ها را بدون توجه به مشکلات دامنه انتقال داد.

JSONP از شیء XMLHttpRequest استفاده نمی‌کند.

استفاده از JSONP <script> تگ جایگزین شده است.

مقدمه‌ای بر JSONP

JSONP به معنای JSON with Padding است.

درخواست فایل از یک دامنه دیگر باعث مشکل می‌شود، به دلیل سیاست‌های دامنه.

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

JSONP از این مزیت استفاده می‌کند و از تگ script به جای شیء XMLHttpRequest استفاده می‌کند.

<script src="demo_jsonp.php">

فایل سرور

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

مثال

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "+"myFunc(".$myJSON.");";
?>

فایل PHP را نمایش می‌دهد

نتایج به فراخوانی توابعی با نام "myFunc" بازمی‌گردد، که داده‌های JSON به عنوان پارامترهای آن استفاده می‌شود.

مطمئن شوید که این تابع در کاربر وجود دارد.

آموزش‌های تابع JavaScript

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

مثال

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

به طور مستقیم امتحان کنید

ایجاد تگ اسکریپت پویا

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

اسکریپت باید فقط در زمان نیاز ایجاد شود:

مثال

برای ایجاد و جایگذاری تگ <script> در زمان کلیک بر روی دکمه:

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

به طور مستقیم امتحان کنید

نتایج JSONP پویا

مثال قبلی همچنان ثابت است.

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

فایل PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>

توضیحات فایل PHP:

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

مثالهای JavaScript

از فایل php به تابع "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 + "<br>";
     }
    document.getElementById("demo").innerHTML = txt;
}

به طور مستقیم امتحان کنید

فراخوانی به عنوان پارامتر

اگر نمی‌توانید فایل سرور را کنترل کنید، چگونه می‌توانید فایل سرور را به فراخوانی درست کنید؟

گاهی اوقات فایل سرور پارامتر فراخوانی به عنوان پارامتر ارائه می‌دهد:

مثال

فایل PHP فراخوانی خواهد کرد که به عنوان پارامتر بازگشتی به آن فراخوانی می‌شود:

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

به طور مستقیم امتحان کنید