如何在数据发生更改时更新UI

How to update UI when data has changed?

本文关键字：更新 UI 数据更新时间：2023-09-26

我有一系列XML文件，用户可以检索、编辑和保存这些文件。我的意图是允许多个用户同时编辑这些文件。这些XML文件的许多部分与浏览器UI中显示的内容有关，例如显示并可以编辑<name>My title</name>节点。

我使用的技术是Javascript、PHP和一个包含对其他XML文件的引用的主XML文件（主文件和引用文件都可以在UI中编辑）。服务器启用了WebDAV，通过YUI3的io模块使用WebDAV方法来处理检索、保存、收集移动等。

如何根据编辑和保存的XML文件的内容更新正在使用这些资源的UI？

我知道我可能会运行setTimeouts之类的程序来检查更新，但让UI只在数据更改时做出响应似乎更直观。

欢呼！

您所描述的功能类似于一种称为服务器推送的技术。对于web应用程序来说，你要做的是一件非常棘手的事情（尤其是对于PHP，它是围绕着请求得到服务和脚本终止的想法构建的）。

HTML5正在引入一些技术，比如用于维护与服务器的持久连接的网络套接字，你可以将网络套接字视为一种解决方案，但这是一项全新的技术，我认为规范还没有最终确定，所以它只会在最新版本的浏览器中实现。

您已经提到了AJAX轮询（由setInterval驱动），但也注意到它有问题。当然，你是对的，在两次轮询之间的时间间隔内，本地数据可能会变得过时，并且你会在服务器和任何打开的客户端之间产生大量流量。

另一种选择就是所谓的"长轮询"。这个想法是客户端启动与服务器的AJAX会话。在服务器上，客户端调用的脚本基本上只是坐在那里等待更改。当它这样做时，服务器通过发送JSON/XML/任何响应并关闭AJAX会话来通知客户端。当客户端接收到响应时，它会对其进行处理，并启动一个新的AJAX连接以等待另一个服务器响应。

这种方法几乎是即时的，因为数据一可用就被推送到客户端。然而，这也意味着与服务器的大量开放连接，这可能会使服务器承受大量负载。此外，PHP脚本实际上并不意味着要长时间运行或休眠，因为该语言是围绕请求-响应模型构建的。采用这种方法是可能的，但可能并不可取。

我如何实现基本的"；长轮询"？有一些长轮询技术的示例。

祝你好运！