Json和Jsonp理论实例代码详解(3)


<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript">
            function aehyok(data)
            {
                alert(data.result);
            }
        </script>
        <script type="text/javascript" src="https://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>


先将本地文件中添加一个js函数,然后调用远程服务器的js文件。

复制代码 代码如下:


aehyok({"result":"我是远程js带来的数据"});


这是在远程服务端js文件中的代码。
运行后效果

Json和Jsonp理论实例代码详解


调用成功。显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。

复制代码 代码如下:


<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "../Home/aehyok",
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback: "aehyok", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
            success: function (json) {
                alert("第二次"+json.result);
            },
            error: function () {
                alert('fail');
            }
        });
    });

function aehyok(data) {
        alert("第一次"+data.result);
    }
</script>


我是在asp.net mvc3.0项目中,所以后台在控制器中

复制代码 代码如下:


public string aehyok()
        {
            return "aehyok({\"result\":\"我是远程js带来的数据\"})";
        }


然后执行结果为

Json和Jsonp理论实例代码详解


通过调试可以发现URL:6247/Home/aehyok?callback=aehyok&_=1369235398641
callback=aehyok就是回调函数,在调用完后台返回是先执行aehyok(data)。
然后又执行success(json)。所以有两次的弹窗。
我现在只不过是在一个项目下进行,其实道理还是一样的。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdwpjw.html