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

jQuery AJAX 跨域通信挑战

当遇到跨域 AJAX 请求时，来自一个域的 HTML 文档尝试创建一个请求到不同的域，就会出现困难。让我们探讨一个包含两个 PHP 文件 test.php 和 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);
?>

当两个文件托管在同一服务器上时，AJAX 请求成功了。但是，当它们放置在不同的服务器上时，请求会失败，从而触发“错误”警报。这是由于浏览器的同源策略（SOP）限制了跨域数据共享。

解决方案：利用 JSONP

要克服 SOP，我们可以使用 JSONP（带填充的 JSON）。 JSONP 允许将数据作为函数调用发送，从而规避 SOP 施加的限制。

jQuery:

$.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:

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

在此修改后的代码中，JavaScript 请求包含 'dataType: 'jsonp'' 表示使用 JSONP。 PHP 脚本通过“$_GET['callback']”检索 jQuery 发送的回调函数名称，并使用它来形成输出。 PHP 脚本中的输出应显示为回调函数，后跟 JSON 数据，确保数据作为函数调用进行传输。

或者，jQuery 提供 $.getJSON() 方法，这是处理的简写JSONP 请求。但是，它要求 URL 包含“callback=?”作为 GET 参数，jQuery 动态插入自己的回调方法。

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