Глава 11. Улучшенный Web-портал Ajax 449
11.3.3. Структура регистрации (клиентская часть)
Клиентская часть кода регистрации состоит из двух частей. Первая — визуальная, которую пользователь может видеть и с которой может взаимодействовать. Данный HTML-код мы создадим динамически; вы удивитесь, насколько просто создать структуру с помощью элементов div, span и правил CSS.
Вторая часть сценария — код Ajax или JavaScript, отправляющий запрос на сервер и обрабатывающий данные. В данном случае мы собираемся ввести метод JavaScript eval (). Этот метод обрабатывает переданную ему строку как код JavaScript. Если строка содержит имя переменной, метод создает переменную. Если в качестве входного параметра eval () получает вызов функции, метод выполняет эту функцию. Метод eval() — довольно мощный, но его производительность может быть невысокой из-за сложности задействованных операций.
Структура HTML
Как и в предыдущих главах, для формирования структуры страницы мы не будем использовать таблицу. Использование таблиц для создания структуры увеличивает время визуализации страницы, а поскольку мы используем Ajax, то хотелось бы, чтобы все элементы нашего сценария работали и реагировали как можно быстрее. Нам необходимо поместить текстовое окно, поле пароля и кнопку отправки в форме, которую мы можем отправить на сервер. Кроме того, нам потребуется элемент span, чтобы мы могли отобразить поступившее с сервера сообщение об ошибке, если имя пользователя или пароль окажется недействительным. Помещая всю форму в элементы div и span, мы форматируем HTML-код, получая заголовок портала. В листинге 11.4 показана структура HTML-кода заголовка регистрации.
Листинг 11.4. HTML-структура регистрации |
:Ы£ |
<!— О Определить форму —> <form name="Forml">
<i — Q Добавить заголовок —> <div id="header">
<! — © Ввести элемент span для регистрации —> <span id="login">
Name:
< ! — О Добавить текстовое поле для имени пользователя —> <input type="text" name="username">
< ! — © Добавить элемент для пароля —> <br>Password:
<input type="password" name="password"> <br/>
< ! — О Ввести обрабатывающий элемент span —> <span id="spanProcessing"x/span>
<input type="button" name="btnSub" value-"login" < ! — © Добавить кнопку "Отправить" —>
onclick="LoginRequest() "> </span>
Рис. 11.7. Регистрационная форма HTML без правил CSS
< ! — © Добавить текст —>
<span id="sloganText">Ajax P o r t a l < / s p a n > </div>
< ! — © Добавить контекст по умолчанию —> <div i d = " d e f a u l t C o n t e n t " >
<p>Some t e x t goes |
h e r e ! < / p > |
</div> |
|
<div i d = " d i v S e t t i n g s " |
c l a s s = " h i d d e n " X / d i v > |
</form> |
|
Вначале мы добавляем форму О к HTML-документу. Эта форма обеспечивает семантически значимый контейнер для текстовых окон. Кроме того, она предоставляет путь для отступления — аутентификации без использования Ajax, т.е. посредством обычной отправки формы. Мы создаем заголовок div ©, вмещающий в себя весь наш код. Затем добавляем элемент span ©, содержащий текстовое поле имени пользователя О или поле пароля 0, обрабатывающий элемент span 0 и кнопку отправки ©.
С кнопкой, используемой для отправки данных на сервер, должен соотноситься обработчик событий onclick. Этот обработчик инициализирует Ajax, вызывая функцию JavaScript LoginRequestt) (объясняется ниже, в разделе "Код регистрации (JavaScript)").
Чтобы завершить работу с заголовком, осталось добавить текст © портала и место для содержимого по умолчанию ©, которое будет отображаться при загрузке страницы. В элементе div с именем defaultContent можно отобразить любое сообщение. В данном примере мы просто помещаем в него строку текста, но вообще можно добавлять ссылки, изображения, текст и все, что нам будет угодно. Далее мы записываем HTML-форму; ее непрезентабельный внешний вид без применения к элементам правил CSS показан на рис. 11.7.
Чтобы украсить эту "пресную" структуру, с элементами нужно соотнести правила CSS. Поскольку мы присвоили элементам собственные идентификаторы, это упрощает процесс. Чтобы обратиться к идентификатору элемента, поместим перед ним знак #• Таблицу стилей можно добавить как внешний или встроенный файл, используя дескриптор <style>. В данном случае используется встроенный дескриптор <style>, добавляемый в заголовок документа. Как показано в листинге 11.5, мы добавляем правила CSS, меняющие цвета, шрифты, размеры, положения, поля и т.д.
Глава 11. Улучшенный Web-портал Ajax 451
Листинг 11.5. Правила CSS регистрационной формы
<style type="text/css">
<! — О Элементы html и body —>
h t m l , |
body{ m a r g i n : Opx; padding:Орх; |
||
|
|
height:100%; |
} |
< ! — © Определить стиль элемента заголовка --> |
|||
#header{ |
b a c k g r o u n d - c o l o r : |
#C0C0C0; |
|
|
h e i g h t : |
ЮОрх; |
|
|
b o r d e r - b o t t o m : lpx |
s o l i d b l a c k ; |
|
|
f o n t - w e i g h t : b o l d ; J |
|
|
< ! — © Разместить элемент span регистрационной формы —> #login { t e x t - a l i g n : r i g h t ; f l o a t : r i g h t ;
m a r g i n - t o p : 1 5 p x ;
m a r g i n - r i g h t : 1 5 p x ; )
< ! - - О Отформатировать текст заголовка -->
#sloganText{ f o n t - s i z e : 25px; |
|
m a r g i n - l e f t : |
15px; |
l i n e - h e i g h t : |
ЮОрх; } |
< / s t y l e > |
|
Вначале мы удаляем все поля или заполнения из тела О документа. Высоту (свойство height) мы задаем равной 100%. Важно отметить, что нам необходимо задать данные свойства в дескрипторах HTML И body, поскольку различные браузеры получают данную информацию из одного из указанных дескрипторов.
Разрабатывая стилевое оформление заголовка ©, мы можем задать цвет фона элемента div. Кроме того, можно установить высоту и добавить границу кнопки, чтобы отделить заголовок от содержимого. Помимо этого, можно изменить свойства шрифтов, которые мы посчитаем нужными.
Мы принимаем регистрационную информацию © и перемещаем ее в правую сторону экрана. Для этого используется свойство float со значением right. Для выравнивания текстовых блоков применяется свойство textalign, поэтому содержимое элемента span также выравнивается по правому полю. Благодаря этому текстовые окна выглядят более унифицировано. В противном случае они не были бы выровнены правильно, поскольку имя строки короче, чем пароль. Кроме того, для выравнивания положения регистрационной информации можно добавить поля, чтобы правый край соответствующего окна не примыкал непосредственно к границе элемента div заголовка.
В заключение необходимо определить стиль текста заголовка О. Задавая высоту строки (свойство lineheight) равной высоте элемента div, мы позволяем центрировать текст заголовка вертикально. Кроме того, свойства шрифта задаются так, чтобы текст был заметен. Далее мы добавили поле, поэтому первая буква в слове Ajax не выровнена по краю заголовка. После применения правил CSS к заголовку можно записать документ и посмотреть, как таблицы CSS изменили его внешний вид (рис 11.8).
Рис. 11.9. Сообщение об ошибке, вызванное предоставлением неверных сведений
Прежде чем отправлять информацию на сервер, необходимо отобразить для пользователя сообщение о том, что щелчок на кнопке позволяет ему войти в систему. Благодаря этому пользователь не будет повторно щелкать на кнопке, думая, что ничего не происходит.
Итак, мы получаем поля имени пользователя и пароля и помещаем их в строку, отправляемую на сервер. Значения отправляются на сервер с помощью объекта ContentLoader, принимающего в качестве параметров URL, функцию, вызываемую при удачном завершении действия, функцию, вызываемую в случае ошибки, действие формы POST, а также строку, содержащую отправляемые параметры. Рассмотрим подробнее функцию, вызываемую при успешном возврате данных с сервера и обрабатывающую эти данные: CreateScript{).
function CreateScript() {
strText - this.req.responseText; eval(strText);
}
При создании серверной части сценария мы возвращали текстовые строки, содержащие выражения JavaScript в свойстве responseText возвращаемого объекта. Чтобы эффективно использовать выражения JavaScript, их необходимо обработать с помощью метода eval (), точно определяющего, что содержит строка, и выполняющего указанные в ней действия. В данном случае строка либо будет содержать сообщение об ошибке, сгенерированное при сбое LoginFilter, либо код создания окна, если фильтр пропускает данные к SelectServlet (листинг 11.8).
Из чего состоит строка? В данном приложении мы не собираемся возвращать в ответ на запрос XML-документ, как мы поступали во многих других примерах. Вместо этого мы вернем структурированные выражения JavaScript, которые смогут использовать метод eval(). Используя термины, сформулированные в главе 5, можно сказать, что наше решение ориентировано скорее на сценарий, чем на данные. Как и ранее, мы приняли данный подход только ради разнообразия. В качестве среды передачи при разработке кода портала можно использовать XML или JSON.
Теперь можно сохранить портал и запустить его, чтобы посмотреть, как работает процедура регистрации. Как видно на рис. 11.9, в поля были введены неверное имя пользователя и пароль.
Ниже кнопки "login" на рис. 11.9 отображено сообщение об ошибке, информирующее пользователя, что предоставленные им данные неверны.