 |
Вернуться к статье
Листинг 4. index.html
<!--
============================================================
Проект: Полный цикл разработки Ajax-приложения
Назначение: Это пример сценария, используемого
в статье на IBM developerWorks.
Дата последней модификации: 12 мая 2007.
Данный HTML-файл реализует необходимые элементы пользовательского интерфейса
для выполняющегося в браузере приложения кассира банка. Это -
одностраничное Ajax-приложение. Это означает,
что данное приложение не извлекает какие-либо страницы
с сервера, кроме как при начальной загрузке
данного (единственного) HTML-файла.
В данном файле широко используются теги <DIV>, <SPAN> и
<TABLE> для выполнения известных Ajax-приемов.
Это самодостаточный файл, содержащий всю
HTML-разметку, необходимую для приложения кассира банка.
============================================================
-->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
Заголовок HTML-документа описывает различные свойства документа, в том числе
его название и взаимоотношения с другими документами, такими как CSS и
JavaScript-файлы.
В одностраничном приложении Bank Teller будут использоваться следующие документы:
1) json.js (синтаксический анализатор JSON с открытыми исходными кодами,
разработанный Дугласом Крокфордом (Douglas Crockford)).
2) xhr.js (базовая программа, предоставляющая XHR-функции).
3) BankTeller.js (вся логика, выполняющаяся на стороне клиента, находится
в этом JavaScript-файле)
4) BankTeller.css (все стилевое оформление, необходимое для приложения,
находится в этом файле)
-->
<head>
<title>Ajax Bank Teller Application</title>
<script language"JavaScript" type="text/javascript" src="json.js"></script>
<script language"JavaScript" type="text/javascript" src="xhr.js"></script>
<script language"JavaScript" type="text/javascript" src="BankTeller.js"></script>
<link rel="stylesheet" style="text/css" href="BankTeller.css" media="all" />
</head>
<!--
Установить обработчик событий на инициализацию специфичных для приложения элементов.
Этот обработчик событий будет активизироваться во время загрузки страницы.
В данном обработчике событий будет настраиваться начальный экран приложения
кассира банка, а другие экраны будут скрыты.
-->
<body onload="initOnPageLoad();">
<!--
Это приложение имеет семь различных разделов, которые разделяются
при помощи элементов <DIV>. Такими разделами являются:
1) Раздел Main (главный)
2) Раздел Teller Options (Menu) (операции кассира - меню)
3) Раздел Deposit (депозит)
4) Раздел Debit (дебет)
5) Раздел Stock portfolio (портфель ценных бумаг)
6) Раздел Bank teller action result (результат операции кассира банка)
7) Раздел Page footer (сноска страницы)
Все разделы будут показываться избирательно в зависимости от контекста
приложения, в котором находится пользователь в данный момент времени. Это
выполняется логикой на стороне клиента, реализованной на JavaScript. Данный прием
обеспечивает динамичность и хорошую реакцию на действия пользователя. Он
значительно улучшает работу пользователя в сравнении с традиционными
Web-приложениями, использующими модель обновления страницы "нажми и жди".
-->
<!--
Следующий главный DIV-контейнер предназначен для всего приложения.
Все остальные разделы являются его потомками. Все они находятся в
этом узле DIV-контейнера в DOM.
-->
<div id="mainPage"
title="This is an Ajax based single-page browser application.
No browser Back button please. HTML download from server occurs ONLY ONCE.
From then on, back-end server is contacted asynchronously ONLY
for data exchanges.">
<h1 title="This web application provides Bank teller services.">
Bank Teller Operations
</h1>
<!--
DIV-элемент tellerOptions содержит таблицу, которая будет предоставлять
пользователю доступные для выбора операции кассира. Этот контейнер
содержит пункты меню для всего приложения кассира банка.
-->
<div id="tellerOptions" title="You can perform these teller operations.">
<center><font color="Olive">
<u>Click an operation below</u>
</font></center>
<!--
Каждый пункт меню является HTML-текстом, который встроен внутрь тега
SPAN. Это позволит нам установить события mouseover и mouseout
для данного текстового элемента. Мы можем комбинировать эти события с
CSS-стилем для эмуляции поведения меню в настольных приложениях. Когда
пользователь выбирает данный пункт меню, может быть выполнена
соответствующая логика приложения.
Эти различные пункты меню находятся внутри тега TABLE
в виде отдельных строк.
-->
<table class="tellerOptionsTable" align="center">
<tr>
<!--
Обратите внимание на то, что мы используем атрибут class в span
для стилевого оформления значения td, чтобы можно было динамически
назначать классы стиля на JavaScript) при перемещении пользователем
курсора мыши по различным названиям операций. Если использовать
атрибут id для CSS-стиля, динамически назначать стили на JavaScript
нельзя.
-->
<!--
Обработчики событий вызываются с параметром,
указывающим номер пункта меню, т.е. 1, 2 или 3.
i.e. 1, 2 or 3.
-->
<!-- Пункт меню Deposit -->
<td>
<span id="tellerOptionsLink1" class="tellerOptionsLink"
title="Deposit to an account."
onmouseover="changeOptionsLinkStyleForSelection(1);"
onmouseout="changeOptionsLinkStyleToDefault(1);"
onclick="processTellerOperation(1);">
1) Deposit to an account
</span>
</td>
</tr>
<tr>
<!-- Пункт меню Debit -->
<td>
<span id="tellerOptionsLink2" class="tellerOptionsLink"
title="Debit from an account."
onmouseover="changeOptionsLinkStyleForSelection(2);"
onmouseout="changeOptionsLinkStyleToDefault(2);"
onclick="processTellerOperation(2);">
2) Debit from an account
</span>
</td>
</tr>
<tr>
<!-- Пункт меню Get stock portfolio value -->
<td>
<span id="tellerOptionsLink3" class="tellerOptionsLink"
title="Get Stock portfolio value."
onmouseover="changeOptionsLinkStyleForSelection(3);"
onmouseout="changeOptionsLinkStyleToDefault(3);"
onclick="processTellerOperation(3);">
3) Current portfolio value
</span>
</td>
</tr>
</table>
</div> <!-- Конец <div id="tellerOptions"> -->
<!--
DIV-элемент tellerOptions содержит HTML-форму, необходимую для
депозита денег на счет.
-->
<div id="depositAction" title="Deposit to an account" class="depositAction">
<!-- Эта HTML-форма предоставляет UI-элементы для операции депозита -->
<form name="depositActionForm">
<span id="depositActionFormTitle" class="depositActionFormTitle">
Deposit to an account
</span>
<!--
Данная таблица реализует ниспадающее окно списка вариантов и
элемент input для ввода суммы депозита.
-->
<table class="depositActionTable" align="center">
<tr>
<td>Select Account Owner:</td>
<td>
<select id="depositAccountOwner" size=7
name="depositAccountOwner">
</select>
</td>
</tr>
<tr>
<td>Amount:</td>
<td><input type="text" name="depositAmount"
id="depositAmount" maxlength="15" size="15"
title="e-g: 100"/></td>
</tr>
</table>
<!--
Данная таблица реализует кнопку операции. При ее нажатии будет
активизироваться обработчик события onclick, выполняющий
необходимую логику на стороне клиента.
-->
<table align="center" class="depositAmountButtonTable">
<tr>
<td>
<input id="depositAmountActionButton"
value="Deposit" type="button"
title="Click here to deposit to an account."
onclick="depositAmountAction_Async();"/>
</td>
</tr>
</table>
</form>
</div> <!-- Конец <div id="depositAction"> -->
<!--
DIV-элемент tellerOptions содержит HTML-форму, необходимую для
дебета денег со счета.
-->
<div id="debitAction" title="Debit from an account" class="debitAction">
<form name="debitActionForm">
<span id="debitActionFormTitle" class="debitActionFormTitle">
Debit from an account
</span>
<table class="debitActionTable" align="center">
<tr>
<td>Select Account Owner:</td>
<td>
<select id="debitAccountOwner" size=7
name="debitAccountOwner">
</select>
</td>
</tr>
<tr>
<td>Amount:</td>
<td><input type="text" name="debitAmount" id="debitAmount"
maxlength="15" size="15" title="e-g: 100"/></td>
</tr>
</table>
<!--
Данная таблица реализует кнопку операции. При ее нажатии будет
активизироваться обработчик события onclick, выполняющий
необходимую логику на стороне клиента.
-->
<table align="center" class="debitAmountButtonTable">
<tr>
<td>
<input id="debitAmountActionButton" value="Debit"
type="button"
title="Click here to debit from an account."
onclick="debitAmountAction_Async();"/>
</td>
</tr>
</table>
</form>
</div> <!-- Конец <div id="depositAction"> -->
<!--
DIV-элемент portfolioOption содержит форму для
обновления текущего значения стоимости портфеля ценных бумаг.
-->
<div id="portfolioAction" title="Update portfolio value"
class="portfolioAction">
<form name="portfolioActionForm">
<span id="portfolioActionFormTitle" class="portfolioActionFormTitle">
Get portfolio value
</span>
<table class="portfolioActionTable" align="center">
<tr>
<td>Select Account Owner:</td>
<td>
<select id="portfolioAccountOwner" size=7
name="portfolioAccountOwner">
</select>
</td>
</tr>
</table>
<!--
Данная таблица реализует кнопку операции. При ее нажатии будет
активизироваться обработчик события onclick, выполняющий
необходимую логику на стороне клиента.
-->
<table align="center" class="portfolioValueButtonTable">
<tr>
<td>
<input id="portfolioActionButton"
value="Get Stock Portfolio Value" type="button"
title="Click here to get the portfolio value."
onclick="portfolioAction_Async();"/>
</td>
</tr>
</table>
</form>
</div> <!-- Конец <div id="portfolioAction"> -->
<!--
DIV-элемент tellerActionResult содержит форму для
получения значения стоимости портфеля ценных бумаг.
-->
<div id="tellerActionResult" title="Result of teller operation"
class="tellerActionResult">
<form name="tellerActionResultForm">
<span id="tellerActionResultTitle" class="tellerActionResultTitle">
Result from Teller Operation
</span>
<!--
В данной таблице содержится текстовая область, суммирующая результаты
операции, выполненной кассиром.
-->
<table class="tellerActionResultTable" align="center">
<tr>
<td>
<textarea id="tellerActionResultArea" rows="15"
cols="80" readonly></textarea>
</td>
</tr>
</table>
</form>
</div> <!-- Конец <div id="tellerActionResult"> -->
<!--
DIV-элемент pageFooter содержит информацию сноски, такую как
имя работающего с программой пользователя и ссылку Go to main menu. Этот
раздел сноски будет прикрепляться к нижней части каждого раздела
данного приложения.
-->
<div id="pageFooter">
<h1></h1>
<table id="footerTable" class="footerTable" align="center">
<tr>
<!--
Обратите внимание на то, что мы используем атрибут class в span
для стилевого оформления значения td, чтобы можно было динамически
назначать классы стиля на JavaScript при перемещении пользователем
курсора мыши по различным названиям операций. Если использовать
атрибут id для CSS-стиля, динамически назначать стили на JavaScript
нельзя.
-->
<td>
<span id="currentUserDisplay" class="currentUserDisplay"
title="Currently logged in user's name.">
Teller: John Doe
</span>
</td>
<!--
Обработчики событий вызываются с параметром,
указывающим, какой пункт сноски выделяется.
-->
<td>
<span id="goToMainMenuLink" class="goToMainMenuLink"
title="Click here to go to main menu."
onmouseover="changeFooterLinkStyleForSelection(1);"
onmouseout="changeFooterLinkStyleToDefault(1);"
onclick="processFooterOperation(1);">
Back to main menu
</span>
</td>
</tr>
</table>
</div> <!-- Конец <div id="PageFooter"> -->
</div> <!-- Конец <div id="mainPage"> -->
</body>
</html>
|
Листинг 5. BankTeller.css
/*
============================================================
Проект: Полный цикл разработки Ajax-приложения
Назначение: Это пример сценария, используемого
в статье на IBM developerWorks.
Дата последней модификации: 12 мая 2007.
Данный файл реализует CSS-правила, использующиеся для стилевого оформления
UI-элементов управления выполняющегося в браузере приложения кассира банка.
Данное приложение не использует все возможности
CSS. Однако в него включены базовые (и важные) аспекты CSS.
============================================================
*/
/*
Это HTML-селектор, переопределяющий атрибуты
font и background тега body.
*/
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: medium;
text-align: center;
background: rgb(220, 220, 220);
}
/*
Это HTML-селектор, использующийся для стилевого оформления элемента <h1>.
*/
h1 {
color: #cc6600;
border-bottom: medium double #888888;
font-size: 1.7em;
}
/*
Этот класс CSS ID применим для DIV-элемента, содержащего таблицу, в которой
перечислены все операции, доступные кассиру.
*/
#tellerOptions {
margin-left: 3%;
margin-right: 3%;
padding-top: 10px;
padding-bottom: 10px;
border: red;
border-width: thick;
border-style: double;
border-collapse: collapse;
}
/*
Этот неполный зависимый селектор применяет стиль к таблице операций кассира.
*/
table.tellerOptionsTable td {
padding-top: 10px;
padding-bottom: 10px;
}
/*
Этот групповой (generic) CSS-класс применяется для стилевого оформления полей таблиц
в форме операций кассира.
*/
.tellerOptionsTable,
.depositActionTable,
.debitActionTable,
.portfolioActionTable {
margin-top: 30px;
}
/*
Этот групповой CSS-класс применяется для SPAN-элементов (нажимаемый
текст), предоставляющих различные операции кассира. Пользователь может выбрать из
этого списка операцию для выполнения. Групповой класс используется здесь так, чтобы
внутри JavaScript мы могли динамически изменять стиль текста операции кассира при
возникновении событий mouseover или mouseout в текстовых областях,
определенных элементами SPAN. Ниже указан стиль по умолчанию, когда нет
активности мыши или когда пользователь выводит курсор мыши из области.
*/
.tellerOptionsLink {
cursor: pointer;
background-color: rgb(220, 220, 220);
color: blue;
font-weight: bold;
font-style: normal;
text-decoration: none;
border-style: none;
}
.tellerOptionsLinkSelection,
.goToMainMenuLinkSelection {
cursor: pointer;
background-color: green;
color: yellow;
font-weight: normal;
font-style: italic;
text-decoration: none;
border-style: ridge;
border-width: 7px;
border-top-width: 7px;
border-color: black;
}
.depositAction {
margin-left: 3%;
margin-right: 3%;
padding-top: 10px;
padding-bottom: 10px;
cursor: default;
border: navy;
border-width: thick;
border-style: double;
border-collapse: collapse;
}
.debitAction {
margin-left: 3%;
margin-right: 3%;
padding-top: 10px;
padding-bottom: 10px;
cursor: default;
border: lightseagreen;
border-width: thick;
border-style: double;
border-collapse: collapse;
}
.portfolioAction {
margin-left: 3%;
margin-right: 3%;
padding-top: 10px;
padding-bottom: 10px;
cursor: default;
border: purple;
border-width: thick;
border-style: double;
border-collapse: collapse;
}
.tellerActionResult {
margin-left: 3%;
margin-right: 3%;
padding-top: 10px;
padding-bottom: 10px;
cursor: default;
border: rosybrown;
border-width: thick;
border-style: double;
border-collapse: collapse;
}
/*
Этот групповой CSS-класс определяет формат заполнения ячейки (cell padding) для
кнопки в форме операций кассира и других.
*/
table.depositAmountButtonTable td,
table.debitAmountButtonTable td,
table.portfolioValueButtonTable td,
table.tellerActionResultTable td {
padding-left: 25px;
padding-right: 25px;
}
/*
Этот групповой CSS-класс определяет поле для таблиц, содержащих
форму операций кассира, и других.
*/
table.depositAmountButtonTable,
table.debitAmountButtonTable,
table.portfolioValueButtonTable,
table.tellerActionResultTable {
margin-top: 40px;
}
.depositActionFormTitle,
.debitActionFormTitle,
.portfolioActionFormTitle,
.tellerActionResultTitle {
color: olive;
font-weight: normal;
font-style: normal;
text-decoration: underline;
text-align: center;
}
/*
Этот групповой CSS-класс применяется для установки формата заполнения ячейки
для элементов <td> таблицы, в которой перечислены пункты сноски.
*/
table.footerTable td {
padding-left: 100px;
padding-right: 100px;
}
/*
Этот групповой CSS-класс применяется для установки поля
таблицы, в которой перечислены пункты сноски.
*/
table.footerTable {
margin-top: 20px;
}
/*
Этот групповой CSS-класс применяется для статического отображения имени
пользователя, зарегистрировавшегося для работы в системе.
*/
.currentUserDisplay {
cursor: default;
background-color: rgb(220, 220, 220);
color: darkred;
font-weight: normal;
font-style: normal;
}
/*
Этот групповой CSS-класс применяется для SPAN-элементов (нажимаемый
текст), предоставляющих различные операции кассира. Пользователь может выбрать из
этого списка операцию для выполнения. Групповой класс используется здесь так, чтобы
внутри JavaScript мы могли динамически изменять стиль текста операции кассира при
возникновении событий mouseover или mouseout в текстовых областях,
определенных элементами SPAN. Ниже указан стиль по умолчанию, когда нет
активности мыши или когда пользователь выводит курсор мыши из области.
*/
.gotoMainMenuLink {
cursor: pointer;
background-color: rgb(220, 220, 220);
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
border-style: none;
}
/*
Этот CSS-класс ID применяется для кнопки Teller actions и других.
*/
#depositAmountActionButton,
#debitAmountActionButton,
#portfolioActionButton {
background-color: saddlebrown;
color: white;
border: purple;
border-width: thin;
border-style: inset;
font-weight: bold;
font-style: normal;
font-size: 90%
}
/*
Ниже переопределяется стиль, определенный ранее в этом же классе.
*/
#debitAmountActionButton {
background-color: midnightblue;
}
/*
Ниже переопределяется стиль, определенный ранее в этом же классе.
*/
#portfolioActionButton {
background-color: teal;
}
|
Listing 6. xhr.js
/*
============================================================
Проект: Полный цикл разработки Ajax-приложения
Назначение: Это пример сценария, используемого
в статье на IBM developerWorks.
Дата последней модификации: 12 мая 2007.
Данный JavaScript-файл реализует специфичные функции, связанные с объектом
XHR (XML HTTP Request). Используемая здесь логика является
типовой, применяемой в сотнях других Web-приложениях. Ее можно обнаружить
в любой книге по Ajax или статье, объясняющей внутреннюю работу XHR.
============================================================
*/
/*
============================================================
Функция: createRequest
Дата последней модификации: 12 мая 2007.
Эта функция создает XHR-объект, независимый от браузера.
На момент написания данной статьи XHR некоторым образом
зависит от браузера. Можно разделить поддержку XHR браузерами на два
основных класса, т.е. Internet Explorer и не-IE браузеры.
Далее, внутри IE имеется несколько реализаций
XHR для браузеров до IE6 и для остальных. Итак, Microsoft
поддерживает XHR через свой ActiveX. После выслушивания
жалоб со стороны сообщества Web-разработчиков, Microsoft
осознала необходимость реализации XHR как родного для браузера
объекта, как сделано в остальных браузерах. По слухам мы скоро
увидим XHR-поддержку в IE-браузерах через
объект XMLHttpRequest. А пока мы должны позаботиться о
зависимости от браузеров, как показано в этой функции.
============================================================
*/
function createRequest() {
// Определить локальную переменную и установить ее в значение null.
var request = null;
// Попробовать различные способы определения типа используемого браузера.
try {
// Не Microsoft браузеры (Firefox, Safari и др.).
request = new XMLHttpRequest();
} catch(trymicrosoft) {
try {
// IE6 и выше.
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
// Более старые версии IE, т.е. до IE6.
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed) {
// Нет поддержки XHR
request = null;
} // Конец catch(failed)
} // Конец catch(othermicrosoft)
} // Конец catch(trymicrosoft)
// Проверить, есть ли корректный объект XHR.
if (request == null) {
alert("Error creating the XMLHttpRequest object!");
} else {
// Возвратить объект XHR, который был создан.
return(request);
} // Конец if (request == null)
} // Конец function createRequest.
/*
============================================================
Функция: sendHttpRequest
Дата последней модификации: 12 мая 2007.
Данная функция передает любые произвольные данные на сервер.
Принимает четыре аргумента:
1) Объект XHR.
2) Функцию обратного вызова (если есть) для получения ответа сервера.
3) URL, по которому нужно передать содержимое.
4) Передаваемые данные.
В зависимости от входных параметров для обмена данными она будет
взаимодействовать с сервером в асинхронном режиме или
синхронно. Используется POST-запрос
HTTP для выполнения вызова в REST-стиле.
============================================================
*/
function sendHttpRequest(request, callbackFunction, url, postData) {
// Инициализация локальной переменной в значение false.
// Эта переменная указывает, нужно ли взаимодействовать с сервером
// в асинхронном режиме.
var async_request = false;
// Имеется ли функция обратного вызова?
if (callbackFunction != null) {
// Функция обратного вызова есть.
// Установить эту функцию как свойство onreadystatechange объекта XHR.
request.onreadystatechange = callbackFunction;
// Установить локальную переменную на указание того, что
// нам необходимо передать и принять ответ в не блокирующем режиме,
// т.е. асинхронно.
async_request = true;
}
// Открыть HTTP-соединение по предоставленному URL.
request.open("POST", url, async_request);
// Установить заголовок HTTP-запроса.
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// Передать его.
// Если async-режим не равен true, этот вызов будет блокировать работу
// до получения HTTP-ответа от сервера.
// В противном случае это выражение просто передаст данные и возвратит
// управление, не ожидая ответа от сервера.
var response = request.send(postData);
if (async_request == false) {
// Мы передаем запрос в синхронном режиме.
// Следовательно, возвращаем ответ, полученный от сервера.
return(response);
} else {
// Если запрос был передан в асинхронном режиме, мы не должны заботиться о
// возврате чего-нибудь стоящего. Ответ будет передан прямо в функцию
// обратного вызова, предоставленную вызывающей программой.
return(true);
}
} // Конец функции sendHttpRequest.
|
Вернуться к статье
| |
|
