masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial JSONP

Tutorial JSONP

Dalam bab ini kami akan memperkenalkan anda kepada pengetahuan JSONP.

Jsonp (JSON dengan Padding) ialah "mod penggunaan" json, yang membenarkan halaman web mendapatkan data daripada nama domain lain (tapak web), iaitu membaca data merentas domain.

Mengapa kita memerlukan teknologi khas (JSONP) untuk mengakses data daripada domain (tapak web) yang berbeza? Ini kerana dasar asal yang sama.

Dasar asal yang sama ialah dasar keselamatan terkenal yang dicadangkan oleh Netscape Semua penyemak imbas yang menyokong JavaScript kini menggunakan dasar ini.

Aplikasi JSONP

1. Data format JSONP sebelah pelayan

Jika pelanggan ingin mengakses: http://www.php.cn/try/ajax/jsonp .php? jsonp=callbackFunction.

Andaikan pelanggan menjangkakan data JSON akan dikembalikan: ["customername1", "customername2"].

Data yang sebenarnya dikembalikan kepada klien dipaparkan sebagai: callbackFunction(["customername1","customername2"]).

Kod jsonp.php sebelah pelayan ialah: 

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

2 Pelanggan melaksanakan fungsi panggil balik 

<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>

Paparan halaman

<div. id=" divCustomers"></div>

Kod lengkap halaman klien

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JSONP 实例</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
        function callbackFunction(result, methodName)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
<script type="text/javascript" src="http://www.php.cn/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

jQuery menggunakan JSONP

Kod di atas boleh menggunakan contoh kod jQuery : 

<!DOCTYPE html>
<html>
<head>
<title>JSONP 实例</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.php.cn/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html); 
});
</script>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <title>JSONP 实例</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script> $.getJSON("http://www.php.cn/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); }); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya tiada
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan