JSONP

JSONP on tapa lähettää JSON-tietoja ilman että on tarpeen huolehtia yliliittymäongelmista.

JSONP ei käytä XMLHttpRequest-objektia.

JSONP käyttää <script> Tunniste korvaa sen.

JSONP esittely

JSONP tarkoittaa JSON with Padding.

Uudelta alueelta pyydettynä tiedosto aiheuttaa ongelman, koska se on rajoitettu aluepolitiikan vuoksi.

Uudelta alueelta pyydettynä ulkoinen skripti ei aiheuta ongelmaa.

JSONP hyödyntää tätä etua ja käyttää script-merkkiä korvaamaan XMLHttpRequest-objektin.

<script src="demo_jsonp.php">

Server-tiedosto

Palvelinissa oleva tiedosto sisältää toiminnon tuloksen kutsussa:

Esimerkki

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

显示 PHP 文件

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

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

JavaScript funktiot

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

Esimerkki

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

Kokeile itse

创建动态脚本标签

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

Script 只应该在需要时创建：

Esimerkki

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

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

Kokeile itse

动态 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-esimerkki

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

Kokeile itse

Takaisinvinkkufunktio

Jos et voi hallita palvelin tiedostoa, miten saat palvelin tiedoston kutsemaan oikeaa funktiota?

Joskus palvelin tiedosto tarjoaa takaisinvinkkuna parametrina:

Esimerkki

PHP-tiedosto kutsuu takaisinvinkkuna antamaasi funktiota:

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

Kokeile itse