Лучшие практики для возврата и отображения данных из вызовов Ajax

Это появилось недавно и, возможно, это обман: Ответ AJAX: данные (JSON, XML) или фрагмент HTML? .

Если вы собираетесь создавать HTML, тогда вы также можете вернуть HTML напрямую и вставить его в DOM. Однако бывают случаи, когда вам нужно работать с объектами, и здесь пригодится JSON.

Если вы вернете объект Person, например, вы можете поприветствовать Person.Name и показать Person.Preferences, что действительно удобно. Это зависит от вашего дизайна, но общие соображения должны заключаться в том, чтобы держать HTML подальше от Javascript, если вы не создаете RIA.

Часть вашего вопроса "возможные действия сверх этого" имеет большое значение. Если вам нужно делать другие вещи с данными, кроме их отображения, возврат в виде JSON - явно лучший вариант, потому что вы можете работать с данными как с собственным объектом JavaScript, вместо того, чтобы проходить через HTML DOM. Если все, что вы когда-либо собирались сделать, это отобразить его, я не вижу смысла тратить время на создание этого отображения на JavaScript; просто создайте HTML-код на уровне представления на сервере.

Я использовал все три и пришел к выводу, что возвращать HTML лучше при добавлении новых элементов на страницу.

По моему опыту, при создании HTML с помощью javascript я обычно копирую работа, которая уже была проделана для пользовательского пути, отличного от javascript.

Я по-прежнему предпочитаю синтаксический анализ json для обновления существующих элементов или создания функциональности только javascript. Я говорю себе это для пропускной способности, но я думаю, что это просто потому, что я люблю javascript.

В качестве четвертого варианта я прочитал отличный пост о том, как Flickr обрабатывает огромные объемы данных с помощью конкатенации строк. По сути, просто проанализируйте большую нить на трубе и нарежьте ее на клиенте. Это значительно снижает нагрузку на сервер с незначительным увеличением нагрузки на клиенте.

Это полностью зависит от того, как все настроено в вашем приложении. Я, например, предпочитаю возвращать JSON (второй подход в вашем списке), потому что у меня есть параметр `` код ошибки '', который я проверяю в функции onSuccess перед обновлением содержимого на странице, и если он не равен нулю, я уведомляю пользователя ошибки, включая сообщение об ошибке, полученное с сервера (проверка на стороне сервера, тайм-аут базы данных и т. д.).

Лучшее решение - возврат в чистом виде HTML. По большей части gzip должен нейтрализовать любую разницу в пропускной способности, а рендеринг через javascript на клиенте может быть медленным, если клиент - дрянная машина. Наконец, написать javascript для рендеринга HTML сложно по сравнению с использованием чего-то приятного, например представления, если вы используете MVC.

Думаю, вам не хватает совершенно правильного варианта, который я часто использую. Это моя типичная схема, и она еще не подвела меня ...: -)

Вот базовый шаблон jQuery, который я использую:

$(function() {
    $.getJSON('/some/page',{foo:bar,bar:foo},function(json) {
        if(json.outcome == 'success') {
            $('body').prepend(json.html);
        } else {
            // Somehow let the user know why it didn't work
            alert(json.error);
        }
    });
});

Вот базовая структура бэкенда (PHP в моем случае), которую я использую:

<?php // Page: '/some/page'

/* Blah Blah Blah... do whatever needs to be done... */

// If everything turns out okay (assuming '$output' is the HTML 
// you want to display...
echo json_encode(array('outcome'=>'success','html'=>$output));

// If something goes wrong... just do:
echo json_encode(array('outcome'=>'error','error'=>'Uh oh... something is broken'));

Естественно , вы захотите уточнить свою ошибку, поместив их в какую-то переменную или что-то в этом роде. Но вы должны уловить идею. Кроме того, конечно, вы можете добавить дополнительную информацию в вывод json. У вас может быть готовый HTML-код, а также некоторая другая информация, такая как «уведомление об успехе» или новое имя класса для какого-то элемента, я не знаю ... как бы то ни было ... возможности безграничны.

В любом случае, причина, по которой я выберите этот маршрут, потому что он s обычно быстрее (исходя из моего опыта), чтобы добавить предварительно созданный HTML в DOM, а не зацикливаться на JSON и вставлять материал, если это просто, например, небольшой текст для замены в элемент. Но метод, который я показал, является, ИМО, лучшим из обоих миров. Вы можете прикрепить HTML в виде строки к одному из свойств JSON.

Happy jQuerying: -)