以JSON格式使用Twitter REST API和AJAX

我试图在Twitter REST API（JSON格式）上执行AJAX。我做了下面的事情，但没有任何反应。以JSON格式使用Twitter REST API和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; 
       } 
      } 
     } 
    }

谢谢！

来源

2010-07-18 heapzero

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

向Twitter的API发出请求并追加callback参数。下面的示例网址：

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

来自Twitter的响应，那么将包含可执行的JavaScript代码与您指定为回调参数的函数的名称。因此，Twitter的回应是这样的：

myFunction(<JSON here>);

由于跨域是一个问题，你需要的脚本标记添加到页面中，并设置src属性到上述网址。这可以通过JavaScript动态创建并注入页面。

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

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

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

来源

2010-07-18 20:32:58 Anurag

感谢Anurag的详细解答！ – heapzero 2010-07-18 20:43:19

@heapzero - 不客气。您可能还想看看现有的库，如jQuery，MooTools等......已经解决了这个问题。或者如果你想坚持使用纯Javascript，那么他们现有的解决方案可以帮助你更快地写你的。 – Anurag 2010-07-18 20:50:06

您可能希望避免使用eval以及和利用JSON.parse()方法。

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

因此，您可以调用您的服务器端脚本，并避免使用执行JavaScript代码的JSONP。 Twitter似乎足够安全，但你永远不知道LinkedIn，雅虎，安全漏洞。

来源

2012-07-15 17:48:41

以JSON格式使用Twitter REST API和AJAX

回答

相关问题