Как легко переключаться между ajax-сайтом и базовым HTML-сайтом?

У меня есть веб-сайт (на основе JSP/Servlets, с использованием шаблона MVC), и я хочу поддерживать веб-сайт на основе AJAX и базовый веб-сайт на основе HTML. Посетители веб-сайта должны иметь возможность сменить режим серфинга с Ajax на обычный HTML и наоборот, как это применяется в Google-mail.

Вопросы:

  • Каков наилучший способ легко достичь этой цели?
  • Должен ли я создать два представления для каждой страницы?

Я использую JQuery и JSON в результате этого ответа.

Источник

3 ответа

Решение

Вам нужен ненавязчивый Javascript, который является частью прогрессивного улучшения.

Во-первых, начните создавать полнофункциональное веб-приложение без какой-либо строки Javascript. Как только вы заставите его работать, начните писать код Javascript, который "берет на себя" работу с необработанным HTML без изменения какой-либо строки HTML/CSS. В коде на стороне сервера вам нужно добавить логику, которая распознает, был ли запущен запрос JavaScript или нет, и соответственно возвращает ответ. Вы можете проверить оба случая, включив / отключив JavaScript в веб-браузере. В Firefox это легко с панелью инструментов веб-разработчика.

Например, у вас есть список писем со всеми ссылками HTML, которые должны показывать тело письма:

<a href="mail/show/1" class="show">Message title</a>

Без JavaScript это вызовет HTTP-запрос к сервлету, который загружает почту, идентифицированную 1перенаправляет запрос в JSP, который скрывает список сообщений в представлении и показывает почту в представлении.

В JavaScript/jQuery вам нужно написать код, который делает то же самое с помощью Ajax, например:

$('a.show').click(function() {
    $.getJSON(this.href, callbackFunctionWhichHidesListAndShowsMail);
    return false;
});

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

boolean ajax = "XMLHttpRequest".equals(request.getHeader("x-requested-with"));

// ...

if (ajax) {
    writeJson(response, mail);
} else {
    request.setAttribute("mail", mail);
    request.getRequestDispatcher("/WEB-INF/mail.jsp").forward(request, response);
}

Наконец, чтобы дать пользователю возможность переключаться между режимами вручную, вы должны установить куки или предпочтительно (так как куки отключены) передать некоторую информацию в URL (pathinfo или параметр запроса), который вынуждает сервер отключить передачу <script> линий.

Источник

Думайте о HTML-версии как о фундаменте. Постройте это сначала.

Затем наложите дополнительные функциональные возможности ajax как дополнительный слой поверх этого, перехватывая поведение html по умолчанию при необходимости. Нет необходимости в двух представлениях, только в одном представлении, которое постепенно добавляет расширенные функциональные возможности в зависимости от доступных технологий и / или предпочтений пользователя.

Источник

Вы довольно разумно пытаетесь прогрессивного улучшения. Здесь есть отличная статья A List Apart: Понимание прогрессивного улучшения, за которую я должен отдать должное этому SO Ответу; Изящная деградация, когда рассмотреть. Я считаю, что Graceful Degredation является более негативным взглядом на проблему поддержки различных возможностей браузера; В чем разница между прогрессивным улучшением и постепенной деградацией?

Источник
Другие вопросы по тегам