JSONP

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。

JSONP 不使用 XMLHttpRequest 对象。

JSONP 使用 <script> 标签取而代之。

JSONP 简介

JSONP 指的是 JSON with Padding。

从另一个域请求文件会引起问题，由于跨域政策。

从另一个域请求外部脚本没有这个问题。

JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象。

<script src="demo_jsonp.php">

Server 文件

服务器上的文件在函数调用中封装结果：

Mẫu

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

Hiển thị tệp PHP

Kết quả trả về là cuộc gọi hàm "myFunc" với dữ liệu JSON làm tham số.

Hãy đảm bảo rằng hàm này tồn tại tại client.

Hàm của JavaScript

Hàm "myFunc" nằm tại client, được sử dụng để xử lý dữ liệu JSON:

Mẫu

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

Thử ngay

Tạo thẻ script động

Ví dụ trên sẽ thực hiện hàm "myFunc" khi trang được tải, điều này không thực sự hài lòng nếu bạn đặt thẻ script ở vị trí khác.

Script chỉ nên được tạo khi cần thiết:

Mẫu

Tạo và chèn thẻ <script> khi nút được nhấn:

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

Thử ngay

Kết quả JSONP động

Ví dụ trên vẫn là tĩnh.

Bạn có thể tạo ví dụ động bằng cách gửi JSON đến tệp PHP, sau đó trả về một đối tượng JSON dựa trên thông tin từ tệp php này.

Tệp 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).")";
?>

Giải thích tệp PHP:

  • Chuyển đổi yêu cầu thành đối tượng, sử dụng hàm PHP json_decode().
  • Truy cập cơ sở dữ liệu và sử dụng dữ liệu được yêu cầu để điền vào mảng.
  • Thêm mảng vào đối tượng.
  • Sử dụng json_decode() Hàm chuyển đổi mảng thành JSON.
  • Bao bọc đối tượng trả về bằng "myFunc()".

Mẫu JavaScript

Sẽ gọi hàm "myFunc" từ tệp php:

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

Thử ngay

Hàm回调

Nếu bạn không thể kiểm soát tệp máy chủ, thì làm thế nào để tệp máy chủ gọi đúng hàm?

Đôi khi tệp máy chủ cung cấp hàm回调 như tham số:

Mẫu

Tệp PHP sẽ gọi hàm mà bạn truyền qua tham số回调:

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

Thử ngay