jQuery 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.runoob.com/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 fail pelayan jsonp.php ialah:

kod fail jsonp.php

2. Pelanggan melaksanakan fungsi callbackFunction

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

paparan halaman

<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>

Kod lengkap halaman pelanggan

jQuery menggunakan JSONP

Kod di atas boleh menggunakan contoh kod jQuery:

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