٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش JSONP

JSONP روشی برای ارسال داده های JSON بدون نگرانی در مورد موضوعات میان دامنه ای است. JSONP از این XMLHttpRequestشی استفاده نمی کند. در <script>عوض JSONP از برچسب استفاده می کند. معرفی JSONP JSONP مخفف JSON with Padding است. درخواست یک پرونده از دامنه دیگر ،…

محمد یوسفی

30 جولای 2021

JSONP روشی برای ارسال داده های JSON بدون نگرانی در مورد موضوعات میان دامنه ای است.

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

در <script>عوض JSONP از برچسب استفاده می کند.


معرفی JSONP

JSONP مخفف JSON with Padding است.

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

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

JSONP از این مزیت استفاده می کند و پرونده ها را با استفاده از برچسب اسکریپت به جای XMLHttpRequestشی request درخواست می کند.

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

ایجاد برچسب اسکریپت پویا

مثال بالا بر اساس مکانی که برچسب اسکریپت را در آن قرار می دهید ، عملکرد “myFunc” را هنگام بارگیری صفحه اجرا می کند ، که بسیار راضی کننده نیست.

برچسب اسکریپت فقط در صورت نیاز ایجاد می شود:

مثال

با کلیک روی دکمه ، برچسب <script> را ایجاد و وارد کنید:

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

نتیجه JSONP پویا

مثالهای بالا هنوز بسیار ثابت هستند.

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

پرونده 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 آرایه را به JSON تبدیل کنید .
  • “myFunc ()” را به دور شی return برگشتی بپیچید.

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

عملکرد “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;
}

عملکرد برگشت تماس

وقتی هیچ کنترلی روی پرونده سرور ندارید ، چگونه می توان فایل سرور را به عملکرد صحیح فراخوانی کرد؟

گاهی اوقات پرونده سرور یک عملکرد برگشتی را به عنوان یک پارامتر ارائه می دهد:

مثال

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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها