JSONP

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
۱مقدمه
۲شیوهٔ نوشتار
۳JSON در برابر XML
۴داده‌های مجاز
۵متد JSON Parse
۶متد JSON Stringify
۷اشیاء
۸آرایه‌ها
۹PHP در JSON
۱۰HTML در 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">

فایل سرور

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

مثال

1 <?php
2 $myJSON = '{ "name":"John", "age":30, "city":"New York" }';
3 
4 echo "myFunc(".$myJSON.");";
5 ?>


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


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

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

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

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

مثال

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


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


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

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

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

مثال

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

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


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


نتیجه JSONP پویا

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

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

PHP file

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

توضیح فایل PHP:

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

مثال JavaScript

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

 1 function clickButton() {
 2   var obj, s
 3   obj = { table: "products", limit: 10 };
 4   s = document.createElement("script");
 5   s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
 6   document.body.appendChild(s);
 7 }
 8 function myFunc(myObj) {
 9   var x, txt = "";
10   for (x in myObj) {
11     txt += myObj[x].name + "<br>";
12   }
13   document.getElementById("demo").innerHTML = txt;
14 }


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


تابع Callback

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

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

مثال

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

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


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



منابع آموزشی