使用 Jquery 读取 XML 文件，如何将其与服务器发送事件结合起来并保留页面 up-to-date？

Question

我有以下 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>

希望有人能帮帮我

Answer 1

来自我的评论：

As far as I can tell you cannot do this with a static file. The server must send specific data to the client to trigger the event. see: developer.mozilla.org/en-US/docs/Server-sent_events/… My best advice whould be to set up a timeout and perform a HEAD request and check to see if the Last Modified date has changes on the XML file.

类似问题：

$.ajax() call, only on updation

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

仅当 XML 文件自上次请求后已更新时才会调用成功。

Answer 2

这是可以做到的。这是如何做： 1. PHP 带有 while 循环的页面 while (1) { //连续循环这里的逻辑是检查 DB 或 XML 文件，看看它是否自那以后发生了变化最后检查。如果它改变了输出 XML。使用这个函数 fr_EncodeXML 来删除所有有问题的换行符和多余空格。

function fr_EncodeXML($sData){
        $sData = preg_replace('/[\r\n]+/', '', $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 . "\n\n";

      ob_end_flush();
      flush();
      sleep(100);   //Time determines refresh rate

 }

2。 J 脚本页面。 J 脚本将接收 eventsrc.onmessage = function(event) {..event.data 对象中的数据 XML 文本的“<”和“>”已转义。使用此JS函数将其恢复为XML，可以解析为DOM。

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

希望对您有所帮助。

使用 Jquery 读取 XML 文件，如何将其与服务器发送事件结合起来并保留页面 up-to-date？

Reading an XML file using Jquery, how to combine this with Server Sent Events and keep the page up-to-date?

javascript

jquery

xml

server-sent-events