JSONP
JSONP هي طريقة لإرسال بيانات JSON دون القلق بشأن المشكلات عبر النطاقات.
لا يستخدم JSONP XMLHttpRequestالكائن.
يستخدم JSONP <script>العلامة بدلاً من ذلك.
مقدمة JSONP
يرمز JSONP إلى JSON مع الحشو.
يمكن أن يؤدي طلب ملف من مجال آخر إلى حدوث مشكلات بسبب السياسة عبر النطاقات.
لا توجد هذه المشكلة في طلب برنامج نصي خارجي من مجال آخر.
يستخدم JSONP هذه الميزة ، ويطلب الملفات باستخدام علامة البرنامج النصي بدلاً من XMLHttpRequestالكائن.
<script src="demo_jsonp.php">
ملف الخادم
يقوم الملف الموجود على الخادم بتغليف النتيجة داخل استدعاء دالة:
مثال
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
تقوم النتيجة بإرجاع استدعاء لوظيفة تسمى "myFunc" مع بيانات JSON كمعامل.
تأكد من وجود الوظيفة على العميل.
وظيفة JavaScript
الوظيفة المسماة "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 باستخدام دالة json_encode () .
- التفاف "myFunc ()" حول الكائن العائد.
مثال جافا سكريبت
سيتم استدعاء الوظيفة "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);