JSONP là gì? Giải thích cách hoạt động và khác biệt với Ajax

Dưới đây là giải thích về cách hoạt động của JSONP và lý do tại sao nó không thực sự là Ajax, với nội dung code được trình bày cùng cấp với heading cấp cao nhất và không nằm trong thẻ <ul> hoặc <li>:

Cách hoạt động của JSONP

Để sử dụng JSONP, trước tiên bạn cần tạo một thẻ <script> trong HTML. Thay vì sử dụng XMLHttpRequest (XHR) để gửi yêu cầu HTTP, JSONP tận dụng thẻ <script> để truy cập tài nguyên từ một miền khác mà không bị ràng buộc bởi chính sách cùng nguồn gốc.

function callbackFunction(data) {
    console.log(data);
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=callbackFunction';
document.body.appendChild(script);

Khi trình duyệt tải thẻ <script>, nó sẽ gửi yêu cầu đến server ở miền khác. Server sẽ nhận yêu cầu và trả về một đoạn mã JavaScript, trong đó có gọi hàm callback đã được chỉ định (trong ví dụ trên là callbackFunction).

// Server trả về:
callbackFunction({"key": "value"});

Khi mã JavaScript được trả về được tải, hàm callback sẽ được thực thi với dữ liệu nhận được từ server.

Tại sao JSONP không thực sự là Ajax

JSONP không thực sự là Ajax vì những lý do sau:

1. Khác biệt về giao thức: Ajax thường sử dụng XMLHttpRequest để gửi yêu cầu HTTP, cho phép tương tác với server qua các phương thức như GET và POST. Trong khi đó, JSONP chỉ sử dụng phương thức GET thông qua thẻ <script>.
2. An toàn hơn: Ajax có cơ chế kiểm tra lỗi và xử lý phản hồi dễ dàng hơn, vì bạn có thể kiểm soát hoàn toàn yêu cầu và nhận phản hồi. JSONP không thể kiểm tra lỗi tốt, vì nó chỉ thực hiện yêu cầu thông qua thẻ <script> và không có cách nào để xử lý các lỗi HTTP (như 404 hoặc 500).
3. Không phải là yêu cầu HTTP chuẩn: JSONP không thực sự gửi yêu cầu HTTP theo cách tiêu chuẩn như Ajax. Thay vào đó, nó chỉ thực thi mã JavaScript từ một nguồn khác, do đó không thể gửi thông tin phức tạp như các dữ liệu POST trong Ajax.
4. Tiềm ẩn rủi ro bảo mật: Vì JSONP cho phép thực thi mã từ một nguồn bên ngoài, nó có thể dẫn đến các vấn đề bảo mật, chẳng hạn như tấn công XSS (Cross-Site Scripting), nếu server trả về mã độc hại.

Kết luận

JSONP là một kỹ thuật hữu ích để vượt qua chính sách cùng nguồn gốc, nhưng nó có những hạn chế rõ ràng và không được coi là một phần của Ajax vì cách thức hoạt động và mục đích sử dụng khác nhau. Các kỹ thuật hiện đại như CORS (Cross-Origin Resource Sharing) đã được phát triển để xử lý các vấn đề liên quan đến cùng nguồn gốc một cách an toàn và hiệu quả hơn.

• Javascript