Лучшие практики для возврата и отображения данных из вызовов AJAX - PullRequest
5 голосов
/ 21 мая 2009

У меня настроено взаимодействие с jquery / php на странице. Он отправляет некоторые данные на сервер и возвращает записи данных, которые затем необходимо выровнять на странице для сравнения и возможных действий после этого.

Мой вопрос: каков наилучший способ вернуть информацию и затем отобразить ее?

  • Вернуть объект JSON, а затем создать HTML на лету с помощью JS и отображения данные?
  • Вернуть объект JSON, а затем положить эти данные в уже созданные контейнеры для данных на странице?
  • Вернуть чистый HTML с сервера и просто поместить это на странице?

Я катал их в голове прошлой ночью и не мог сообразить, будет ли один путь лучше по какой-то конкретной причине.

Я не гуру JS, поэтому не был уверен, что плюсы / минусы и предостережения касаются этих различных методов.

Ответы [ 7 ]

7 голосов
/ 21 мая 2009

Я думаю, это зависит от вашего приложения.

Чистый HTML самый простой, вы просто зашли на место и альт. JQuery позволяет легко добавлять нужные события, а что нет.

Однако всякий раз, когда я использовал AJAX, он всегда превращался в возвращение JSON и создание элементов на лету. Если вы, например, заполняете дерево, может оказаться грязно, чтобы получить правильное вложение. Это вынуждает вас все равно делать код на стороне клиента, и с этого момента просто использовать JSON с самого начала будет чище.

Кроме того, если вы планируете использовать вызовы данных с других страниц, тогда лучше использовать JSON, поскольку HTML-код будет исправлен.

4 голосов
/ 21 мая 2009

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

2 голосов
/ 21 мая 2009

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

1 голос
/ 21 мая 2009

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

Вот базовый шаблон 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, а также некоторую другую информацию, такую ​​как «уведомление об успехе» или новое имя класса для какого-то элемента, я не знаю… что угодно… возможности бесконечны.

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

Happy jQuerying: -)

0 голосов
/ 21 мая 2009

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

Мой опыт показывает, что при создании HTML с помощью JavaScript я обычно копирую работу, которая уже была проделана для путешествия без использования JavaScript.

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

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

0 голосов
/ 21 мая 2009

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

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

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

0 голосов
/ 21 мая 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...