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

Refreshing DIV using ajax when XML data is updated

本文关键字：ajax 刷新 DIV XML 数据 更新      更新时间：2023-09-26

在过去的 4 年里，我一直在试图解决这个问题（断断续续），坦率地说，我的大脑很痛。

我是一个当地社区项目（广播电台）的志愿设计师。我们有一个"直播"模块，显示当前正在播放和即将播放的曲目。

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

我花了一些时间研究 AJAX 解决方案。我目前有一个包含曲目信息的 XML 文件（播放系统每 15 秒通过 FTP 自动上传一次）和一个使用 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>

这是测试.xml：

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

您可以使用

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上有一个非常好的解释。你绝对应该看看它。

希望这有帮助。

默认情况下，任何 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 相互恐惧（ajax 成功不会被调用，因此文本将保持不变，直到下一次更新
  • 允许传输广泛的数据（您可以将专辑封面缩略图添加为 xml 中的 base64 字符串，或图片的 URL）
  • 允许您将格式保留在页面上，而不是在单独的页面上

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

相关文章：