使用豆瓣API显示图书列表

杨竹青

你可以使用豆瓣提供的豆瓣秀代码生成器把新收藏自动显在blog上，豆瓣开放了API以后，你还可以根据API自己写一个。下面就是一个简单的示例（效果可以看本站的页尾部分），其中douban.params是请求的参数列表，cat是显示类别，比如书籍book或者电影movie等，start-index是开始的索引，max-results是返回的最大结果，alt是请求返回类型（默认为xml，还可以是json或者xd），apikey是你在豆瓣申请的apikey，最后的callback是回调函数，其他的参数可以看豆瓣API参考手册。因为本例是使用JSONP的方式处理返回的JSON数据，根据豆瓣的规定，这里alt的值应该是xd。parseEntry和render是主要的两个函数，前者分析返回的JSON数据，后者控制数据在页面中的显示。如果你想自己动手写一个玩玩，这是示例也是个不错的开始。


function $(el){ return document.getElementById(el);}
var douban = {
    baseUrl:'http://api.douban.com/people/nkuer/collection',
    params:{
        cat:'book',
        'start-index':1,
        'max-results':50,
        alt:'xd',
        apikey:'*******',
        callback:'douban.appendHTML'
    },
    magicBox:'douban',
    buildUrl:function(){
        var ps = this.params,string='';
        for(var i in ps)
            string += i + '='+ ps[i]+ '&';
        return this.baseUrl+"?"+string;
    },
    appendRequestScript:function(url){
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.src = url;
        script.charset = 'utf-8';
        head.appendChild(script);
    },
    appendHTML:function(json){
        $(this.magicBox).innerHTML = this.render(this.parseJSON(json));
    },
    parseJSON:function(json){
        var itemCollection=[];
        for(var i in json.entry)
            itemCollection.push(this.parseEntry(json.entry[i]));
        return itemCollection;
    },
    parseEntry:function(entry){
        var linkItem = {};
        var linkEntry  = entry["db:subject"]["link"];
        linkItem.title = entry["db:subject"]["title"]["$t"];
        linkItem.src = 'http://panweizeng.com/images/douban-no-image.jpg';
        for(var i in linkEntry){
            if(linkEntry[i]['@rel'] == 'image')
                linkItem.src = linkEntry[i]['@href'];
            if(linkEntry[i]['@rel'] == 'alternate')
                linkItem.link = linkEntry[i]['@href'];
        }
        return linkItem;
    },
    render:function(itemCollection){
        var html='<table><tr>';
        for(var i in itemCollection){
            html+='<td><a href="'
                +itemCollection[i].link+'" target="_blank"><img src="'
                +itemCollection[i].src+'" alt="'
                +itemCollection[i].title+'" border="0" /></a></td>';
        }
        return html+"</tr></table>";
    },
    init:function(){
        this.appendRequestScript(this.buildUrl());
    }
}
douban.init();