Преимущество JSON перед HTML для ответа AJAX? - PullRequest
4 голосов
/ 09 июля 2011

Я читал код и JS, используемые на веб-сайтах Google через firebug.

На веб-сайте Google Music, когда мы нажимаем на левые навигационные ссылки, Google загружает песни в правом теле через ajax.

Теперь, когда я хочу загрузить контент через Ajax, я обычно получаю HTML из метода get и заменяю HTML тела новым HTML, полученным

Но в музыке Google я вижу, что когда я нажимаю на навигационные ссылкиЗатем Google получает данные JSON о тысячах песен со всеми заголовками, альбомами, а затем создает HTML на лету.если бы мне пришлось сделать то же самое, я бы назвал страницу, получить полный HTML-код страницы и затем заменить тело

Так что я хочу знать, в чем преимущество использования JSON по сравнению с тем, как это делал Google

Ответы [ 5 ]

4 голосов
/ 09 июля 2011

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

В моем собственном тестировании я видел, что IE 6 занимает в 60 раз больше, чем Chrome, для построения HTML-таблицы из JSON с 150 строками истолбцы.

3 голосов
/ 09 июля 2011

HTML - это способ контролировать внешний вид данных.Когда вы пишете HTML-тег, подобный этому:

<h1>Your Title</h1>

Текст «Ваш заголовок» - это данные.Тег h1 - это презентация.Большинство опытных разработчиков стараются максимально разделить эти две вещи (данные и представление).Философия, лежащая в основе этого разделения, проста: если данные всегда являются просто данными, вы можете намного проще изменить способ представления этих данных.Скажем, Google хочет обновить внешний вид Google Music (что, я надеюсь, скоро они сделают), тогда им не нужно будет касаться модели данных или того, как работает любой из их вызовов ajax, данные по-прежнему просто имя исполнителя, трекназвание и т. д.

С другой стороны, если бы они отправляли данные и презентацию вместе, им пришлось бы все переделывать - возможно, новый внешний вид не требует, чтобы название исполнителя содержалось в теге h1, но вызов AJAX возвращает <h1>Artist title</h1>, тогда они должны изменить способ хранения данных, способ, которым вызов Ajax возвращает данные, вместо простого заполнения нового тега с именем исполнителя.

Этоосновной фундаментальный принцип в шаблонах проектирования, и почти каждый существующий шаблон проектирования следует этому принципу.Если вы когда-либо слышали о mvc , это то, о чем идет речь, о разделении ваших слоев.Модель представляет данные, представление представляет разметку или представление, а контроллер представляет логику, которая управляет взаимодействием этих двух элементов.

Именно поэтому обработка JSON в ваших вызовах данных поможет вам не столкнуться с проблемами в дальнейшем иВаш код будет чище и проще, поскольку JSON - очень простой формат данных.(также, как уже сказал @ alex-gitelman, перевод быстрее!)

1 голос
/ 09 июля 2011

JSON - это просто способ представления данных, в то время как html представляет данные + разметка. Таким образом, HTML будет намного больше по размеру, поскольку он включает в себя больше информации. Также, если используется html, это означает, что сервер фактически выполняет весь рендеринг для страницы, но что, если вы хотите заполнить части данных в разных фреймах?

Так что, хотя html-ответы имеют смысл в некоторых случаях, AJAX намного эффективнее, если передаются только данные в форме JSON.

1 голос
/ 09 июля 2011

Откладывает размещение и представление данных на странице, которая вызывает метод Ajax.в вашем случае вы форматируете HTML на сервере.

0 голосов
/ 09 июля 2011

В основном это краткость;отправка только необработанных данных, а не HTML, должна привести к значительному снижению полезной нагрузки данных.

Различные браузеры обрабатывают JSON с различной скоростью в зависимости от того, есть ли у них встроенный анализатор JSON.По сути, все современные браузеры имеют это - заметное исключение (как всегда!) - это IE6, для которого может использоваться JSON-синтаксический анализатор (см. Дуглас Крокфордс json2.js )

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

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