跨域问题之jsonp的实现

最新推荐文章于 2024-11-01 07:44:09 发布

原创最新推荐文章于 2024-11-01 07:44:09 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp

web开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种实现跨域请求的方法——JSONP，并提供了客户端和服务端的具体实现示例。客户端通过创建script标签并设置回调函数来发起请求，而服务端则返回带有回调函数名的JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp是一种json数据的使用方式，可以实现不同域名之间的请求和发送数据。

客户端实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
         var flightHandler = function(data){
            alert(data);
     } 
         var url = "http://119.29.176.18/jsonp.php?jsoncallback=flightHandler";
      // 创建script标签，设置其属性
     var script = document.createElement('script');
     script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
     document.getElementsByTagName('head')[0].appendChild(script);

    </script>
</head>
<body>

</body>
</html>

服务器端实现方式：

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

jquery实现客户端：

jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: true,
             url: "http://119.29.176.18/jsonp.php",
             dataType: "jsonp",
             jsonp: "jsoncallback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)     
             success: function(json){
                alert(json);
             },
             error: function(){
                 alert('fail');
             }
         });
     });

不正确之处还望指正。