گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/06/19 - 12:11
كد :7840

متد JSONP

در این مقاله ما متدی را معرفی می کنیم که میتوانید بدون نگرانی با کمک آن فایل های خود را از سرور فراخوانی کنید.

آموزش جیسون متد jsonp

این متد میتواند بدون نگرانی از مشکلات cross-domain داده های جیسون را برای شما به سرور ارسال کند.

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

متد JSONP از تگ <script> بجای شیئ XMLHttpRequest استفاده می کند.

 

مقدمه ای بر متد JSONP

نام JSONP سر نام JSON with Padding می باشد.

درخواست فایل از دامنه های دیگر میتواند باعث مشکلاتی شود. که ناشی از امنیت گذر داده از میان دامنه ها میباشد.

درخواست یک اسکریپت خارجی از یک دامنه دیگرباعث چنین مشکلاتی نمی شود.

متد JSONP از این ویژگی برای درخواست فایل با استفاده از تگ script بجای شیئ XMLHttpRequest استفاده می کند.

<script src="demo_jsonp.php">

 

فایل های سمت سرور

فایل ها سمت سرور در عملگر های فرخوانی صدا زده میشوند.

 

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

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

نتایج بازگردانی شده به عملگری به نام myFunc با داده های جیسون بعنوان پارامتر ارجاع میشوند.

مطمئن شوید که عملگر در سمت مشتری وجود دارد.

 

عملگر جاوا اسکریپت

عملگری به نام myFunc در سمت مشتری آماده دریافت داده های جیسون است:

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

 

ایجاد تگ Script داینامیک

مثال بالا عملگر myFunc را اجرا خواهد کرد . زمان اجرا در لحظه بارگذاری صفحه است. برای اینکه این بارگذاری در زمان دلخواه صورت گیرد از کد های زیر استفاده کنید.

مثال

تگ script با زدن یک دکمه درج میشود.

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

 

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

مثال بالا همچنان خیلی استاتیک است.

برای اینکه مثال را بیشتر داینامیک کنیم کد های جیسون را به فایل PHP ارسال می کنیم. فایل PHP شیئ جیسون را براساس داده های دریافتی ارجاع خواهد داد.

 

کد های فایل PHP

 

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

تبدیل درخواست به یک شیئ ، استفاده از عملگر PHP با استفاده از json_decode() .

دسترسی به بانک داده ، پرکردن محتوای یک آرایه با داده های درخواستی.

 

افزودن آرایه به یک شیئ

تبدیل آرایه به جیسون با استفاده از عملگر json_encode() .

فراخوانی شیئ myFunc() .

 

مثال جاوا اسکریپت

عملگر 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);
}

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :