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

jQuery AJAX Cross-Domain Dilemma: Bypassing CORS with JSONP

Interacting with data across different domains poses challenges due to Cross-Origin Resource Sharing (CORS) restrictions. When attempting to perform an AJAX request from one domain to another, such as test.php on localhost and testserver.php on a remote server, browsers enforce these restrictions, leading to "Error" alerts.

To overcome this obstacle, JSONP (JSON with Padding) emerges as a viable workaround. It leverages the flexibility of script elements to retrieve data across domains.

jQuery Modifications:
Modify test.php to utilize JSONP by changing the dataType parameter to 'jsonp'.

PHP Modifications:
Adjust testserver.php to echo the JSONP response with the callback provided by jQuery.

Implementation:

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) . ");";
?>

Simplified Method Using $.getJSON():
Alternatively, use the $.getJSON() shorthand method, which automatically appends 'callback=?' to the URL as a GET parameter.

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

The above is the detailed content of How Can JSONP Solve jQuery's Cross-Domain AJAX Problems?. For more information, please follow other related articles on the PHP Chinese website!