Using Twitter REST API in JSON Format with AJAX

Question

I'm trying to do AJAX on Twitter REST API (JSON Format). I did the below thing, But, nothing happens.

Not getting any response from server (Twitter). Did I miss something?

function getRecentTweet(){

        twitterUsername = document.getElementById("twitterUsername").value;

        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }
        else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("GET", "http://api.twitter.com/1/statuses/user_timeline/" + twitterUsername + ".json", true);
        xhr.send(null);

        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4) {
                if(xhr.status == 200) {
                    var jsonObj = eval(responseJSON);
                    document.getElementById("twitterStream").innerHTML = jsonObj[0].text;
                }
            }
        } 
    }

Thanks!

Answer 1

Yes, cross-domain AJAX calls are not allowed. You need to use JSONP.

Make a request to Twitter's API and append the callback parameter. Here's a sample url:

http://api.twitter.com/1/statuses/user_timeline/hulu.json?callback=myFunction

The response from Twitter then will contain executable JavaScript code with the name of the function you specified as the callback parameter. So Twitter's response looks like:

myFunction(<JSON here>);

Since cross-domain is an issue, you need to add a script tag to the page, and set the src attribute to the above URL. This can be created and injected into the page dynamically with JavaScript.

<script src=" ... hulu.json?callback=myFunction"></script>

Then define a global function myFunction on the page that always gets called whenever the response from Twitter returns. This too can be predefined or dynamically generated.

<script>
function myFunction(data) {
    console.log(data);
}
</script>

Answer 2

You may want to avoid using eval as well and utilize JSON.parse() method.

If you want you can get the response, save it to a local json file server side, and access it from there utilizing AJAX.

So you could call your server side script and avoid using JSONP which is executed JavaScript code. Twitter seems safe enough but you never know after LinkedIn, Yahoo, security breaches.