Json和Jsonp理论实例代码详解(2)_H5之家 - 中国HTML5教程资源分享第一站

其中JavaScript文件引用的是8888的remote.js文件。

　　复制代码代码如下:

　　alert('我是远程文件');

运行本地服务器网站后效果为

现在最简单的跨域成功了。
2.我们在1的基础上进行修改一下，先看代码

　　复制代码代码如下:

　　<html>
    <head>
        <title>l</title>
        <script type="text/javascript">
            function aehyok(data)
            {
                alert(data.result);
            }
        </script>
        <script type="text/javascript" src="" ></script>
    </head>
    <body></body>
</html>

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

　　复制代码代码如下:

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

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

调用成功。显示本地函数被跨域的远程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>

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

　　复制代码代码如下: