07/09/2018, 15:25

Tìm hiểu về JSONP

JSONP là một phương thức để gửi dữ liệu JSON mà không phải lo lắng về các vấn đề về 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 về JSONP JSONP là viết tắt của JSON với Padding. Yêu ...

JSONP là một phương thức để gửi dữ liệu JSON mà không phải lo lắng về các vấn đề về 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 về JSONP

JSONP là viết tắt của JSON với Padding.

Yêu cầu tệp từ tên miền khác có thể gây ra sự cố do chính sách tên miền chéo. Điều này không xảy ra khi yêu cầu một tập lệnh bên ngoài từ một miền khác.

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

<script src="demo_jsonp.php">

Tệp máy chủ

Các tập tin trên máy chủ kết thúc hợp lý bên trong một hàm gọi:

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

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

Kết quả trả về hàm gọi có tên “myFunc” với dữ liệu JSON làm tham số. Tuy nhiên bạn cần chắc chắn các hàm này tồn tại trên máy client.

Hàm JavaScript

Hàm có tên “myFunc” nằm trên máy client, và sẵn sàng để xử lý dữ liệu JSON:

function myFunc(myObj) {
    document.getElementById("demo").innerHTML = myObj.name;
}

Tạo thẻ mô phỏng động

Ví dụ trên sẽ thực hiện hàm “myFunc” khi trang đang tải, dựa vào nơi mà bạn đặt thẻ script, điều này đôi khi không thực sự hợp lý. Thẻ script chỉ nên được tạo khi cần thiết.

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

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

Kết quả JSONP động

Các ví dụ trên đều về JSONP tĩnh. Ví dụ dưới đây sẽ biến hóa hơn bằng cách gửi JSON đến tệp php và để cho tệp php trả về một đối tượng JSON dựa trên thông tin mà nó nhận được.

PHP File

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

Giải thích về PHP File

  • 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 các dữ liệu 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().
  • Bao hàm “myFunc()” xung quanh đối tượng trả về.

Ví dụ hàm “myFunc” sẽ được gọi từ tệp php:

function clickButton() {
    var obj, s
    obj = { "table":"products", "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;
}

Hàm gọi lại

Khi bạn không kiểm soát tập tin máy chủ, làm thế nào để bạn nhận được các tập tin máy chủ để gọi hàm chính xác? Đôi khi tệp máy chủ cung cấp hàm gọi lại như một tham số.

Ví dụ tệp tin php sẽ gọi hàm bạn truyền như một tham số gọi lại:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
Bài liên quan

Tìm hiểu về JSONP

JSONP là một phương thức để gửi dữ liệu JSON mà không phải lo lắng về các vấn đề về 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 về JSONP JSONP là viết tắt của JSON với Padding. Yêu ...

Hoàng Hải Đăng viết 15:25 ngày 07/09/2018

Tìm hiểu về Lambda

Lambda là: 1 function mà nó không có tên cụ thể. nó có thể sử dụng để gán 1 đoạn code như 1 variable nó cũng là 1 object return về 1 value giống như những function bình thường khác Cách viết của Lambda: Có 2 cách để viết 1 lambda lambda -> Ruby dùng { } để viết ...

Hoàng Hải Đăng viết 21:15 ngày 11/08/2018

Tìm hiểu về sự khác nhau giữa eql? và equal? trong Ruby

Tìm hiểu về sự khác nhau giữa eql? và equal? trong Ruby Tiếp nối bài viết Bạn biết gì về toán tử "===" triple equals (case equality operator) trong Ruby? , ở bài viết này mình sẽ giải thích rõ hơn về sự khác nhau giữa eql? và equal? trong Ruby. Các bạn có thể đọc lại Bạn biết gì về toán ...

Trịnh Tiến Mạnh viết 21:12 ngày 11/08/2018

ReactJS - Tìm hiểu về Component Life Cycle

Trong bài này chúng ta sẽ tìm hiểu về vòng đời của một React component và các methods để quản lý vòng đời này. Lifecycle Methods componentWillMount đây là method sẽ được thực thi trước khi 1 component được render trên cả server side và client side. componentDidMount ...

Trịnh Tiến Mạnh viết 20:42 ngày 11/08/2018

TÌM HIỂU VỀ JSON TRONG JAVASCRIPT

Cách đây khoảng 3 - 4 năm, khi đang học về lập trình Android, tôi đã bắt đầu được tiếp xúc với JSON. Gần đây, tôi mới biết nguồn gốc của nó lại liên quan đến JavaScript - khi tôi bắt đầu học ngôn ngữ này. Vậy JSON là gì? Nó có tác dụng gì ? Và cách sử dụng nó như thế nào? Sau đây, chúng ta sẽ cùng ...

Bùi Văn Nam viết 20:31 ngày 11/08/2018
0