‎‎روش ارسال داده جسون پيJSON JSONP -‎

‎JSONP‎يك روش ارسال داده جسوني بدون نگراني در مورد مشكلات بين دامنه .

JSONP‎از شئ‎XMLttpRequest‎ استفاده نميكند .آن بجايش از تگ ‎<script>‎‎استفاده مي نمايد .

‎‎معرفي جسون پيJSONP Intro -‎

‎درخواست فايل از يك دامنه ديگر بدليل خط مش بين دامنه اي ميتواند مشكلاتي را ايجاد كند .اما ‎درخواست يك اسكريپت خارجي از دامنه ديگر مشكلي ندارد.

JSONP‎از اين مزيت بجاي شئ ‎XMLHttpRequest‎ فايل هائي را با اسكريپت ‎درخواست مي نمايد.

<script src="demo_jsonp.php">

‎‎فايل سروريThe Server File -‎

‎‎فايل روي سرور نتيجه را در يك تابع فراخواني قرار ميدهد.

‎‎مثال ـ فايل سروري

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

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

‎نتيجه تماسي را به تابعي بانام‎‎"myFunc‎"‎ بعنوان پارامتر برميگرداند .مطمئن شويد كه ‎تابع در سمت مشتري يا كلاينت وجود داشته باشد.

‎‎تابع جاوااسكريپتThe JavaScipt Function -‎

‎تابع با نام‎‎"myFunc‎"‎ در سمت كلاينت بوده وداده جسوني را خوانده و روي آن اقدام ‎مي نمايد.

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

(go to editor for change code and run)==>try it yourself

‎‎ايجاد تگ اسكريپت پوياCreating a Dynamic Sript Tag -‎

‎مثال بالا تابع‎‎"myFunc‎"‎ هنگام بارگيري صفحه اجرا ميكند، براساس جائيكه آن تگ قرار ‎گرفته است، كه چندان رضايت بخش نيست .تگ اسكريپت فقط بايد در صوريت نياز ايجاد شود:

‎‎مثال ـ با كليك روي دكمه تگ‎<script>‎ ايجاد ودرج ميگردد.

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

(go to editor for change code and run)==>try it yourself

‎‎نتيجه پوياي جسون پيDynamic JSONP Result -‎

‎‎مثال هاي بالا هنوز خيلي ايستا يا ثابت هستند.

‎مثال را با ارسالJSON به فايل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( )‎ از فايل PHP فراخوان ميشود .

const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) {
    txt += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}

(go to editor for change code and run)==>try it yourself

‎فايلphp مثال فوق ‎‎"jsonp_demo_db.php‎"‎ مطابق زيراست كه بايستي نام كاربري ‎و رمز عبور متناسب تنظيم گردد.

<?php  
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$table_name=$obj->table; $limit=$obj->limit; 
$conn = new mysqli("localhost", "username", "password", "Northwind");
switch ($table_name){
	case "customers":
      $sql="SELECT customername as name FROM ". $table_name;
      break; 
    case "products":
      $sql="SELECT productname as name FROM ". $table_name;
      break; 
    case "suppliers":
      $sql="SELECT suppliername as name FROM ". $table_name;
      break;
	default:
      $sql="SELECT customername as name FROM ". $table_name;
}
$sql=$sql." limit $limit";

$result = $conn->query($sql);
//$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";

‎‎تابع برگشت به تماسCallback Function -‎

‎وقتي هيچ كنترلي روي فايل سرور نداريد، چگونه مي توانيد فايل سرور را وادار به فراخواني ‎عملكرد صحيح كنيد.

‎‎گاهي اوقات فايل سرور يك تابع پاسخ به تماس را به عنوان پارامتر ارائه ميدهد.

‎‎مثال ـ فايلPHP تابعي را كه به عنوان پارامتر پاسخ به تماس ارسال ميكنيد فراخواني ميكند .

let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);

(go to editor for change code and run)==>try it yourself

‎‎فايلphp مثال فوق ‎‎"demo_jsonp2.php‎"‎ مطابق زير است .

<?php  
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
$myfun=$_GET["callback"];
echo "$myfun(".$myJSON.");";
?>

JS Tutorial آموزش جاوااسکریپت

JS Objects اشیاء جاوااسکریپت

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

JS Classes کلاسهای جاوااسکریپت

JS Async ناهمزمانی جاوااسکریپت

JS HTML DOM شئ دام

JS Browser BOM شئ مرورگر

JS Web APIs رابط های اپی آی وب

JS AJAX آجکس وجاوااسکریپت

JavaScript JSON

JavaScript vs JQuery

JS Graphics گرافیک جاوااسکریپت

JS References فهرست مطالب