Show toolbar

2014年3月11日 星期二

Dynamic get jsonp

標題:動態取得Jsonp資料
JavaScript (index.html):
<div id="output_getjsonp"></div>
<script type="text/javascript">
var getjsonp = function() {
    this.head = document.getElementsByTagName('head')[0] || document.documentElement;
    this.current = null;
    this.queue = [];
};
getjsonp.prototype.request = function(q) {
    var fid = (q.fid||'_getjsonp') + new Date().getTime();
    console.log(fid);
    var script = document.createElement('script');
    script.src = q.url.replace('callback=?', 'callback=' + fid);
    this.queue.push({
        fid : fid,
        script : script,
        load : q.load
    });
    if(!this.current) this.action();
};
getjsonp.prototype.action = function() {
    var self = this;
    this.current = null;
    if(this.queue.length) {
        this.current = this.queue.shift();
        window[this.current.fid] = function(data) {
            self.head.removeChild(self.current.script);
            self.current.load && self.current.load(data);
            self.action();
        };
        this.head.appendChild(this.current.script);
    }
};

var jsonp = new getjsonp();
jsonp.request({
    fid : '_myjsonp',
    url : 'http://codeboxy.blogspot.com/feeds/posts/default?alt=json&callback=?',
    load : function(data) {
        document.getElementById('output_getjsonp').innerHTML = data.feed.entry[0].title.$t;
    }
});
</script>

範例結果:

說明:
動態使用jsonp取得json資料,測試支援版本:
  • Google Chrome 33.0.1750.146 m
  • Firefox 27.0.1
  • IE 11.0.9600.16518

沒有留言:

張貼留言