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

时间:2010-02-26 16:07:18

标签: php ajax comet long-polling

我有一个由PHP呈现的复杂页面,并希望通过AJAX长轮询保持页面的所有元素都是最新的。是否有某种通用/巧妙的方法来设计基础设施来支持这一点而无需手动指定要更新的每个元素?只是寻找想法。谢谢!

5 个答案:

答案 0 :(得分:4)

使用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"}

答案 1 :(得分:0)

您可以轮询页面,该页面返回页面的json编码结构,例如:

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

依此类推,然后更新必要的内容,只进行一次民意调查。

答案 2 :(得分:0)

可能会通过ajax为要更新的所有元素添加一个特殊类,还可以在其他一些属性中编码额外数据,例如

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

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

答案 3 :(得分:0)

将您的网页元素结构保持为私有数据,并使公共元素更新它们

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

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

    }
})()

这是保证您的网页数据安全和顺畅的好方法。

答案 4 :(得分:-1)

如果我是你,我会使用jQuery来做那个:然后你可以做类似......

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