通过 AJAX 更新渲染页面的所有元素的正确方法是什么？

Question

我有一个由 PHP 呈现的复杂页面，并且希望通过 AJAX 长轮询使页面的所有元素保持最新。是否有某种通用/聪明的方法来设计基础设施来支持这一点，而不必手动指定要更新的每个元素？只是寻找想法。谢谢！

Answer 1

使用 jQuery，我将发送一个以逗号分隔的 jQuery 选择器列表以更新到服务器。服务器最终将通过读取这些选择器并生成 HTML 来填充与选择器匹配的元素来进行响应：

$.get("/updater", { elementsToUpdate: "#someDiv,#someTable,#someOtherElement"}, function(json) {
      $.each(json, function(k, v) {

        // the key is the selector, the value is the 
        // HTML to set to that (or those) element(s):
        $(k).html(v);
      });    
}, "json"); // we are expecting the server to return JSON

服务器将通过向客户端发送具有以下结构的 JSON 进行响应：

 {"#someDiv":"this is some HTML to fill up div with ID someDiv","#someOtherElement":"here is some more HTML","#someTable":"here is some more HTML"}

Answer 2

也许向所有要通过ajax更新的元素添加一个特殊的类，并且您还可以在其他一些属性中编码额外的数据，例如

<a class="ajaxUpdate" data="{'a':'json or whatever', 'put whatever here':'ok'}">test</a>

使用jquery，您可以轻松地提取该数据并对其进行评估，然后在ajax中使用它

Answer 3

您可以轮询一个页面，该页面会返回页面的 json 编码结构，例如：

var page = {
    'elem1': {
        'html': '<div>... ',
        'update': True
    },
    'elen2': {
        'update': False

等等，然后更新必要的内容，仅进行一次轮询。

Answer 4

将页面元素结构保留为私有数据，并使用公共元素来更新它们

var page = (function(){
    var private_data = {
    //json
    };

    return {
        workOnData : function(){//process the data}

    }
})()

这是保持页面数据安全和流畅的好方法。

Answer 5

如果我是你，我会使用 jQuery 来做到这一点：那么你可以做类似的事情......

$('div.updateThisClass').css('color','#fff')