Reading cross domain JSON (AJAX)

If you want to read JSON content from a different domain, let us say you want to read JSON content from http://twitter.com, then here is a simple example using JQUERY JSON API.

http://twitter.com JSON content link is http://api.twitter.com/1/statuses/public_timeline.json?callback=?.

Javascript example with jQuery.each() loop

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var JSONPUBICURL="http://api.twitter.com/1/statuses/public_timeline.json?callback=?";
var TWITTERURL="http://twitter.com/";
function getJSON()
{
var strHTML='';
var imgURL="";
$.getJSON(JSONPUBICURL,
function(data){
strHTML+='<table border="0px">';
$.each(data, function(i, item) {

    imgURL=item.user["profile_image_url"];

    strHTML+='<tr>';
    strHTML+='<td valign="top">';
    strHTML+='<img src="'+imgURL+'" alt="'+item.user["screen_name"]+'" title="'+item.user["screen_name"]+'" height="50px" width="50px"/>';
    strHTML+='</td>';
    strHTML+='<td valign="top" >';
    strHTML+='<a href="'+TWITTERURL+item.user["screen_name"]+'/statuses/'+item.id+'" target="_blank" >'+item.text+'</a><br/>';
    strHTML+=item.created_at+' [via '+item.source+']<br/>';
    strHTML+='</td>';
    strHTML+='</tr>';
});
strHTML+='</table>';
strHTML+='<div align="right" ><a href="'+TWITTERURL+'" target="_blank">more...</a></div>';
document.getElementById("tweets").innerHTML=strHTML;
});
}
</script>
<div id="tweets"></div>
<script>
    $(document).ready(getJSON());
</script>

Note: using this approach you can get the live tweets from http://twitter.com.

Javascript example with for loop

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var JSONPUBICURL="http://api.twitter.com/1/statuses/public_timeline.json?callback=?";
var TWITTERURL="http://twitter.com/";
function getJSON()
{

var strHTML='';
var imgURL="";

$.getJSON(JSONPUBICURL,
function(data){
strHTML+='<table border="0px">';
var length=data.length;
for(var i=0;i<length;i++)
{
    imgURL=data[i].user["profile_image_url"];
    strHTML+='<tr>';
    strHTML+='<td valign="top">';
    strHTML+='<img src="'+imgURL+'" alt="'+data[i].user["screen_name"]+'" title="'+data[i].user["screen_name"]+'" height="50px" width="50px"/>';
    strHTML+='</td>';
    strHTML+='<td valign="top" >';
    strHTML+='<a href="'+TWITTERURL+data[i].user["screen_name"]+'/statuses/'+data[i].id+'" target="_blank" >'+data[i].text+'</a><br/>';
    strHTML+=data[i].created_at+' [via '+data[i].source+']<br/>';
    strHTML+='</td>';
    strHTML+='</tr>';

}
strHTML+='</table>';
strHTML+='<div align="right" ><a href="'+TWITTERURL+'" target="_blank">more...</a></div>';
document.getElementById("tweets").innerHTML=strHTML;

});

}
</script>
<div id="tweets"></div>
<script>
    $(document).ready(getJSON());
</script>

for loop may be faster than jQuery.each() loop. see jQuery tests in Low Level JavaScript Performance.