Tìm hiểu về JSONP

JSONP là một phương thức để gửi dữ liệu JSON mà không phải lo lắng về các vấn đề về tên miền chéo. JSONP không sử dụng đối tượng XMLHttpRequest. JSONP sử dụng thẻ <script> để thay thế.

Giới thiệu về JSONP

JSONP là viết tắt của JSON với Padding.

Yêu cầu tệp từ tên miền khác có thể gây ra sự cố do chính sách tên miền chéo. Điều này không xảy ra khi yêu cầu một tập lệnh bên ngoài từ một miền khác.

JSONP sử dụng lợi thế này và yêu cầu các tệp tin bằng cách sử dụng thẻ tập lệnh thay vì đối tượng XMLHttpRequest.

<script src="demo_jsonp.php">

Tệp máy chủ

Các tập tin trên máy chủ kết thúc hợp lý bên trong một hàm gọi:

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

Kết quả trả về hàm gọi có tên “myFunc” với dữ liệu JSON làm tham số. Tuy nhiên bạn cần chắc chắn các hàm này tồn tại trên máy client.

Hàm JavaScript

Hàm có tên “myFunc” nằm trên máy client, và sẵn sàng để xử lý dữ liệu JSON:

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

Tạo thẻ mô phỏng động

Ví dụ trên sẽ thực hiện hàm “myFunc” khi trang đang tải, dựa vào nơi mà bạn đặt thẻ script, điều này đôi khi không thực sự hợp lý. Thẻ script chỉ nên được tạo khi cần thiết.

Ví dụ tạo và chèn thẻ <script> khi một nút được nhấp:

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

Kết quả JSONP động

Các ví dụ trên đều về JSONP tĩnh. Ví dụ dưới đây sẽ biến hóa hơn bằng cách gửi JSON đến tệp php và để cho tệp php trả về một đối tượng JSON dựa trên thông tin mà nó nhận được.

PHP File

<?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 về PHP File

• Chuyển đổi yêu cầu thành một đối tượng, sử dụng hàm PHP json_decode().
• Truy cập cơ sở dữ liệu, và điền vào một mảng với các dữ liệu yêu cầu.
• Thêm mảng vào một đối tượng.
• Chuyển đổi mảng thành JSON bằng cách sử dụng hàm json_encode().
• Bao hàm “myFunc()” xung quanh đối tượng trả về.

Ví dụ hàm “myFunc” sẽ được gọi 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;
}

Hàm gọi lại

Khi bạn không kiểm soát tập tin máy chủ, làm thế nào để bạn nhận được các tập tin máy chủ để gọi hàm chính xác? Đôi khi tệp máy chủ cung cấp hàm gọi lại như một tham số.

Ví dụ tệp tin php sẽ gọi hàm bạn truyền như một tham số gọi lại:

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