JSON: JSON JSONP

Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

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 đố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 with Padding.

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 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 gặp phải vấn đề này.

Vậy nên JSONP sử dụng lợi thế này và yêu cầu tệp bằng thẻ script thay vì đối tượng XMLHttpRequest.

Ví dụ:

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

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

Kết quả sẽ trả về một lời gọi đến một hàm có tên "myFunc" với dữ liệu JSON làm tham số.

Bạn cần đảm bảo rằng hàm myFunc() 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>

Tạo thẻ tập lệnh động

Ví dụ trên sẽ thực thi hàm "myFunc" khi trang đang tải, dựa trên vị trí bạn đặt thẻ script, điều này không được hay lắm.

Thẻ script chỉ nên được tạo khi cần.

Ví dụ:

<!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() {
    var 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>

Kết quả JSONP động

Các ví dụ trên vẫn rất tĩnh.

Ta sẽ 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 như sau:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "myDB");
$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 được giải thích như sau:

  • 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 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().
  • Đặt "myFunc()" bao quanh đối tượng trả về.

Hàm myFunc() sẽ được gọi từ tệp PHP:

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

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

<script>
  function clickButton() {
    var obj, s
    obj = { table: "customers", limit: 10 };
    s = document.createElement("script");
    s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
    document.body.appendChild(s);
  }
  
  function myFunc(myObj) {
    var x, txt = "";
    for (x in myObj) {
      txt += myObj[x].name + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
  }
</script>

</body>
</html>

Hàm callback

Khi bạn không có quyền kiểm soát tệp máy chủ, vậy thì làm cách nào để tệp máy chủ gọi đúng hàm mong muốn?

Ta có thể cung cấp hàm callback dưới dạng tham số như sau:

function clickButton() {
  var s = document.createElement("script");
  s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
  document.body.appendChild(s);
}

Ví dụ:

<!DOCTYPE html>
<html>

<body>

<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>

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

<p id="demo"></p>

<script>
  function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp2.php?callback=myDisplayFunction";
    document.body.appendChild(s);
  }
  
  function myDisplayFunction(myObj) {
    document.getElementById("demo").innerHTML = myObj.name;
  }
</script>

</body>
</html>
» Tiếp: Test JSON
« Trước: JSON HTML
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!