JSONP如何解决jQuery AJAX跨域问题？

jQuery AJAX 跨域问题

在提供的场景中，两个 PHP 文件（test.php 和 testserver.php）使用以下方式进行通信jQuery 的 AJAX，当它们驻留在不同的服务器上时，就会出现跨域限制。服务器 A 托管 test.php（例如 localhost），而服务器 B 托管 testserver.php（例如 Web 服务器）。

问题：
尽管成功执行了 AJAX 请求当文件位于同一服务器上时，如果它们位于不同的服务器上，则会失败并出现错误。这是由于同源策略 (SOP)。

解决方案：
为了解决这个跨域问题，采用了 JSONP（带有 Padding 的 JSON）。 JSONP 利用回调来绕过浏览器限制。

实现：

jQuery (test.php):

$.ajax({
    url: "http://domain.example/path/to/file/testserver.php",
    dataType: 'jsonp', // Notice! JSONP (lowercase 'P')
    success: function(json){
        // Handle JSON response (an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }      
});

PHP (testserver.php):

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
$callbackName = $_GET['callback']; // Get the callback name from GET params
echo $callbackName."(".json_encode($arr).");";
?>

说明：

1. jQuery 的 $.ajax() 方法被修改为使用 'jsonp' 作为dataType.
2. 传递给 $.ajax() 的回调函数被分配给 PHP 变量$callbackName。
3. PHP 脚本使用callbackName 值在函数调用中嵌入 JSON 数据。
4. 这允许浏览器动态生成 <script> 。使用 JSON 数据标记，绕过 SOP。</script>

注意：
另一种 jQuery 方法是 $.getJSON()，它通过附加 ' 来更简洁地处理 JSONP 请求回调=？'到网址。但是，必须更改 URL 以包含此参数，$.getJSON() 才能正常运行。

以上是JSONP如何解决jQuery AJAX跨域问题？的详细内容。更多信息请关注PHP中文网其他相关文章！