Bagaimana untuk Membuat Panggilan Balik JSONP dalam JavaScript untuk Permintaan Merentas Domain?

Mencipta Panggilan Balik JSONP dalam JavaScript

Permintaan merentas domain boleh menimbulkan cabaran dalam pembangunan JavaScript. Walau bagaimanapun, JSONP (JSON dengan Padding) menyediakan penyelesaian kepada isu ini.

Mengubah suai API JSON Anda untuk JSONP

Untuk mendayakan keupayaan JSONP dalam API JSON anda, ikuti langkah mudah di bawah:

1. Terima Parameter "panggilan balik" dalam Permintaan GET:

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

2. Lilitkan Fungsi Panggilan Balik Sekitar Data Anda:

   $callback.'('.$data.');';

Menggunakan PHP sebagai contoh, kod di bawah menunjukkan langkah-langkah ini:

<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

Untuk menggunakan perkhidmatan JSONP, anda boleh menggunakan teg skrip HTML:

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>

<script src="data-service.php?callback=receiver"></script></code>

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