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.
1 |
<script src="demo_jsonp.php"> |
Nội dung file php như sau:
1 2 3 4 |
<?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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
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
1 2 3 4 5 6 7 8 9 10 11 |
<?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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!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> |
Chi tiết: https://www.w3schools.com/js/tryit.asp?filename=tryjson_jsonp_php