Ненавязчиво спрашивать пользователя о деталях - PullRequest
1 голос
/ 30 августа 2010

Я пытаюсь найти наилучший способ создания "ненавязчивых" форм для пользователя (в веб-приложении).

Цель : держать пользователя на сайте, не прося заполнить ненужную форму. Запросите подробности только тогда, когда это необходимо.

Требования:

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

Реализация была бы довольно простой, если бы все запросы были AJAX. Было бы легко проанализировать ответ (401 или около того) и показать соответствующую форму лайтбокса.

Я не вижу, как это можно сделать "правильным образом" с простыми a nchors и form представлениями, поскольку в обоих случаях пользователь фактически покидает страницу (переходя по ссылке или отправляя форму) и там невозможно проанализировать ответ на стороне клиента.

Конвертировать все ссылки и формы в AJAX просто глупо.

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

Есть ли какие-нибудь креативные предложения, как это сделать для запросов не в AJAX?

С уважением,
Dmytrii.

Ответы [ 2 ]

3 голосов
/ 30 октября 2010

В смысле страницы, где «страница» относится к тому, что видит пользователь, а не к тому, что представляет собой URL, я могу думать только о следующих способах обновления независимых частей на странице с отключенным JavaScript (и, следовательно, Ajax):

  1. Фреймы
  2. Ифреймы

При использовании открытых соединений есть еще два способа обновления страницы, однако они не работают надежно во всех случаях:

  1. Анимированные GIF
  2. CSS DIV-теги с абсолютным позиционированием.

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

Поскольку я думаю, что вы не хотите использовать Frames и не хотите отображать анимированные GIF, я объясняюспособ CSS DIV:

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

Использование «стиля» в теге DIV и позиции CSS: абсолютно они могут перезаписыватьдругая информация на странице, как новый слой.Однако вам нужно либо положение: абсолютное, либо добавить эти данные в конец страницы.

Как это работает с формами?

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

Как это работает с 404 и якорями?

Я действительно не знаю, потому что это должно быть проверено, но вот подсказка, как я попытался бы реализовать это:

Здесь у нас есть 2 проблемы.

Во-первых, URL-адрес должен указывать не на другие страницы, а снова на сценарий сервера, поэтому href находится под контролем.Затем этот сценарий уведомляет ожидающий сценарий об обновлении страницы соответствующим образом, например, путем извлечения страницы и отправки ее в браузер.Сценарий также может проверять на 404.

Во-вторых, вы должны помешать браузеру переключать страницу при нажатии на якорь.Это, вероятно, включает в себя некоторые хитрые трюки с использованием CSS, кодов назначения и кодов состояния на стороне сервера (например, «ушел» или перенаправление на текущую страницу, что угодно), чтобы браузер не переключал страницу.Я не совсем уверен, что это работает, но если вы помните страницы загрузки, они показывают URL-адреса, которые не переключают страницу, но имеют эффект (загрузка файла).Вот с чего начать пытаться взломать браузеры, не покидая текущую страницу, без использования JavaScript.

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

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

Сказав все это, я сомневаюсь, что вы обойдете JavaScript.

То, что я написал здесь, этоочень трудно сделать, и поэтому обычно не используется, потому что это плохо масштабируется.И это намного сложнее, чем использовать только JavaScript (вот почему я это объяснил).

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

Обычный HTML просто не был предназначен для создания веб-страниц, подобных приложениям, которые мы хотим видеть сегодня.,Все это было добавлено с использованием JavaScript.

О всплывающих формах

Basic-Auth-Handler перезагружает страницу после того, как пользователь вводит что-то в это диалоговое окно, только если отменапопадание на текущую страницу отображается.

Но есть два способа представления дополнительных всплывающих запросов на странице с использованием JavaScript:

Первый - это «приглашение» javascript, как в следующем примере:

http://de.selfhtml.org/javascript/objekte/anzeige/window_prompt_vor.htm (Нажмите на «Hier»).

Второй - «JavaScript-формы», которые похожи на всплывающие окна на HTML-странице.

Однако я считаю, что всплывающие окна слишком навязчивы и плохой дизайн.

Ajax и JavaScript - самый простой способ

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

Например, ваш скрипт onload-Script может циклически перемещаться по всем тегам привязки и изменять их так,что нажатие на них вызывает функцию.Затем эта функция должна сделать что-то умное.

То же самое верно для форм.Поля, которые можно изменить (например, адрес электронной почты пользователя), затем имеют два вида: один виден, другой скрыт.Скрытый - это форма.Нажатие на адрес электронной почты затем переключает представление (отключает первый div и включает второй), так что внезапно вместо адреса электронной почты появляется текстовое поле, содержащее адрес электронной почты.Если вы нажмете кнопку «ОК», кнопка изменит внешний вид на прядильщик до тех пор, пока данные не будут отправлены, а затем представление вернется к обычному.

Это обычный способ сделать это с помощью JavaScript и Ajax.,И это требует большого количества программирования, пока оно не будет работать хорошо.

Извините, что не сократил этот пост и не пропустил фрагменты кода, мне в настоящее время не хватает времени;)

0 голосов
/ 30 августа 2010

Скрытый iframe.

Установите атрибут target для form равным name для iframe.используйте событие onload в iframe, чтобы определить ответ.

Или, если вам действительно не нравится какой-либо javascript, не скрывайте iframe и вместо этого представляйте его творчески.

CSS, чтобы скрыть элемент

#myiframe { position:absolute; left: -999em; display: none; visibility: hidden; }

Но обычно достаточно display: none.Это просто излишество.

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