JSONP thực sự là một mẹo đơn giản để vượt qua chính sách tên miền tương tự XMLHttpRequest . (Như bạn biết, người ta không thể gửi yêu cầu AJAX (XMLHttpRequest) đến một tên miền khác.)
Vì vậy - thay vì sử dụng XMLHttpRequest, chúng ta phải sử dụng các thẻ HTMLl tập lệnh , những thẻ bạn thường sử dụng để tải các tệp JS, để JS lấy dữ liệu từ một tên miền khác. Nghe có vẻ lạ?
Điều đó là - hóa ra các thẻ script có thể được sử dụng theo cách tương tự như XMLHttpRequest ! Kiểm tra này:
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
Bạn sẽ kết thúc với một đoạn script trông như thế này sau khi nó tải dữ liệu:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Tuy nhiên điều này hơi bất tiện, vì chúng tôi phải tìm nạp mảng này từ thẻ script . Vì vậy, những người tạo JSONP đã quyết định rằng nó sẽ hoạt động tốt hơn (và nó là):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
Chú ý chức năng my_callback đằng kia? Vì vậy - khi máy chủ JSONP nhận được yêu cầu của bạn và tìm thấy tham số gọi lại - thay vì trả về mảng JS đơn giản, nó sẽ trả về điều này:
my_callback({['some string 1', 'some data', 'whatever data']});
Xem lợi nhuận ở đâu: bây giờ chúng tôi nhận được cuộc gọi lại tự động ( my_callback ) sẽ được kích hoạt sau khi chúng tôi nhận được dữ liệu. Đó là tất cả những gì cần biết về JSONP : đó là thẻ gọi lại và thẻ script.
LƯU Ý:
Đây là những ví dụ đơn giản về việc sử dụng JSONP, đây không phải là các tập lệnh sẵn sàng sản xuất.
Trình diễn RAW JavaScript (nguồn cấp dữ liệu Twitter đơn giản bằng JSONP):
<html>
<head>
</head>
<body>
<div id = 'twitterFeed'></div>
<script>
function myCallback(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
document.getElementById('twitterFeed').innerHTML = text;
}
</script>
<script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
</body>
</html>
Ví dụ jQuery cơ bản (nguồn cấp dữ liệu Twitter đơn giản sử dụng JSONP):
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
$('#twitterFeed').html(text);
}
});
})
</script>
</head>
<body>
<div id = 'twitterFeed'></div>
</body>
</html>
JSONP là viết tắt của JSON với Padding . (kỹ thuật được đặt tên rất kém vì nó thực sự không liên quan gì đến những gì hầu hết mọi người sẽ nghĩ về cái tên pad padding.)