Как правильно обновить все элементы отображаемой страницы через 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

Сохраняйте структуру элементов своих страниц в качестве личных данных и используйте открытые элементы для их обновления

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

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

    }
})()

Это хороший способ сохранить данные на своих страницах в целости и сохранности.

Answer 3

может добавить специальный класс для всех элементов, которые будут обновляться через ajax, а также вы можете закодировать дополнительные данные в некоторые другие атрибуты, например

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

тогда с помощью jquery вы можете легко извлечь эти данные и проверить их, и использовать в вашем ajax

Answer 4

Я бы использовал jQuery, чтобы сделать это, если бы вы были на вашем месте: тогда вы могли бы сделать что-то вроде ...

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

Answer 5

Вы можете опросить страницу, которая возвращает вам json-кодированную структуру вашей страницы, например:

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

и так далее, затем обновите все необходимое, проведя только один опрос.