在更新XML數據時使用ajax刷新DIV

我已經花了最近4年試圖解決這個問題（開啓和關閉），坦率地說我的大腦受傷了。在更新XML數據時使用ajax刷新DIV

我是當地社區項目（廣播電臺）的自願設計者。我們有一個「On Air」模塊，可以顯示正在播放和播放的曲目。

直到最近，我還使用自動刷新包含帶有軌道信息的HTML文件的iframe（這些HTML文件通過我們的播出系統每15秒自動通過FTP上傳）。這些iframe每15秒刷新一次，但是，這往往會導致iframe中的404和重新加載時出現難看的閃爍。

我花了一些時間尋找AJAX解決方案。我目前有一個帶有曲目信息（播放系統每15秒通過FTP自動上傳）的XML文件和一個使用AJAX每10秒刷新一次的HTML文檔。然而，儘管我已經幫助解決了404問題，但在文本刷新時仍然留下了醜陋的閃爍。

我讀過，只有當數據庫中的值發生變化時纔有刷新ajax的方法，但如果更新XML文檔，我還沒有太多的運氣來研究這種方法。

如果有人能幫助我指出正確的方向，許多餅乾和愛都會賜予你。謝謝！

這是我目前擁有的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<script> 
 
(function($) 
 
{ 
 
    $(document).ready(function() 
 
    { 
 
     $.ajaxSetup(
 
     { 
 
      cache: false, 
 
      beforeSend: function() { 
 
       $('#content').hide(); 
 
       $('#loading').show(); 
 
      }, 
 
      complete: function() { 
 
       $('#loading').hide(); 
 
       $('#content').show(); 
 
      }, 
 
      success: function() { 
 
       $('#loading').hide(); 
 
       $('#content').show(); 
 
      } 
 
     }); 
 
     var $container = $("#content"); 
 
     $container.load("test.xml"); 
 
     var refreshId = setInterval(function() 
 
     { 
 
      $container.load('test.xml'); 
 
     }, 10000); 
 
    }); 
 
})(jQuery); 
 
</script> 
 
</head> 
 
<body> 
 
    
 
<div id="wrapper"> 
 
    <div id="content"></div> 
 
    <img src="loading.gif" id="loading" alt="loading" style="display:none;" /> 
 
</div> 
 
    
 
</body> 
 
</html>

這裏是的test.xml：

<OnAirInfo> 
 
\t <CurrentTrack><OCP_NOW_ITEMNAME></CurrentTrack> 
 
\t <CurrentArtist><OCP_NOW_ARTIST1NAME></CurrentArtist> 
 
\t <NextTrack><OCP_NEXT_ITEMNAME></NextTrack> 
 
\t <NextArtist><OCP_NEXT_ARTIST1NAME></NextArtist> 
 
</OnAirInfo>

來源

2015-06-18 Moist Noodle

你爲什麼不中的問題 – Tushar

您可以使用HTML5的Server-Sent Events

A server-sent event是當網頁自動從服務器獲取更新。

所有你需要做的就是創建一個EventSource object並將它傳遞給你的服務器文件的URL（這裏我假設爲.php文件）。

var source = new EventSource('your_file.php'); //This file will fetch the updates from `database`.

然後，您可以收聽更新事件。

source.addEventListener('message', function(e) { 
    console.log(e.data); 
}, false);

有關於這個概念上HTML5rocks- EventSource一個非常好的解釋。你一定要看看它。

希望這會有所幫助。

來源

2015-06-18 11:09:25 Abhinav

添加代碼，這是美妙的，我要在給它看看。謝謝！ –

好的，如果這能解決您的問題，請不要接受答案:) – Abhinav

默認情況下，瀏覽器本身會緩存任何AJAX調用，並且如果服務器說它沒有更改，則不會傳輸整個文件。

對於你的情況，我建議如下因素：

<div id="content"> 
    <p id="CurrentTrack"></p><br/> 
    <p id="CurrentArtist"></p><br/> 
    <p id="NextTrack"></p><br/> 
    <p id="NextArtist"></p> 
</div> 
<script> 
    setInterval(function() 
    { 
    $.get("/url/to/your/xml/", 
    function(data){ 
     // In case your server don't serve the file with the right mime type 
     var response = $($.parseXML(data)).find("OnAirInfo"); 
     // Data extraction from xml 
     var CurrentTrack = response.children("CurrentTrack").text(); 
     var CurrentArtist = response.children("CurrentArtist").text(); 
     var NextTrack = response.children("NextTrack").text(); 
     var NextArtist = response.children("NextArtist").text(); 

     // Smooth text transition to prevent the "flickering" 
     $("#CurrentTrack").fadeOut(function() { 
      $(this).text(CurrentTrack).fadeIn(); 
     }); 
     $("#CurrentArtist").fadeOut(function() { 
      $(this).text(CurrentArtist).fadeIn(); 
     }); 
     $("#NextTrack").fadeOut(function() { 
      $(this).text(NextTrack).fadeIn(); 
     }); 
     $("#NextArtist").fadeOut(function() { 
      $(this).text(NextArtist).fadeIn(); 
     }); 
    }); 
    }, 10000); 
</script>

與淡出/淡入的平穩過渡，看起來應該比文本直接改變更好。

關當然，你必須以使其適應您的系統，但這種加載方式將：

防止任何404 interfear（阿賈克斯成功將只是沒有被調用，所以文本將保持不變，直到下一次更新
允許傳輸大量數據（您可以將專輯封面縮略圖添加爲xml中的base64字符串或圖片的url）
允許您在頁面上保持格式化並且不在單獨的一個

編輯：更新你的代碼規範

來源

2015-06-18 11:18:43

在更新XML數據時使用ajax刷新DIV

回答

相關問題