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 }
منابع آموزشی