jsonp

Module

Method

io.jsonp()
void jsonp ( url , [ data , callback ] )
发送 jsonp 请求,将返回 json 信息作为第一个参数调用 callback 回调.
Parameters:
  • url (string) – 请求地址
  • data (Object|string) – 请求附带的参数,参见 data .
  • callback (function) – 请求成功后的回调,参见 success .
Returns:

代表本次请求的 xhrObj

Return type:

XhrObj

void jsonp ( url , [ callback ] )
data 可忽略,同上个函数描述.

实际上该函数是 IO 的 shortcut

IO.jsonp = function(url, data, callback) {
    // data 参数可省略
    if (S.isFunction(data)) {
        callback = data;
        data = undefined;
    }

    return new IO({
        type:"get",
        url: url,
        data: data,
        success: callback,
        dataType: "jsonp"
    });
};

Demo

从 flickr 中动态获取图片信息

<!DOCTYPE html>
<html>
<head>
    <style>
        button { margin:10px; }
        div { color:blue; font-weight:bold; }
        span { color:red; }
        
         .loading {
             background: url("http://img02.taobaocdn.com/tps/i2/T16WJqXaXeXXXXXXXX-32-32.gif") no-repeat scroll 50% 50% transparent;
             width: 100px;
             height: 100px !important;
             margin: 20px;
         }
         
    </style>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
    <button id='jsonp'>get pics from flickr</button>
    <div id="photo-list"></div>
<script>
    KISSY.use('node,io',function (S,Node,IO) {
        var $ = Node.all,
            photoList = $('#photo-list');
        $("#jsonp").attr("disabled",false);
        $("#jsonp").on("click", function () {
            $(this).attr("disabled",true);
            photoList.addClass('loading');

            new IO({
                dataType:'jsonp',
                url:"http://api.flickr.com/services/rest/", 
                data:{
                    'method': 'flickr.favorites.getPublicList',
                    'api_key': '5d93c2e473e39e9307e86d4a01381266',
                    'user_id': '26211501@N07',
                    'per_page': 10,
                    'format': 'json'
                },
                jsonp:"jsoncallback",    
                success:function (data) {
                    var html = 'Fetch photo failed, pls try again!';
                   
                    if (data.stat === 'ok') {
                        html='';
                        S.each(data.photos.photo, function (item, i) {
                            html += '<img style="display:none" src="http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg" />';
                        });
                    }
        
                    photoList.html(html).all('img').each(function (img) {
                        img.on('load', function () {
                            photoList.removeClass('loading');
                            img.detach();
                            img.fadeIn(3);
                        });
                    });
                }
            });
    
        });
    });    
</script>

</body>
</html>

Note

上述例子中的 jsonp 参数含义, 请参见 cfg.jsonp