与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中文网其他相关文章！