JSONP là gì? – Ví dụ chi tiết

JSON 2 Views

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

Table of Contents

Giới thiệu JSONP

JSONP (json with padding) là một phương pháp hay còn gọi là phương tiện giao tiếp giải quyết vấn đề truy cập dữ liệu giữa các domain khác nhau. Do chính sách cùng nguồn gốc chính vì vậy các trang web có thể lấy dữ liệu JSON được tạo động từ các nguồn khác và chế độ sử dụng này được gọi là JSONP. Dữ liệu được thu thập bằng JSONP không phải là JSON, mà là JavaScript tùy ý, được trình thông dịch JavaScript thực thi thay vì được phân tích cú pháp bởi trình phân tích cú pháp JSON.

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">

1	<script src="demo_jsonp.php">

Nội dung file php như sau:

<?php
$myJSON = '{"name":"John", "age":30, "city":"New York"}';
echo "myFunc(".$myJSON.");";
?>

<?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:

<!DOCTYPE html>
<html>
<body>

<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>

<script>
function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="demo_jsonp.php"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Request JSON using the script tag</h2>

<p>The PHP file returns a call to a function that will handle the JSON data.</p>

function myFunc(myObj) {

document.getElementById("demo").innerHTML = myObj.name;

}

</script>

</body>

</html>

Kết quả:

Request JSON using the script tag

The PHP file returns a call to a function that will handle the JSON data.

John

Creating a Dynamic Script Tag

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:

Ví dụ

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

<!DOCTYPE html>
<html>
<body>
<h2>Click the Button.</h2>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>
<button onclick="clickButton()">Click me!</button>
<p id="demo"></p>
<script>
function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
}
function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Click the Button.</h2>

<p>A script tag with a src attribute is created and placed in the document.</p>

<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>

<button onclick="clickButton()">Click me!</button>

function clickButton() {

let s = document.createElement("script");

s.src = "demo_jsonp.php";

document.body.appendChild(s);

}

function myFunc(myObj) {

document.getElementById("demo").innerHTML = myObj.name;

}

</script>

</body>

</html>

Chi tiết: https://www.w3schools.com/js/tryit.asp?filename=tryjson_jsonp_create

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

<?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:

<!DOCTYPE html>
<html>
<body>

<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with an object as a parameter.</p>
<p id="demo"></p>

<p>Try changing the table property from "customers" to "products".</p>

<script>
const obj = { table: "customers", 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;
}
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>A script tag with a src attribute is created and placed in the document.</p>

<p>The PHP file returns a call to a function with an object as a parameter.</p>

<p>Try changing the table property from "customers" to "products".</p>

const obj = { table: "customers", 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;

}

</script>

</body>

</html>

Chi tiết: https://www.w3schools.com/js/tryit.asp?filename=tryjson_jsonp_php

JSON

JSONP là gì? – Ví dụ chi tiết

Giới thiệu JSONP

Hàm JavaScript

Creating a Dynamic Script Tag

Kết quả JSONP động

Tệp PHP

Tệp PHP giải thích:

Ví dụ về JavaScript

Related posts: