JSONP

JSONP هو طريقة لإرسال بيانات JSON دون النظر في مشاكل الحقول.

لا يستخدم JSONP XMLHttpRequest.

استخدام JSONP <script> استبدلت العلامة.

مقدمة لـ JSONP

JSONP تعني JSON with Padding.

قد يسبب طلب ملفات خارجية من مجال آخر مشكلة بسبب سياسة الحقول.

لا يوجد مشكلة في طلب ملفات خارجية من مجال آخر.

استخدم JSONP هذا الميزة واستبدل علامة script بدلاً من XMLHttpRequest.

<script src="demo_jsonp.php">

ملف Server

الملفات على الخادم تحوي نتائج الدالة عند استدعائها:

مثال

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo ";myFunc(".$myJSON.");";
?>

显示 PHP 文件

结果返回对名为 "myFunc" 的函数的调用，其中的 JSON 数据为参数。

请确保客户端存在该函数。

دروس الأوبجكتات في JavaScript

函数 "myFunc" 位于客户端，用于处理 JSON 数据：

مثال

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

جرب بنفسك

创建动态脚本标签

上例会在页面加载时执行 "myFunc" 函数，根据您放置脚本标签的位置，这样不很令人满意。

Script 只应该在需要时创建：

مثال

在按钮被点击时创建和插入 <script> 标签：

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

جرب بنفسك

动态 JSONP 结果

上例仍然是静态的。

可通过向 PHP 文件发送 JSON 来创建动态的例子，然后根据这个 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_decode() 函数把该数组转换为 JSON。
  • 用 "myFunc()" 封装返回对象。

مثال JavaScript

将从 php 文件调用 "myFunc" 函数：

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

جرب بنفسك

دالة إعادة التشغيل

إذا لم تستطع التحكم في ملف الخادم، كيف يمكنك جعل ملف الخادم ينفذ الدالة الصحيحة؟

في بعض الأحيان يقدم ملف الخادم دالة إعادة التشغيل كمعامل:

مثال

ملف PHP سيقوم بتشغيل الدالة التي قدمتها كمعامل إعادة التشغيل:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

جرب بنفسك