JSONP
JSONP là một phương pháp gửi dữ liệu JSON mà không phải lo lắng về các vấn đề giữa các miền.
JSONP không sử dụng đối tượng XMLHttpRequest
.
JSONP sử dụng thẻ <script>
thay thế.
Giới thiệu JSONP
JSONP là viết tắt của JSON có đệm.
Việc yêu cầu tệp từ một miền khác có thể gây ra sự cố do chính sách giữa các miền.
Yêu cầu tập lệnh bên ngoài từ tên miền khác không gặp phải vấn đề này.
JSONP sử dụng lợi thế này và yêu cầu các tệp bằng thẻ script thay vì đối tượng XMLHttpRequest
.
<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:
Ví dụ
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Hiển thị tệp PHP »Kết quả trả về lệnh gọi hàm có tên "myFunc" với dữ liệu JSON làm tham số.
Hãy chắc chắn rằng chức năng này 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:
Ví dụ
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Hãy tự mình thử » 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 thỏa mãn lắm.
Thẻ script chỉ nên được tạo khi cần:
Ví dụ
Tạo và chèn thẻ <script> khi nhấp vào nút:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Hãy tự mình thử »Kết quả JSONP động
Các ví dụ trên vẫn còn rất tĩnh.
Làm cho ví dụ trở nên độ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 tin 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 bằng cách 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 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 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;
}
Hãy tự mình thử »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 chức năng gọi lại dưới dạng tham số:
Ví 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ử »