码迷,mamicode.com
首页 > Web开发 > 详细

JSONP的客户端的具体实现

时间:2015-12-17 20:55:30      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

JSONP的客户端的具体实现
1.远程调用一个js,代码如下:
        <script type="text/javascript">
        var localHandler = function(data){
        alert(‘我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:‘ + data.result);
    };
    </script>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
        remote.js文件代码如下:
        localHandler({"result":"我是远程js带来的数据"});
2.动态生成脚本
        <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert(‘你查询的航班结果是:票价 ‘ + data.price + ‘ 元,‘ + ‘余票 ‘ + data.tickets + ‘ 张。‘);
    };
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性
    var script = document.createElement(‘script‘);
    script.setAttribute(‘src‘, url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName(‘head‘)[0].appendChild(script);
    </script>
        flightHandler({
                    "code": "CA1998",
                    "price": 1780,
                    "tickets": 5
        });
3.封装代码
                把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。

JSONP的客户端的具体实现

标签:

原文地址:http://www.cnblogs.com/ricesm/p/5055045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!