如何在 JavaScript 中创建 JSONP 进行跨域通信
在处理跨域请求时,臭名昭著的同源策略可以成为一个障碍。然而,JSONP(带填充的 JSON)被设计为绕过此限制的巧妙解决方案。
JSONP 是如何工作的?
JSONP 巧妙地利用了 Web 浏览器的行为。通过在 GET 请求中提供名为回调的参数,您可以允许服务器将 JSON 数据包装在 JavaScript 函数调用中。然后,浏览器执行该函数,并将 JSON 数据作为参数传递。
在 PHP 中创建服务器端回调 API
如果您在服务器,执行以下步骤:
- 接受 GET 请求中的回调参数。
- 设置适当的 HTTP 标头,包括 Content-Type 和 Access-Control 标头。
- 将回调 JavaScript 函数包装在 JSON 数据周围。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <code class = "php" ><?php
$data = '{}' ;
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 {
header( 'Content-Type: application/json; charset=utf8' );
echo $data ;
}
?></code>
|
登录后复制
在客户端使用 JSONP 服务
使用 JSONP在客户端服务,请按照以下示例:
1 2 3 4 5 6 | <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中文网其他相关文章!