如何在JavaScript中使用JSONP进行跨域通信？

如何在 JavaScript 中创建 JSONP 进行跨域通信

在处理跨域请求时，臭名昭著的同源策略可以成为一个障碍。然而，JSONP（带填充的 JSON）被设计为绕过此限制的巧妙解决方案。

JSONP 是如何工作的？

JSONP 巧妙地利用了 Web 浏览器的行为。通过在 GET 请求中提供名为回调的参数，您可以允许服务器将 JSON 数据包装在 JavaScript 函数调用中。然后，浏览器执行该函数，并将 JSON 数据作为参数传递。

在 PHP 中创建服务器端回调 API

如果您在服务器，执行以下步骤：

1. 接受 GET 请求中的回调参数。
2. 设置适当的 HTTP 标头，包括 Content-Type 和 Access-Control 标头。
3. 将回调 JavaScript 函数包装在 JSON 数据周围。

<code class="php"><?php $data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

在客户端使用 JSONP 服务

使用 JSONP在客户端服务，请按照以下示例：

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>

此脚本创建一个接收器函数来处理传入的 JSON 数据，然后动态加载 data-service.php 文件，提供回调函数作为争论。

以上是如何在JavaScript中使用JSONP进行跨域通信？的详细内容。更多信息请关注PHP中文网其他相关文章！