使用 Jquery 读取 XML 文件，如何将其与服务器发送事件相结合并保持页面最新

我有以下XML文件（data.xml）：

<?xml version="1.0" encoding="UTF-8"?>
<users>
  <user>
      <id>2011</id>
      <posX>12</posX>
      <posY>29</posY>
      <title>Senior Developer</title>
  </user>
  <user>
      <id>2022</id>
      <posX>99</posX>
      <posY>99</posY>
      <title>updated!</title>
  </user>
</users>

我使用 jquery 读取此文件：

$.ajax({
                    url: 'js/data.xml', // name of file you want to parse
                    dataType: "xml",
                    success: parse,
                    error: function(){alert("Error: Something went wrong");}
                  });

并使用以下方式显示它;

function parse(document){
                  $(document).find("user").each(function(){ 
                    $("#test").append(  // this is where all the reading and writing will happen
                    '<div style="position: absolute; top: '+$(this).find('posY').text()+'px; left: '+$(this).find('posX').text()+'px; width: 100px; height: 100px;">ID: '+$(this).find('id').text()+ // which represents user->id
                    '<br /> X: '+$(this).find('posX').text()+
                    '<br /> Y: '+$(this).find('posY').text()+
                    '<br /> Title: '+$(this).find('title').text()+
                    '</div>'
                    );
                  });
                }

这一切都很好用。读取 XML 并显示数据。现在，这仅在您加载页面时发生，因此仅发生 1 次。

用户可以更新 xml（假设标题已更改），但只有在刷新页面时才能看到这些更改。我知道您可以使用jquery每x秒加载一次xml文件，但是我也读过服务器发送事件可以在进行更改时推送xml文件。

我就想这样做。问题是：如何实现 SSE 来实现这一点？

我做了一些研究，发现了一些演示代码：

var source = new EventSource("js/data.xml");
source.onmessage = function(event) {
    document.getElementById("test").innerHTML += event.data + "<br>";
};

但这没有用。

所以我想要的：

加载页面 + 加载 XML（这是当前所做的）
如果 XML 已更改，请将 XML 推送到页面（使用 SSE）
显示数据（因此，如果更改了posX，则div也应移动）

我当前的工作 HTML 代码减去 SSE：

<!DOCTYPE html>
<html lang="en">
    <head>
      <style>
       #test { position: relative; width: 500px; height: 500px; padding: 0.5em; border: 1px solid red;}
        </style>
    </head>
    <body>
        <div id="test"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function parse(document){
                  $(document).find("user").each(function(){ 
                    $("#test").append(  // this is where all the reading and writing will happen
                    '<div style="position: absolute; top: '+$(this).find('posY').text()+'px; left: '+$(this).find('posX').text()+'px; width: 100px; height: 100px;">ID: '+$(this).find('id').text()+ // which represents user->id
                    '<br /> X: '+$(this).find('posX').text()+
                    '<br /> Y: '+$(this).find('posY').text()+
                    '<br /> Title: '+$(this).find('title').text()+
                    '</div>'
                    );
                  });
                }
                  $.ajax({
                    url: 'js/data.xml', // name of file you want to parse
                    dataType: "xml",
                    success: parse,
                    error: function(){alert("Error: Something went wrong");}
                  });
            });
        </script>
    </body>
</html>

希望有人可以帮助我

从我的评论：

据我所知，您无法使用静态文件执行此操作。服务器必须将特定数据发送到客户端以触发事件。看： developer.mozilla.org/en-US/docs/Server-sent_events/...我最好的建议谁要设置超时并执行 HEAD 请求并检查查看"上次修改时间"日期是否对 XML 文件进行了更改。

类似的问题：

$.ajax（）调用，仅在更新时

$.ajax({
  type: "GET",
  ifModified: true,
  url: 'js/data.xml',
  dataType: "xml",
  success: parse
});

仅当 XML 文件自上次请求以来已更新时，这将调用成功。

这是

可以实现的。方法如下：1.PHP 页面与 while 循环而（1） {//连续循环此处的逻辑用于检查数据库或 XML 文件，并查看其更改是否自最后检查。如果它更改了输出 XML。使用此函数fr_EncodeXML 删除所有有问题的换行符和多余的空格。

function fr_EncodeXML($sData){
        $sData = preg_replace('/[rn]+/', '', $sData); // Remove line breaks etc
        $sData = preg_replace('/[ t]+/', ' ', $sData); // Remove excess spaces etc
        $sData  = htmlentities($sData );   // Make valid UTF-8. 
        return $sData;
    }

$xml_string  =  fr_EncodeXML($xml_string);
      echo "data:" . $xml_string . "nn";
      ob_end_flush();
      flush();
      sleep(100);   //Time determines refresh rate
 }

2. J 脚本页面。 J 脚本将接收 eventsrc.onmessage = function（event） {..事件数据对象 XML 文本的"<"和">"被转义。使用此 JS 函数将其还原为可解析为 DOM 的 XML。

function fr_htmlDecode( sXML ) {
    var a = document.createElement('a'); a.innerHTML = sXML;
    return a.textContent;
};

希望这有帮助。

相关内容

最新更新

热门标签：