JSONP

JSONP, çapraz alan sorunu olmadan JSON verilerini iletmek için kullanılan bir yöntemdir.

JSONP, XMLHttpRequest nesnesini kullanmaz.

JSONP kullanımı <script> Etiketin yerine alınması.

JSONP Tanıtımı

JSONP, JSON ile Dolgu anlamına gelir.

Farklı bir alandan dosya talep etmek, çapraz alan politikası nedeniyle sorun yaratır.

Farklı bir alanın dışarıdan istek göndermek bu sorunu çözmüyor.

JSONP bu avantajı kullanır ve script etiketiyle XMLHttpRequest nesnesi yerine kullanır.

<script src="demo_jsonp.php">

Server dosyası

Sunucudaki dosya, fonksiyon çağrısında sonuçları sarmalama:

Örnek

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

显示 PHP 文件

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

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

JavaScript Fonksiyonları

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

Örnek

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

Kişisel Olarak Deneyin

创建动态脚本标签

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

Script 只应该在需要时创建：

Örnek

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

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

Kişisel Olarak Deneyin

动态 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 Örneği

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

Kişisel Olarak Deneyin

Geri çağrı fonksiyonu

Sunucu dosyasını kontrol edemiyorsanız, nasıl sunucu dosyasını doğru fonksiyonu çağırır?

Bazen sunucu dosyası, parametre olarak sunucu dosyasını sağlar:

Örnek

PHP dosyası, size geri çağrı parametresi olarak geçirdiğiniz fonksiyonu çağırır:

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

Kişisel Olarak Deneyin