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>:
Để 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.
JSONP không thực sự là Ajax vì những lý do sau:
<script>.<script> và không có cách nào để xử lý các lỗi HTTP (như 404 hoặc 500).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.
