JavaScript:JSONP

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
AJAX
۱JavaScript:مقدمه‌ای بر AJAX
۲JavaScript:AJAX - شیء XMLHttpRequest
۳JavaScript:AJAX - ارسال یک درخواست به سرور
۴JavaScript:AJAX - پاسخ سرور
۵JavaScript:مثال‌های XML در AJAX
۶JavaScript:مثال‌های PHP در AJAX
۷JavaScript:مثال‌های ASP در AJAX
۸JavaScript:مثال پایگاه داده در AJAX
۹JavaScript:نرم‌افزارهای XML
۱۰JavaScript:مثال‌های AJAX
JSON
۱JavaScript:مقدمه‌ای بر JSON
۲JavaScript:شیوهٔ نوشتار JSON
۴JavaScript:انواع داده‌های مجاز در JSON
۵متد JSON.parse()
۶متد JSON.stringify()
۷JavaScript:اشیاء JSON
۸JavaScript:آرایه‌ها در JSON
۹JavaScript:PHP در JSON
۱۰JavaScript:HTML در JSON
۱۱JavaScript:JSONP
JS vs jQuery
۱JavaScript:جاوااسکریپت / انتخابگرهای DOM جی‌کوئری
۲JavaScript:جاوااسکریپت / عناصر HTML جی‌کوئری
۳JavaScript:جاوااسکریپت / استایل‌های CSS در جی‌کوئری
۴JavaScript:جاوااسکریپت / HTML DOM در جی‌کوئری
---

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

منابع آموزشی