Question

我花了4年的时间试图解决这个问题（开关），坦白说我的大脑很痛。

我是当地社区项目（广播电台）的自愿设计师。我们有一个＆＃34; On Air＆＃34;模块，显示当前正在播放和播放的曲目。

直到最近，我才使用包含带有曲目信息的HTML文件的自动刷新iframe（这些HTML文件由我们的播出系统每隔15秒通过FTP自动上传）。这些iframe每15秒刷新一次，但是，这会导致iframe中的404和重新加载时出现难看的闪烁。

我花了一些时间研究AJAX解决方案。我目前有一个带有曲目信息的XML文件（播出系统每隔15秒通过FTP自动上传）和一个使用AJAX每10秒刷新一次的HTML文档。然而，虽然我帮助修复了404问题，但是当文本刷新时，我仍然留下了丑陋的闪烁。

我已经读过，只有在数据库中的值发生变化时才有一种方法可以进行ajax刷新，但是如果更新XML文档，我在研究如何做到这一点时没有太多运气。

如果有人能帮助我指出正确的方向，那么许多饼干和爱情将会赠送给你。谢谢！

这是我目前拥有的代码：

＆＃13;

<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>

＆＃13;

这是test.xml：

＆＃13;

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

＆＃13;

Answer 1

您可以使用HTML5的Server-Sent Events

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有一个非常好的解释。你一定要看看它。

希望这有帮助。

Answer 2

默认情况下，任何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>

fadeout / fadein的平滑过渡应该比直接更改文本更好。

当然你必须让它适应你的系统，但这种加载方式将：

阻止任何404 interfear（ajax成功将不被调用，因此文本将保持不变直到下一次更新
允许传输大量数据（您可以将相册封面缩略图添加为xml中的base64字符串，或者将图片的网址添加到图片中）
允许您在页面上保留格式，而不是单独的格式

编辑：已更新为您的代码规范

更新XML数据时使用ajax刷新DIV

2 个答案: