访问各种Web服务使用Javascript

Question

我在创建crowdfunder网页的过程中，要创建一个显示当前进度的仪表板：http://hyve.me/crowdfunder

这里是JavaScript的使用：

<script type="text/javascript"> 
    // Facebook Likes 
    $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) { 
    $("#facebooklikes").text(response["hyve.me"].likes); 
    }); 

    // registered Users 
    $.ajax({ 
    type: 'GET', 
    url: 'http://www.hyve.me/usercount', 
    dataType: 'JSON', 
    success: function (response) { 
     $("#usercount").text = response; 
    } 
    }); 

    // days left 
    jQuery(document).ready(function($) { 
    today = new Date(); 
    deadline = new Date("October 31, 2013"); 
    msPerDay = 24 * 60 * 60 * 1000 ; 
    timeLeft = (deadline.getTime() - today.getTime()); 
    $("#countdown").text(Math.floor(timeLeft/msPerDay)); 
    }); 

    // progress bar for shares 
    $.getJSON("https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F", function (response) { 
    var mentions = response.shares; 
    document.getElementById("myProgressBar_Success").setAttribute('style', "width: " + (mentions/6).toString() + "%;"); 
    document.getElementById("myProgressBar_Warning").setAttribute('style', "width: " + ((600 - mentions)/6).toString() + "%;"); 
    }); 
</script> 

和这里是仪表盘的HTML：

<div class="span8 offset2"> 
    <div class="row-fluid statistics"> 
    <div class="span4"><div class="linediv-l"><h3 id="facebooklikes">0</h3><p>FB <i class="icon-thumbs-up"></i></p></div></div> 
    <div class="span4"><div class="linediv-c"><h3 id="usercount">0</h3><p>Hyve-Users</p></div></div> 
    <div class="span4"><div class="linediv-r"><h3 id="countdown">0</h3><p>days left</p></div></div> 
    </div> 
</div> 
<div class="row-fluid"> 
    <div class="span10 offset1"> 
    <div class="thermometer progress active"> 
     <div class="bar bar-success" style="width: 50%;" id="myProgressBar_Success"></div> 
     <div class="bar bar-warning" style="width: 50%;" id="myProgressBar_Warning"></div> 
    </div> 
    </div> 
</div> 

现在我有一些问题：

1. 在Chrome（v29）和Firefox（v23）中正确显示Facebook赞的数量，但在Internet Explorer（v9）中无法正常显示 - 有关如何使此浏览器独立的任何想法？
2. 只有当我在同一个域（hyve.me）时，注册用户的数量才有效;因此，我只能在生产环境中进行测试，而不能在开发环境（AWS）或分级环境（heroku.com）上进行测试 - 如何解决此问题？
3. 进度条并未根据addthis.com的数据进行更新 - 为什么getJSON（）与Facebook-Graph协同工作，而不是使用AddThis的Web服务？

这是我在Stackoverflow的第一个问题，我花了最近2天找到答案。也许这里的某个人可以指点我正确的方向。

在此先感谢！

-hristoph

Answer 1

所以这可能回答所有三个问题。

$(function(){ 


    // Facebook Likes 
    $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) { 
     $("#facebooklikes").text(response["hyve.me"].likes); 
    }); 

    // registered Users 
    $.ajax({ 
     type: 'GET', 
     url: 'http://www.hyve.me/usercount', 
     dataType: 'jsonp', 
     success: function (response) { 
      $("#usercount").text = response; 
     } 
    }); 

    // progress bar for shares 
    $.ajax({ 
     type: 'GET', 
     url: 'https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F', 
     dataType: 'jsonp', 
     success: function (response) { 
      var mentions = response.shares; 
      $("#myProgressBar_Success").css({ width: (mentions/6) + "%" }); 
      $("#myProgressBar_Warning").css({ width: ((600 - mentions)/6) + "%" }); 
     } 
    }); 

    // days left 
    today = new Date(); 
    deadline = new Date("October 31, 2013"); 
    msPerDay = 24 * 60 * 60 * 1000 ; 
    timeLeft = (deadline.getTime() - today.getTime()); 
    $("#countdown").text(Math.floor(timeLeft/msPerDay)); 

}); 

当您尝试通过除您自己的域之外的域通过ajax访问数据时发生跨域问题。请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript了解更多详细信息。

使用jQuery.ajax方法时，您可以指定dataType为jsonp。见this answer for more about JSONP。

看着this answer看来，虽然跨源GET请求通常允许没有JSONP，但有时它们不是。

所以数据没有加载;因此，永远不会获得更新你的html的价值。

我也调整了你的AddThis回调以使用jQuery进行DOM操作而不是getElementByID。这可能会导致您的IE错误。如果您已经在使用jQuery，那么您最好不要与操纵DOM的方式保持一致。