https://www.w3schools.com/js/js_json_jsonp.asp

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

Hiển thị tệp PHP »

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;

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

Hãy tự mình thử »

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

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 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ử »