Как построить грациозное деградацию Ajax Web Page?

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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