Bagaimanakah JSONP Boleh Menyelesaikan Masalah Komunikasi AJAX Merentas Domain jQuery?

jQuery AJAX Cross-Domain Communication Challenge

Apabila menghadapi permintaan AJAX merentas domain, di mana dokumen HTML daripada satu domain cuba membuat meminta ke domain yang berbeza, kesukaran timbul. Mari kita terokai senario dengan dua fail PHP, test.php dan testserver.php:

test.php:

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
  $(function() {
    $.ajax({
      url: "testserver.php",
      success: function() {alert("Success")},
      error: function() {alert("Error")},
      dataType: "json",
      type: "get"
    });
  });
</script>

testserver.php:

<?php $arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

Apabila kedua-dua fail dihoskan pada pelayan yang sama, permintaan AJAX berjaya. Walau bagaimanapun, apabila ia diletakkan pada pelayan yang berbeza, permintaan itu gagal, mencetuskan amaran "Ralat". Ini disebabkan oleh Same Origin Policy (SOP) penyemak imbas, yang mengehadkan perkongsian data merentas domain.

Penyelesaian: Menggunakan JSONP

Untuk mengatasi SOP, kita boleh menggunakan JSONP (JSON dengan Padding). JSONP membenarkan data dihantar sebagai panggilan fungsi, dengan itu memintas sekatan yang dikenakan oleh SOP.

jQuery:

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Notice! JSONP <p><strong>PHP:</strong></p><pre class="brush:php;toolbar:false"><?php $arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo $_GET['callback'] . "(" . json_encode($arr) . ");";
?>

Dalam kod yang diubah suai ini, permintaan JavaScript termasuk 'dataType: 'jsonp'' untuk menunjukkan penggunaan JSONP. Skrip PHP mendapatkan semula nama fungsi panggil balik yang dihantar oleh jQuery melalui '$_GET['panggilan balik']' dan menggunakannya untuk membentuk output. Output dalam skrip PHP sepatutnya muncul sebagai fungsi panggil balik diikuti oleh data JSON, memastikan data dipindahkan sebagai panggilan fungsi.

Sebagai alternatif, jQuery menyediakan kaedah $.getJSON() , singkatan untuk pengendalian Permintaan JSONP. Walau bagaimanapun, ia memerlukan URL untuk memasukkan 'panggilan balik=?' sebagai parameter GET, di mana jQuery memasukkan kaedah panggil baliknya sendiri secara dinamik.

Atas ialah kandungan terperinci Bagaimanakah JSONP Boleh Menyelesaikan Masalah Komunikasi AJAX Merentas Domain jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!