Bagaimanakah JSONP Menyelesaikan Isu Permintaan Silang Asal?

Permintaan Silang Asal dengan JSONP: Contoh Praktikal

Apabila menghadapi sekatan dasar silang asal, JSONP (JSON dengan Padding) menawarkan penyelesaian yang mudah. Walau bagaimanapun, butirannya boleh mengelirukan untuk difahami pada mulanya. Mari kita demystify proses dengan contoh jQuery, PHP dan JSONP yang mudah.

Melaksanakan JSONP untuk Permintaan Silang Asal

Pertimbangkan coretan kod yang salah berikut:

// jQuery
$.post('http://MySite.com/MyHandler.php', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res);
});

// PHP
<?php $fname = $_POST['firstname'];
if ($fname == 'Jeff') {
  echo 'Jeff Hansen';
}
?>

Untuk mendayakan permintaan silang asal, kami akan memanfaatkan JSONP. Begini caranya:

jQuery:

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res.fullname);
});

PHP:

<?php $fname = $_GET['firstname'];
if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({' . "'fullname' : 'Jeff Hansen'" . '})';
}
?>

Kunci Mata:

• ?panggilan balik=?: Parameter ini mengarahkan pelayan untuk menambahkan nama fungsi panggil balik pada respons JSON.
• res.fullname: Dalam JavaScript, kami mengakses nilai sifat menggunakan notasi titik. Walau bagaimanapun, dalam kes ini, kita perlu terlebih dahulu untuk menganggap respons sebagai objek JSON.

Mengembalikan HTML dalam Respons JSONP

Ya, anda boleh menyimpan HTML dalam respons JSONP. Ubah suai kod PHP seperti berikut:

<?php if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({
    'name': 'Jeff Hansen',
    'html': '<span>This is some HTML'
  })';
}
?>

Dalam JavaScript, anda kemudian boleh mengakses HTML menggunakan res.html.

Atas ialah kandungan terperinci Bagaimanakah JSONP Menyelesaikan Isu Permintaan Silang Asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!