JSONP là một phương pháp để gửi dữ liệu JSON mà không cần lo lắng về các vấn đề tên miền chéo.
JSONP không sử dụng XMLHttpRequestđối tượng.
JSONP sử dụng <script>thẻ để thay thế.
Giới thiệu JSONP
JSONP là viết tắt của JSON with Padding.
Yêu cầu tệp từ miền khác có thể gây ra sự cố do chính sách miền chéo.
Yêu cầu tập lệnh bên ngoài từ một miền khác không có vấn đề này.
JSONP sử dụng lợi thế này và yêu cầu tệp bằng thẻ script thay vì XMLHttpRequestđối tượng.<script src=”demo_jsonp.php”>
Tệp máy chủ
Tệp trên máy chủ bao bọc kết quả bên trong một lệnh gọi hàm:
Thí dụ
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Kết quả trả về một cuộc gọi đến một hàm có tên “myFunc” với dữ liệu JSON làm tham số.
Đảm bảo rằng chức năng tồn tại trên máy khách.
Hàm JavaScript
Hàm có tên “myFunc” nằm trên máy khách và sẵn sàng xử lý dữ liệu JSON:
Thí dụ
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
Tạo thẻ tập lệnh động
Ví dụ trên sẽ thực thi chức năng “myFunc” khi trang đang tải, dựa trên vị trí bạn đặt thẻ script, điều này không hài lòng lắm.
Thẻ script chỉ nên được tạo khi cần:
Thí dụ
Tạo và chèn thẻ <script> khi một nút được nhấp:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Kết quả JSONP động
Các ví dụ trên vẫn rất tĩnh.
Làm cho ví dụ động bằng cách gửi JSON đến tệp php và để tệp php trả về một đối tượng JSON dựa trên thông tin mà nó nhận được.
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).")";
?>
Tệp PHP giải thích:
- 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 dữ liệu được 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 () .
- Quấn “myFunc ()” xung quanh đối tượng trả về.
Ví dụ về JavaScript
Hàm “myFunc” sẽ được gọi từ tệp php:
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Chức năng gọi lại
Khi bạn không có quyền kiểm soát tệp máy chủ, làm cách nào để tệp máy chủ gọi đúng chức năng?
Đôi khi tệp máy chủ cung cấp hàm gọi lại dưới dạng tham số:
Thí dụ
Tệp php sẽ gọi hàm bạn truyền dưới dạng tham số gọi lại:let s = document.createElement(“script”);
s.src = “jsonp_demo_db.php?callback=myDisplayFunction“;
document.body.appendChild(s);
Hãy tự mình thử »
