Как создать веб-страницу Graceful Degradation AJAX? - PullRequest
Новая
       7

Как создать веб-страницу Graceful Degradation AJAX?

2 голосов
/ 01 мая 2010

Я хочу создать веб-страницу с «Изящной деградацией». То есть веб-страница функционирует даже при отключенном javascript. Теперь я должен принять проектное решение относительно формата ответа AJAX.

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

Если JavaScript включен, каждый HTTP-запрос AJAX к серверу будет генерировать ... ну, JSON или HTML.

Если это HTML, его легко реализовать. Просто имейте JavaScript, чтобы заменить часть страницы возвращенным HTML. И на стороне сервера не требуется много изменений в коде.

Если это JSON, тогда я должен снова реализовать логику JSON-to-html в javascript, которая почти дублирует логику на стороне сервера. Дублирование это зло . Мне действительно это не нравится. Преимущество заключается в том, что использование полосы пропускания лучше, чем в HTML, что повышает производительность.

Итак, что является лучшим решением для постепенной деградации? AJAX-запрос лучше вернуть JSON или HTML?

Ответы [ 3 ]

3 голосов
/ 01 мая 2010

Я не думаю, что может быть «лучшее решение» для любой данной ситуации. Только, возможно, «подходящее решение» для конкретного. Это действительно зависит от того, что вы пытаетесь сделать. Что для меня значит грациозная деградация:

  • создать «достаточно хороший» интерфейс, который работает на максимально возможном количестве браузеров (как для настольных, так и для мобильных устройств)
  • Ненавязчиво добавлять в некоторые сценарии (методы проверки, элементы интерфейса, такие как вкладки и ползунки и т. Д.), Которые будут присутствовать, только если браузер, в который загружена страница, имеет функции, необходимые для их работы.

Использовать ли HTML или JSON в ответе сервера очень субъективно, я часто испытываю трудности с выбором между ними. Можно возразить, например, что получение набора пар ключ-значение с сервера и рендеринг их в существующий элемент select означало бы больше кода и, следовательно, больше времени, затрачиваемого на кодирование, и больше потенциальных ошибок. Вместо этого вы можете просто запросить предварительно собранный элемент select с сервера и вставить его в контейнер. Логика построения элемента уже находится на сервере, поэтому собирайте его дважды на двух разных языках.

Другая перспектива заключается в том, что JSON сводит к минимуму использование полосы пропускания, поэтому стоит приложить дополнительные усилия, чтобы проанализировать некоторые JSON и создать некоторую разметку на клиенте. Мне легко не согласиться с этой точкой зрения по нескольким причинам (я не обобщаю, не поймите меня неправильно). Прежде всего, многие, многие веб-серверы настроены на сжатие / дефляцию / gzip своих выходных данных, и многие браузеры принимают сжатый контент. Разметка чрезвычайно сжимаема, так как содержит избыточные данные (<strong></strong>). Поэтому разумно учитывать, что размер ответа JSON не будет в подавляющем большинстве случаев меньше, чем ответ с разметкой. Во-вторых, большой набор данных может означать значительное время выполнения на клиенте (неприятные, вложенные циклы являются обычным явлением - это очевидно в некоторых из вопросов, которые появляются здесь).

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

http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

0 голосов
/ 28 сентября 2011

Прежде всего, тщательно продумайте, действительно ли вам нужно поддерживать пользователей с поддержкой JavaScript и без них. За мои деньги отличительной чертой AJAX является то, что он отделяет отображение (построение HTML) от информации.

Тем не менее, вот подход, который может работать:

  1. Напишите серверную программу, которая делает то, что нужно вашей странице, и возвращает ответ (независимо от того, из чего он состоит) в максимально простой форме. Для простого вывода - например, просто указание, работает ли он или нет - это может быть просто число или простая строка. Для чего-то более сложного, чем просто один результат, это, вероятно, будет XML.

  2. Напишите серверный скрипт, который просто вызывает вашу программу и выводит результат в виде простого текста или XML.

  3. Напишите другой серверный скрипт, который вызывает вашу программу и создает из нее HTML-страницу.

  4. На странице, которую пользователь вызывает для запуска процедуры, включите JavaScript, которые пишут элемент управления (например, кнопку), который при нажатии отправляет запрос AJAX для вызова первого сценария, затем анализирует результат и обновляет страницу соответственно. Также добавьте еще один элемент управления в теги NOSCRIPT, чтобы пользователи с поддержкой JS его не видели, который отправляет стандартную форму для запуска вашего второго сценария. Таким образом, вам все еще нужны два сценария, но основная часть ваших расчетов выполняется только один раз.

0 голосов
/ 01 мая 2010

IMO, работа с HTML приносит большие риски для безопасности (внедрение MITM-скриптов и т. Д.). Любое время, сэкономленное на «дублировании», должно быть действительно потрачено на дезинфекцию перед добавлением.

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

Я знаю, какой бы я выбрал (JSON).

...