JSONP

از موتو کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از JavaScript:JS JSON/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);
}


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



منابع آموزشی[ویرایش]