與JQuery和JSON一起製作自己的網站徽章

諸如Flickr，Felicious和Twitter之類的服務都提供可以添加到網站的JavaScript徽章或小部件。但是，如果您已經在網站上使用JavaScript框架（例如JQuery），為什麼要添加更多JavaScript？此外，自己製作更有趣。所有這些服務還提供JSON格式Feed API，並且滾動您自己的小部件很容易。這是我很快使用jQuery的Twitter鞭打。您會驚訝於它所需的代碼很少。

您需要使用的Twitter JSON API所需的只是一個URL：

http://twitter.com/status/user_timeline/sitepointdotcom.json?count=5&callback=yourfunction

用任何Twitter用戶名替換SitePointDotcom，將計數= 5數字更改為您希望檢索的推文數量和使用回調功能的名稱的函數，您就可以使用了。將該URL複製到瀏覽器的地址字段中，您可以下載JSON數據以查看：

yourfunction([ ... ]);

輸出是對您的JavaScript函數的調用。包含JSON對象集合的數組（每個推文一個）作為單個參數傳遞。這個想法是，您將腳本元素添加到網頁中，上面的URL作為源。這是繞過大多數瀏覽器中存在的AJAX安全限制所必需的，因為JavaScript無法將AJAX調用到當前一個以外的域以外的域。但是，可以從另一個域中包含一個JavaScript源文件。這是這些徽章工作的標準方式。

但是，我們將使用另一種方法，因為添加另一個腳本標籤並確保對我來說有一個回調功能聽起來很混亂。我們將在jQuery中使用非常方便的Getjson功能。不過，首先，我們需要一些HTML來放置小部件數據：

<div>
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

這個想法是，所有Twitter更新都將作為單獨的段落元素插入該DIV元素。很好，簡單。我也喜歡它，因為如果JavaScript出於某種原因無法運行，那麼頁面上剩下有意義的內容，而不是從未完成的加載動畫。

因此，我希望該腳本在該頁面準備就緒後被解僱，並且在jQuery中這樣做的最佳方法是使用$（文檔）.dready：

$(document).ready(function(){
  //our code goes here...
});

Getjson方法的所有需求都是URL。此功能的好處是，如果添加查詢字符串參數回調=？到URL的末尾，jQuery將為您處理回調功能：

$(document).ready(function(){
  var tweeturl = "http://twitter.com/status/"
      +"user_timeline/sitepointdotcom.json?count=5"
      +"&callback=?";
  $.getJSON(tweeturl, function(data){
    //read the JSON data here...  
  });
});

jQuery將將JSON數據傳遞給第二個參數中指定的作為數據變量的函數。然後，我們可以使用每種方法循環瀏覽所有推文，然後將它們插入我們頁面的HTML：

yourfunction([ ... ]);

如果您去檢查演示，您現在會看到我們有一個窗口小部件可以吸引Twitter數據，將每個推文轉換為HTML段落，然後將它們插入我們頁面的HTML。我們還向推文中添加了奇數甚至偶數的類值，以便我們可以在CSS中實現交替的背景顏色。到目前為止還不錯，但是缺少什麼？好吧，我認為任何Twitter徽章都必須至少鏈接@replies，hashtags和url；並添加一些JavaScript正則表達式將為我們做好這項工作：

<div>
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

就是這樣！去看看成品。那有多簡單？

可以使用美味的Flickr，last.fm甚至Yahoo Pipes採用相同的方法。也有足夠的改進空間。您可以添加時間信息，鏈接到Tweet URL，添加化身等等。 SitePoint的另一位技術編輯Raena建議您甚至可以將所有這些服務中的數據合併在一起，以逆性順序排列以進行生活流式顯示。如果您自己做自己做的，請發表評論，讓我知道。

>

以上是與JQuery和JSON一起製作自己的網站徽章的詳細內容。更多資訊請關注PHP中文網其他相關文章！