Ajax is a wonderful technology that is heavily used in many places nowdays. Ajax is run in the browser using javascript to call a URL, and usually receive data back. One of the key restrictions of using Ajax to get data from a remote URL is that you cannot make cross-domain calls. This meaning, you cannot make an ajax call to domain1.com from domain2.com because of browser security restrictions. The workaround, is to make the cross domain ajax calls from your web server rather than the browser, and all is fine!

That was, until the introduction of JSON, and more importantly JSONP which allows you to make ajax calls to 3rd party domains from within the browser itself. What this means for you is that you can get data from JSONP supported APIs from within the browser itself, rather than telling your web server to do it for you.

This is also important for Twitter API usage. One of the key restrictions with the Twitter API is that any client IP address can only make x number of API calls per hour. If you’re making these API calls from your web server (which obviously only a static IP address), you could quickly use up your hourly allocation on a busy site. Twitter does allow you to “whitelist” your web application to give you a better hourly rate, but here’s a better way:

Use the clients, ie your users, to make the API calls from their browsers.

Admittedly, my example below is for any API calls that do not require authentication, however what it does enable you to do is to empower your user to make Twitter API calls in the browser using jQuery. So without further ado, here’s the code snippet:

$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=SteveReynolds&callback=?",

function(data){

$.each(data, function(i,item){
$("#tweets").append(item.text + "<BR/>");

});

});

What the code above assumes is that you have a <div id=”tweets”> or something where you can append the results, in this case the object in the JSON response “item.text” which is the tweet itself. You could for example, get “item.user.name” which would return the username for each tweet (which is useless as you know it’s all my tweets ) – but you get the idea. You also need to make sure you have previously called the jQuery library.

The other important factor of the code above is the URL we are using to call Twitter. We have appended “&callback=?” onto the end of it. This is to allow the jQuery call to pass the returned data to a callback function, which in this case is simply called “data” for the returned data, and “function()” for the callback.

Download the code here.

So, that’s it. It really is that simple. In my next tutorial I will show you how to do the above, but ajax it back to your server and save it to your database – in effect getting your users to do a lot of the hard work for you in the browser, and simply sending back the relevant results to your database.

This entry was posted on Monday, December 7th, 2009 and is filed under Development, Twitter, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.