by Hozefa
11. August 2012 12:34
Say you have a place holder to display the results of ajax call like below :
<div>
<span id="lblUsername">Twitter Handle : </span>
<input id="txtUsername" type="text" />
<br />
<input id="btnTwitterGet" type="button" value="Get Stats" />
<div id="ShowTwitterStats"></div>
</div>
then on the click of btnTwitterGet, you will call the following ajax that will append the list items of the data returned in success callback.
$("#btnTwitterGet").live("click", function () {
var twitterHandle = $("#txtUsername").attr("value");
if (twitterHandle !== null) {
//Make a ajax call to fetch the Twitter Stats
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: 'https://api.twitter.com/1/users/show.json',
data: { screen_name: twitterHandle, include_entities: true },
success: function (data, textStatus, XMLHttpRequest) {
if (data !== null && data !== undefined) {
$("#ShowTwitterStats").append("<ul id='TwitterStatsList'></ul>");
$.each(data, function (key, val) {
$("#TwitterStatsList").append("<li>" + key + " : " + val + "</li>");
});
}
},
error: function (req, status, error) {
alert('Error: ' + status);
}
});
}
});
You can get more json calls to fetch the timeline or the twitter trends. For a complete list of the twitter apis refer to - Twitter APIs REST