將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，安全漏洞一無所知。