JSON vs. HTML (XML?). Что использовать в AJAX запросе?

Question

[Иван]

Собственно сабж.
Я как-то по привычке возвращаю при ajax запросе html код и вставляю / добавляю в нужный блок. Знаю что можно передавать данные JSON, но честно говоря не вижу в этом смысла, т.к. получается двойная работа - сначала ты готовишь данные на стороне сервера, а потом из JSON'на на клиенте парсишь его в HTML.
В чем профит пользования JSON и где его тогда используют? Вопрос удобства конкретно взятого разработчика?

Answer 1

[Yustas Alexu]

JSON это данные в голом виде, не привязанные к текущей реализации на фронтенде. Отдавая разметку HTML с сервера разработчик привязывает серверную часть к определенному виду на фронтенде. Если меняется дизайн, нужно менять весь бэкенд. С JSON в этом случае будет проще работать. Логику на сервере в этом случае можно вообще не менять, а изменить только логику на фронтенде.
Во-вторых JSON-данные меньше размером, чем HTML-разметка, что снижает нагрузку на сервер и трафик.
В-третьих генерация HTML на бэкенде это дополнительная нагрузка на сервер. Лучше нагрузить клиент (браузер), особенно если речь идет о высоконагруженном сервисе (high load).
В третьих отдавая данные в виде JSON, можно сократить количество запросов к серверу, за счет объединения данных для разных участков html в одном JSON. А вот с HTML-разметкой такое не прокатит.
P.S.: Отдавать разметку в ajax-запросе уже давно считается дурным тоном.

Comments

[Дмитрий Беляев]

В четвертых, фронтендом может быть не только браузер, но и мобильное прилодение и другой сервер и еще что-то

Answer 2

[Алексей]

JSON будет удобен во многих случаях, самое простое - если полученные данные необходимо заполнить в поля формы. Конечно можно её сформировать и на сервере, но если форма сложная, серверный скрипт получится довольно сложным.

Answer 3

[Константин Б.]

Если у вас просто сайт, то можно и так, а если у вас сервис, у которого есть не только сайт, но и приложения и api то накладно делить сервер на тот что будет отдавать HTML или JSON проще сделать один backend который будет принимать и отдавать данные в JSON, а каждое приложение будет уже самостоятельно обрабатывать эти данные на клиенте

Answer 4

[TM_ID]

"Двойная работа получается" в любом случае.
Нам нужно создавать/отдавать данные и нам нужно получать/показывать данные.
За что отвечает бек а за что фронт выбирать вам, но удобней и правильней иметь api по которому фронт сможет получить необходимые данные и показать их в нужных местах и с нужной красотой.

Например нам нужно получить список книг:
get /books

получим в ответе:

{
  items: [
    {
      id: 0,
      name: "Book0"
    },
    {
      id: 1,
      name: "Book1"
    }
  ]
}

А если мы захотим узнать количество всех книг?
Просто добавим в ответ "totalResults: 50" и в шаблоне на фронте их отобразим (если нужно), аля:

<div class="books-total">{books.totalResults}</div>

А если шаблонов много и они разные?
А если вы хотите показать график с этими книгами? А если этих графиков десятки?
А если нужно в определенный момент показать пагинацию?
итд.

Рекомендую посмотреть на api googl'a или digitalocean.