訪問各種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的方式保持一致。