Blogger JSON Feed With Jquery Ajax

Blogger JSON feed is a feed of blogger in the form of JSON. This feed is very important to learn. Because with this feed, you can create a slideshow related posts, recent posts, selected recent posts, dropdown menus with recent posts, etc. In the previous post, we had discussed the JSON feed with use traditional javascript.

The problem, the use of Javascript in certain circumstances can slow the loading process. In order to reduce the time of loading, you can use jquery ajax. In fact, we have also discussed the blogger JSON feeds in javascript ajax format. However, not all browsers can read this ajax. So jquery ajax is the solution of all our tutorials.

In general, to be able to read a feed with jquery ajax, you should write

$.ajax({url:'feedUrl',type:'get',dataType:"jsonp",success: function(json)});

Where, feedUrl is the url of feed JSON blogger, get is a method of http, jsonp is feedUrl data types, function is the function to handle the feed.

For example, consider the complete code below

$.ajax({
    url: 'http://www.threelas.com/feeds/posts/default?alt=json-in-script&max-results=9&callback=?',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl = "";
        var htmlcode = '<ul>';
        for (var i = 0; i < data.feed.entry.length; i++) {
                for (var j=0; j < data.feed.entry[i].link.length; j++)
                {
                     if (data.feed.entry[i].link[j].rel == "alternate")
                        {
                            posturl = data.feed.entry[i].link[j].href;
                            break;
                         }
                 }
            if("content" in data.feed.entry[i]){
                var postcontent = data.feed.entry[i].content.$t;
            }else if("summary" in data.feed.entry[i]){
                var postcontent = data.feed.entry[i].summary.$t;
            }else{
                var postcontent = "";
            }
            var re = /<\S[^>]*>/g;
            postcontent = postcontent.replace(re,"");
            //reduce postcontent to 200 characters
            if(postcontent.length > 200){
                postcontent = postcontent.substring(0,200);
            }
            var posttitle = data.feed.entry[i].title.$t;
            htmlcode += '<li><div><a href="'+posturl+'" target="_blank">'+posttitle+'</a></div><div>'+postcontent+'</div></li>';
        }
        htmlcode += '</ul>';
        document.getElementById('result').innerHTML = htmlcode;
    }
});​

Now, compare the above code with our tutorial on http://www.threelas.com/2012/02/basic-blogger-json-feed-api.html. The output of the above program is the same with the tutorial. However, with jquery ajax, loading process becomes shorter. And with jquery ajax, you are no longer need external callback script. You need to remember that, until this post we made for the first time, you can not delete, update, create a post, with the method of JSON feeds. To be more clear, note the demo below.