Pull to refresh

Практический AJAX: что делать с кнопкой «назад» в браузерах

Reading time 7 min
Views 17K
Original author: Michael
Примечание: статья посвящена обзору проблемы неработающей кнопки «назад» в браузере при использовании AJAX-методов для передачи содержания страниц от сервера к клиенту. В статье рассматриваются основные принципы работы AJAX и возможные пути решения заявленной проблемы. Курсивом даны мои комментарии.

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

Суть проблемы



С самого начала в основе Веба лежала возможность поставить гиперссылку с одной страницы на другую. Ссылки между страницами была первично двунаправленными: это означало, что переход по ссылке со страницы А на страницу Б никаким образом не мог предотвратить ни переход по ссылке обратно на страницу А, ни использование кнопки «назад» в браузере. Цепочка таких страниц представляет собой историю посещения в браузере, с каждой из них связан уникальный URL. Если представить это с технической стороны, то такая цепочка реализуется в виде стека. В дальнейшем я буду использовать термин «горизонтальная» ссылка для обозначения связи между элементами такого стека.

AJAX. Горизонтальные ссылки

Рисунок 1. Горизонтальные ссылки

Чтобы вести разговор о страницах, построенных на горизонтальных ссылках и использующих AJAX, я введу термин «вертикальные» ссылки. Вертикальные ссылки являются ссылками на дополнительную информацию, отображаемую на текущей странице, но при этом доступ к ним осуществляется только с использованием AJAX-методов (прим.: в оригинале XMLHttpRequest, но информация может быть получена, в частности, и с помощи iframe, поэтому ввожу более общий термин). Другими словами, вы получаете новое содержание страницы на экране, но при этом сам URL этой страницы в браузере не меняется. Поскольку вертикальные ссылки не меняют URL'а страницы, то и в стек истории браузера новый элемент не добавляется. В результате, когда пользователь нажимает кнопку «назад» в браузере, он попадает на предыдущую горизонтальную страницу, которая может и не содержать всех изменений, появившихся на странице, которая только что была на экране.

AJAX. Вертикальные ссылки

Рисунок 2. Вертикальная ссылка между вторым URL'ом и сервером

Веб-сайт и веб-приложение



Подход, который стоит использовать для решения этой проблемы, напрямую зависит от того, что вы разрабатываете: веб-сайт или веб-приложение. Иногда тяжело разделить эти два понятия, но обычно веб-приложение можно отличить по следующим свойствам:

  • Перед использованием требуется авторизация
  • Серьезная работа с пользовательскими сессиями
  • Процесс взаимодействия пользователя с приложением имеет вполне определенное начало и конец


В качестве примера веб-сайта можно рассмотреть Yahoo! Finance и E*TRADE — в качестве веб-приложения. С точки зрения пользователя я могу сказать, что не всегда возможно провести четкую границу между этими двумя типами. Однако, веб-разработчикам стоит с самого начала определиться, что же они собираются разрабатывать: сайт или приложения? Если вам это понять, то можно задать простой вопрос: в отсутствии интернета чем лучше всего описывается ваша разработка: это набор Word'овых документов или же настольное приложение? Рассматривайте веб-приложения наравне с настольными с той лишь разницей, что первым еще требуется браузер для нормальной работы. Другой вопрос, который можно себе задать, звучит так: «Вашей главной целью будет предоставление информации или обеспечение функциональности?».

Первое решение: не злоупотребляйте вертикальными ссылками



Если вы собираетесь создать веб-сайт для публичного доступа, я бы советовал вам использовать AJAX только в случаях крайней необходимости (не злоупотреблять им). Возможно, будет требоваться изменение URL'а страницы, чтобы обновить ее всю, но при этом, я полагаю, иделогия правильной работы кнопки «назад» в браузере будет соблюдена. Помните, что не все вызовы AJAX сильно связаны с вертикальными ссылками (прим.: как я понимаю, автор имеет в виду прежде всего изменение каких-либо малых частей страницы при неизменном основном содержимом).

Легче всего просто не принимать во внимание неработоспособность кнопки «назад» в браузере, но полностью этим пренебрегать нельзя. Вместо того, чтобы создавать целостное приложение, использующее большое количество вертикальных ссылок и привязанное к единственному URL'у, создайте некоторое количество горизонтальных ссылок в тех местах, где это действительно требуется. Другими словами, используйте горизонтальные ссылки для разделения частей вашего приложения, например, таким образом, как это делается в бумажной литературе (книга делится на части и главы). Используя разумную комбинацию традиционных горизонтальных ссылок с вертикальными, можно добиться баланса мощи AJAX и возможности использовать функционал перемещения по истории браузера.

Прим.: в качестве примера, пожалуй, можно привести некоторое количество современных сайтов, на которых AJAX используется только для предоставления некоторых дополнительных возможностей, в частности, это Хабрахабр и механизм голосования/добавления комментариев.

Второе решение: используйте специальную AJAX-библиотеку



Сейчас существует достаточное количество библиотек с открытым кодом, созданных в том числе с целью рарешить данную проблему. Большая часть из них используют так или иначе якори (anchor) (которые задаются после '#' (hash) в ссылке). В результате получается вертикальная ссылка, которая изменяет URL страницы таким образом, что эмулирует новую горизонтальную ссылку (прим.: когда мы переходим по вертикальным ссылкам, мы одновременно переходим и по псевдо-горизонтальным), при этом не перегружая текущую страницу. Хотя каждая из таких библиотек добавляет на веб-страницу еще один уровень обработки (сложности, complexity), все же они довольно легко могут быть интегрированы в вашу разработку.

Прим.: ниже сгруппированы основные методы создание псевдо-горизонтальных ссылок, я постарался дополнить их известными мне примерами, расширив список статьи-первоистоника.

  1. Прим.: суть решения: при каждом вызове AJAX к URL'у страницы в качестве якоря добавляется текущий номер элемента в стеке «истории», фактически, просто увеличивающиеся числа. При нажатии кнопки «назад» в браузере, URL страницы меняется на предыдущий. Каждые 100 (200, 400, 1000) миллисекунд страница проверяет, не изменился ли у нее якорь в URL'е, если якорь изменился, то осуществляется подгрузка данных, соответствующих текущему якорю (=элементу в стеке «истории»).

    Подход Mike Stenhouse'а. Демо-версия предельна проста и работает почти во всех браузерах. Демо-версия этого решения можно посмотреть по этой ссылке и проследить, что происходит с URL'ом страницы, когда вы кликаете по ссылкам. У меня постоянно вываливается сообщение об ошибке, но суть решения понять можно

    Подход Brad Neuberg'а, эта библиотека пытается быть максимально кроссбраузерной без лишнего усложнения кода. Хорошо, что она доступна под BSD opensource лицензией. Brad опубликовал пошаговую инструкцию создания этой библиотеки, равно как и онлайн-демо.

    Подход mikage'а с использованием библиотеки jQuery можно посмотреть здесь.
  2. Прим.: суть решения: вместо изменения URL'а самой страницы создается невидимый iframe элемент, в который загружается URL, у которого меняется якорь (в данном случае подход более гибкий, потому что позволяет задать часть параметров прямо после '#', например, URL для AJAX-запроса или дополнительные параметры, но при этом не происходит изменение адреса головной страницы, т.е. для пользователя, фактически, ничего не меняется, но история посещений в броузере обновляется). На основе этой идеи создано несколько framework'ов.

    Plex — AJAX framework с открытым кодом, который поддерживает очень много возможностей, в том числе, и эмуляцию кнопки «назад» в браузере.

    Dojo — еще один AJAX framework с открытым кодом, обеспечивающий некоторую AJAX функциональность и эмуляцию кнопки «назад» в браузере.

    Обнаружил еще одну разновидность этого подхода в блоге Streampad, автор гарантирует работоспособность под Safari.
  3. Прим.: следующий метод очень мало отличается от предыдущего, однако, хочу выделить его в отдельный случай, потому что в нем вместо «native» AJAX методов используется просто отправка данных в скрытый iframe, в таком случае никаких дополнительных действий применять не требуется, потому что история посещений в браузере будет загружать тот или иной URL в этот iframe, а он уже будет соответствующим образом обновлять головную страницу.

    Описание подхода и демо-версия.
  4. Существует также ряд других подходов, в частности, с использованием document.save() или document.body.onbeforeunload(), которые не являются кроссбраузерными.


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

Решение третье: обеспечьте пользователям удобную альтернативу кнопки «назад»



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

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

В заключении, если вы все же ограничиваете функционал стандартной истории в браузере при создании веб-приложения, пожалуйста, поставьте пользователей об этом в известность тем или иным способом. AJAX не является первым методом, который ограничивает этот функционал, и, скорее всего, пользователи впервые узнают об этом тоже не от вас. (Есть еще апплеты, Flash и eCommerce приложения, которые могут снять с кредитной карточки сумму еще раз, если нажать кнопку «назад» в браузере.) Вес ответственности, который вы, в конечном счете, возложите на пользователя за его действия на сайте, будет зависеть от вашей корпоративной культуры, но почему бы не сделать его чуточку легче?

Спасибо всем, что читал, читает и будет читать мои переводы и статьи. Заранее хочу поблагодарить всех тех, что укажет на фактические неточности или ошибки в статье, а может быть, даст ссылки на дополнительную информацию.

Web Optimizator: проверка скорости загрузки сайтов
Tags:
Hubs:
+22
Comments 27
Comments Comments 27

Articles