Bagaimana Menggunakan JSONP untuk Komunikasi Merentas Domain dalam JavaScript?

Cara Membuat JSONP dalam JavaScript untuk Komunikasi Merentas Domain

Apabila berurusan dengan permintaan silang asal, dasar asal yang sama yang terkenal boleh menjadi penghalang. Walau bagaimanapun, JSONP (JSON dengan Padding) telah direka bentuk sebagai penyelesaian bijak untuk memintas sekatan ini.

Bagaimana JSONP Berfungsi?

JSONP bijak memanfaatkan gelagat penyemak imbas web . Dengan menyediakan parameter yang dipanggil panggil balik dalam permintaan GET, anda membenarkan pelayan membungkus data JSON dalam panggilan fungsi JavaScript. Penyemak imbas kemudian melaksanakan fungsi tersebut, menghantar data JSON sebagai hujah.

Mencipta API Panggilan Balik Sisi Pelayan dalam PHP

Jika anda menggunakan PHP pada pelayan, laksanakan langkah berikut:

1. Terima parameter panggil balik dalam permintaan GET.
2. Tetapkan pengepala HTTP yang sesuai, termasuk pengepala Jenis Kandungan dan Kawalan Akses.
3. Balutkan fungsi JavaScript panggil balik di sekeliling data JSON.

<code class="php"><?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

Menggunakan Perkhidmatan JSONP di Bahagian Pelanggan

Untuk menggunakan JSONP perkhidmatan pada bahagian pelanggan, ikut contoh ini:

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>

Skrip ini mencipta fungsi penerima untuk mengendalikan data JSON yang masuk, kemudian memuatkan fail data-service.php secara dinamik, menyediakan fungsi panggil balik sebagai hujah.

Atas ialah kandungan terperinci Bagaimana Menggunakan JSONP untuk Komunikasi Merentas Domain dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!