JSONP

از موتو کد، دانشنامهٔ برنامه‌نویسی

JSONP نام یک روش برای ارسال داده‌های JSON است بدون اینکه نگران مشکلات چندین دامنه (cross-domain) باشید.[۱]

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

JSONP به جای آن از تگ <script> استفاده می‌کند.

مقدمهٔ JSONP

JSONP (سرواژهٔ: JSON with Padding) است.

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

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

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

<script src="demo_jsonp.php">

فایل سرور

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

مثال

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>


مشاهدهٔ نتیجه


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

اطمینان حاصل کنید که تابع در کد سمت کاربر وجود دارد.

تابع جاوا اسکریپت

تابع "myFunc" در کد سمت کاربر قرار گرفته‌است و آماده است که اطلاعات JSON را مدیریت کند:

مثال

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


مشاهدهٔ نتیجه


ساخت یک تگ Script پویا

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

این تگ script تنها زمانی که به آن نیاز باشد، ساخته می‌شود:

مثال

ساخت و وارد کردن تگ <script> زمانی که دکمه کلیک شد:

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


مشاهدهٔ نتیجه


نتیجه JSONP پویا

نتایج مثال‌های بالا ثابت (Static) هستند.

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

PHP file

<?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:

  • تبدیل درخواست به یک شیء با استفاده از متد JSON_decode()
  • دسترسی به دیتابیس و پر کردن یک آرایه با اطلاعات درخواستی
  • اضافه کردن آرایه به یک شیء
  • تبدیل یک آرایه با استفاده از متد JSON_encode()
  • اجرای تابع "myFunc()" روی شیء بازگشتی

مثال JavaScript

تابع "myFunc()" از سوی فایل php فراخوانی خواهد شد:

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;
}


مشاهدهٔ نتیجه


تابع Callback

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

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

مثال

فایل php تابعی را که شما به عنوان پارامتر callback به آن پاس می‌دهید را فراخوانی خواهد کرد:

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


مشاهدهٔ نتیجه



منابع آموزشی