将JSON格式的Twitter REST API与AJAX一起使用

Question

我正在尝试在Twitter REST API（JSON格式）上执行AJAX。 我做了以下事情，但是什么也没发生。

无法从服务器（Twitter）获得任何响应。 我错过了什么？

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;
                }
            }
        } 
    }

谢谢！

Answer 1

是的，不允许跨域AJAX调用。 您需要使用JSONP。

向Twitter的API发出请求，并附加callback参数。 这是一个示例网址：

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

然后，来自Twitter的响应将包含可执行JavaScript代码，其中包含您指定为回调参数的函数的名称。 因此，Twitter的响应如下所示：

myFunction(<JSON here>);

由于跨域是一个问题，因此您需要在页面上添加脚本标签，并将src属性设置为上述URL。 可以使用JavaScript动态创建并注入到页面中。

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

然后在页面上定义一个全局函数myFunction ，每当来自Twitter的响应返回时，该函数总是被调用。 这也可以是预定义的或动态生成的。

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

Answer 2

您可能还想避免使用eval并使用JSON.parse()方法。

如果希望得到响应，请将其保存到本地json文件服务器端，然后使用AJAX从那里访问它。

因此，您可以调用服务器端脚本，而避免使用执行JavaScript代码的JSONP。 Twitter似乎足够安全，但是您对LinkedIn，Yahoo，安全漏洞一无所知。