Rumah >hujung hadapan web >tutorial js >Bagaimanakah JSONP Boleh Menyelesaikan Masalah AJAX Cross-Domain jQuery?

Bagaimanakah JSONP Boleh Menyelesaikan Masalah AJAX Cross-Domain jQuery?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-30 09:32:14387semak imbas

How Can JSONP Solve jQuery's Cross-Domain AJAX Problems?

JQuery AJAX Cross-Domain Dilemma: Melangkaui CORS dengan JSONP

Berinteraksi dengan data merentas domain yang berbeza menimbulkan cabaran disebabkan Perkongsian Sumber Silang Asal (CORS) sekatan. Apabila cuba melaksanakan permintaan AJAX dari satu domain ke domain lain, seperti test.php pada localhost dan testserver.php pada pelayan jauh, penyemak imbas menguatkuasakan sekatan ini, yang membawa kepada makluman "Ralat".

Untuk mengatasi ini halangan, JSONP (JSON dengan Padding) muncul sebagai penyelesaian yang berdaya maju. Ia memanfaatkan fleksibiliti elemen skrip untuk mendapatkan semula data merentas domain.

Pengubahsuaian jQuery:
Ubah suai test.php untuk menggunakan JSONP dengan menukar parameter dataType kepada 'jsonp'.

Pengubahsuaian PHP:
Laraskan testserver.php untuk menggemakan respons JSONP dengan panggilan balik yang disediakan oleh jQuery.

Pelaksanaan:

jQuery (test.php):

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
    success: function(json){
        // do stuff with json (in this case an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }       
});

PHP (testserver.php):

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

Kaedah Ringkas Menggunakan $.getJSON():
Sebagai alternatif, gunakan kaedah trengkas $.getJSON(), yang secara automatik menambah 'panggilan balik=?' ke URL sebagai parameter GET.

$.getJSON("testserver.php", function(json){
    // do stuff with json (in this case an array)
    alert("Success");
});

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn