Полный цикл разработки Ajax-приложений, Часть 2: Реализация уровней Ajax-клиента и сервера (исходники)

                
			
-- Этот файл является частью статьи "Полный цикл Ajax-разработки" на 
-- IBM developerWorks. Этот файл содержит простой сценарий для
-- создания базы данных и заполнения его данными.
-- 
-- Дата последней модификации: 10 мая 2007
-- 
-- Для выполнения в MySQL приведенных ниже выражений проделайте следующее:
-- 1) Запустите клиент командной строки MySQL.
-- 2) Введите пароль администратора MySQL.
-- 3) Введите следующую строку, заменяя <YOUR_SQL_FILE_DIR> именем 
--    каталога, в котором хранится файл.
--    source <YOUR_SQL_FILE_DIR>\bankdb.sql

--
-- Структура таблицы 'BankDB'
--

DROP DATABASE BankDB;

CREATE DATABASE BankDB;

USE BankDB;

CREATE TABLE account (
   AccountHolderName VARCHAR(20) NOT NULL, 
   AccountNumber INTEGER NOT NULL,
   CheckingBalance DOUBLE NOT NULL,
   StockName VARCHAR(6),
   StockQuantity INTEGER,
   StockValue DOUBLE,
   PRIMARY KEY(AccountHolderName, AccountNumber)
);

--
-- Заполнение данными таблицы 'account'
--

insert into ACCOUNT values ('Frodo', 435245, 2344.45, 'GOOG', 100, 3453.32);
insert into ACCOUNT values ('Sam', 928462, 7583.32, 'CSCO', 200, 5323.43);
insert into ACCOUNT values ('Pippin', 234233, 3444.62, 'INTC', 300, 4213.76);
insert into ACCOUNT values ('Merry', 642445, 1005.32, 'MSFT', 250, 1353.32);
insert into ACCOUNT values ('Aragorn', 972321, 6424.24, 'HPQ', 525, 12043.94);
insert into ACCOUNT values ('Gandalf', 432134, 5392.23, 'IBM', 400, 10043.78);
insert into ACCOUNT values ('Legolas', 590134, 4313.82, 'DELL', 325, 5926.62);
		

$link = mysqli_connect("hostname", "user", "password", "dbname");

$result = mysqli_close($link);

$stateCapital = $row['capital'];

$nationalPark = $row->park;

                

<?php
/*
============================================================
Проект: Полный цикл разработки Ajax-приложения

Назначение: Это пример сценария, используемого 
 в статье на IBM developerWorks.

Дата последней модификации: 11 мая 2007.

Этот PHP-модуль реализует базовую логику кассира банка,
необходимую для доступа к данным клиента в 
базе данных. Эти функции могут быть вызваны другими PHP-модулями,
имеющимися в сценарии Bank. Вся логика, включенная в операции
кассира банка, подразделяется на три следующие
базовые функции.

 a) Получить информацию о всех счетах
 b) Обработать транзакцию (депозит или дебет)
 c) Вычислить стоимость портфеля ценных бумаг

Здесь используются функции mysqli для прямого доступа к базе данных, 
в противоположность функциям PHP PDO. 
============================================================
*/
   // Эти переменные globals будут использоваться для хранения следующих значений:
   // 1) $link - для хранения объекта connection.
   // 2) $dbResult - для хранения объекта result, результата запроса к базе данных.
   // 3) $finalResult - это ассоциативный массив, в котором упакованы
   //    и возвращены вызывающей стороне результаты 
   //    конкретных операций кассира банка.
   global $link, $dbResult, $finalResult;

   /*
   ============================================================
   Функция: connect_to_db

   Дата последней модификации: 11 мая 2007.
	
   Эта функция выполняет подключение к базе данных BankDB MySQL.
   Если попытка подключения успешна, она сохраняет 
   объект connection в глобальной переменной и 
   возвращает значение true. 
   В противном случае возвращается значение false.
   ============================================================ 
   */
   function connect_to_db() {
      // Мы будем использовать следующие глобальные переменные.
      global $link, $dbResult, $finalResult;
		
      // Инициализация переменных.
      $link = null;
      $dbResult = null;
      $finalResult = null;
		
      // Выполнить подключение mysqli к локальной базе данных BankDB, используя 
      // соответствующие параметры доступа.
      $link = mysqli_connect("localhost", "root", "webtech", "bankdb");

      // Проверить, работает ли подключение к DB.
      if (mysqli_connect_errno()) {
         // Похоже, что есть какая-то проблема.
         // Получить номер MySQL-ошибки и строку, описывающую ошибку.
         $resultMsg = "DB connection error: " . mysqli_connect_errno() .
            " [" . mysqli_connect_error() . "]";
         // Сохранить результаты в ассоциативном массиве.
         // Установить результат операции как неудачный.
         $finalResult["ResultCode"] = 1;
         // Записать сообщение результата.
         $finalResult["ResultMsg"] = $resultMsg;
         // Возвратить значение false для индикации ошибки подключения к DB.
         return (false);
      } else {
         // Подключение DB успешно.
         return(true);		
      } // Конец if (mysqli_connect_errno())
   } // Конец функции connect_to_db

   /*
   ============================================================
   Функция: close_connection_to_db

   Дата последней модификации: 11 мая 2007.

   Эта функция закрывает выполненное ранее подключение к 
   базе данных BankDB.
   ============================================================ 
   */	
   function close_connection_to_db() {
      // Мы будем использовать следующие глобальные переменные.
      global $link, $dbResult;
	
      // Закрыть подключение, если имеется активный 
      // объект connection.
      if ($link != null) {
         if (($dbResult != null) && (is_object($dbResult))) {
            // Если DB result содержит объект запроса данных, 
			// освободить занимаемую им память.
            mysqli_free_result($dbResult);
            $dbResult = null;
         } // Конец if ($dbResult != null)
			
         // Пора закрыть DB connection.
         mysqli_close($link);
         // Установить переменную объекта connection в значение null.
         $link = null;			
      } // Конец if ($link != null)
   } // Конец функции close_connection_to_db

   /*
   ============================================================
   Функция: getAllAccountInformation
	
   Дата последней модификации: 11 мая 2007.
	
   Эта функция считывает информацию обо всех счетах, хранящихся в
   BankDB, и возвращает их в ассоциативном массиве.
   ============================================================ 
   */			
   function getAllAccountInformation() {
      // Мы будем использовать следующие глобальные переменные.
      global $link, $finalResult, $dbResult;
	
      // Выполнить подключение к BankDB.
      $result = connect_to_db();
	
      // Если подключение неудачно, возвратить управление.
      if ($result == false) {
         return ($finalResult);
      } // Конец if ($result == false)
		
      // SQL-запрос для получения всех строк таблицы account.
      $queryStr = "Select * from account";
      // Выполнить SQL-запрос.
      $dbResult = mysqli_query($link, $queryStr);
		
      // Обработать ошибки запроса, если они имеются.
      if (mysqli_errno($link)) {
         // Сначала закрыть подключение.
         close_connection_to_db();		
         // Записать сообщение об ошибке в окончательный ассоциативный массив.	
         $resultMsg = "DB read error: " . mysqli_errno($link) .
            " [" . mysqli_error($link) . "]";
         // Установить специфический для приложения код возврата FAILURE.
         $finalResult["ResultCode"] = 1;				
         $finalResult["ResultMsg"] = $resultMsg;
         // Возвратить окончательный результат.
         return ($finalResult);
      } // Конец if (mysqli_errno($link))
		
      // Получить количество запрошенных строк.
      $rowCount = mysqli_num_rows($dbResult);
	
      // Если база данных пуста, возвратить управление.
      if ($rowCount <= 0) {
         // Сначала закрыть подключение.
         close_connection_to_db();
         // Записать код возврата и возвращаемое сообщение.
         $finalResult["ResultCode"] = 1;				
         $finalResult["ResultMsg"] = "No accounts were found in BankDB.";
         // Возвратить окончательный результат.
         return ($finalResult);			
      } // Конец if ($rowCount <= 0)

      // Установить counter в значение 0.
      $cnt = 0;
      // Создать массив для хранения всех полей из каждой строки.
      $accountInfo = array();

      // Из каждой строки результата запроса извлечь поля данных.
      while($row = mysqli_fetch_assoc($dbResult)) {
         // Инициализировать в null.
         $data = null;
         // Создать ассоциативный массив "на лету" и сохранить 
         // конкретные поля данных, считанные из текущей строки базы данных.
         $data["AccountHolderName"] = $row["AccountHolderName"];
         $data["AccountNumber"] = $row["AccountNumber"];
         $data["CheckingBalance"] = doubleval($row["CheckingBalance"]);
         $data["StockName"] = $row["StockName"];
         $data["StockQuantity"] = intval($row["StockQuantity"]);
         $data["StockValue"] = doubleval($row["StockValue"]);
         // Теперь записать весь ассоциативный массив в обычный массив.
         $accountInfo[$cnt++] = $data;
      } // Конец while($row = mysqli_fetch_assoc($dbResult))
		
      // Мы завершили чтение информации обо всех счетах из базы данных.
      // Установить код возврата, как успешный.
      $finalResult["ResultCode"] = 0;
      // Установить сообщение результата, как успешное.
      $finalResult["ResultMsg"] = "ReadAllAccountsInfoFromDB successful";
      // Сделать весь массив, содержащий информацию обо всех счетах,
      // окончательным ассоциативным массивом результата.
      // $finalResult - это ассоциативный массив, содержащий 
      // обычный массив, который в свою очередь содержит несколько ассоциативных 
      // массивов.
      $finalResult["AccountInfo"] = $accountInfo;
      // Закрыть подключение.	
      close_connection_to_db();	
      // Возвратить окончательный массив результатов.
      return($finalResult);		
   } // Конец функции getAllAccountInformation

   /*
   ============================================================
   Функция: accountTransaction

   Дата последней модификации: 11 мая 2007.
	
   Эта функция выполняет транзакцию, выбранную кассиром банка.
   Функция принимает имя владельца счета, количество и
   тип транзакции в качестве параметров.
   Тип транзакции 1 - это депозит на счет.
   Тип транзакции 2 - это дебет.
   После выполнения транзакции возвращается состояние 
   счета до этой транзакции и состояние счета после транзакции.
   ============================================================ 
   */	
   function accountTransaction($accountHolderName, $amount, $transactionType) {
      // Мы будем использовать следующие глобальные переменные.
      global $link, $finalResult, $dbResult;
      // Выполнить подключение к базе данных.
      $result = connect_to_db();
		
      // Если подключение неуспешно, выполнить возврат.
      if ($result == false) {
         return ($finalResult);
      } // Конец if ($result == false)

      // SQL-запрос для чтения конкретных данных о счете 
      // данного владельца счета.
      $queryStr = "Select * from account where AccountHolderName='$accountHolderName'";
      // Выполнить SQL-запрос.
      $dbResult = mysqli_query($link, $queryStr);
	
      // Возникла ошибка?
      if (mysqli_errno($link)) {
         // Закрыть подключение.
         close_connection_to_db();
         // Записать сообщение об ошибке.
         $resultMsg = "DB read error: " . mysqli_errno($link) .
            " [" . mysqli_error($link) . "]";
         // Установить специфичный для приложения код возврата.
         $finalResult["ResultCode"] = 1;				
         // Записать сообщение результата.
         $finalResult["ResultMsg"] = $resultMsg;
         // Возвратить ассоциативный массив с результатом ошибки.
         return ($finalResult);
      } // Конец if (mysqli_errno($link))

      // Сколько строк было прочитано из DB?
      $rowCount = mysqli_num_rows($dbResult);
	
      // Если строк нет, возвратить управление.
      if ($rowCount <= 0) {
         // Закрыть подключение.
         close_connection_to_db();
         // Установить возвращаемое значение как неудачное.
         $finalResult["ResultCode"] = 1;				
         $finalResult["ResultMsg"] = "No accounts were found in BankDB.";
         // Возвратить окончательный результат.
         return ($finalResult);			
      } // Конец if ($rowCount <= 0)

      // Сохранить запись с текущим балансом.
      // Создать массив для хранения состояний до и после транзакции.
      $accountInfo = array();		
      // Извлечь результат запроса в виде ассоциативного массива.
      $row = mysqli_fetch_assoc($dbResult);		
      $data = null;
      // Записать значения полей из строки базы данных в 
      // новый ассоциативный массив.
      $data["AccountHolderName"] = $row["AccountHolderName"];
      $data["AccountNumber"] = $row["AccountNumber"];
      $data["PreviousCheckingBalance"] = doubleVal($row["CheckingBalance"]);
      $data["StockName"] = $row["StockName"];
      $data["StockQuantity"] = intval($row["StockQuantity"]);
      $data["StockValue"] = doubleVal($row["StockValue"]);
      // Записать состояние счета до транзакции в обычный массив.
      $accountInfo[0] = $data;

      // Инициализировать переменные.
      $newBalance = 0.0;
      // Поскольку мы выполняем транзакцию, меняющую 
      // баланс, необходимо потом обновить DB.
      $updateDB = true;

      if ($transactionType == 1) {
         // Это депозит.
         // Сумма депозита больше 0?
         if ($amount > 0) {
            $newBalance = doubleval($data["PreviousCheckingBalance"]) + $amount;
         } else {
            // Сумма депозита равна 0. Нет необходимости обновлять базу данных.
            $updateDB = false;
            $newBalance = doubleval($data["PreviousCheckingBalance"]);
         } // Конец if ($amount > 0)
      } else if ($transactionType == 2) {
         // Это дебет.
         // Проверить, что сумма дебета больше 0 и 
         // меньше имеющейся на счете.
         if (($amount > 0) &&
            ($amount < doubleval($data["PreviousCheckingBalance"]))) {
            $newBalance = doubleval($data["PreviousCheckingBalance"]) - $amount;	
         } else {
            // Сумма дебета либо 0, либо больше имеющейся на счете.
            $updateDB = false;
            $newBalance = doubleval($data["PreviousCheckingBalance"]);
         }
      } // Конец if ($transactionType == 1)
		
      // Транзакция, выполненная кассиром банка, завершилась.
      // Прекрасно. Возвратить результат.
      $finalResult["ResultCode"] = 0;
      $finalResult["ResultMsg"] = "AccountTransaction successful.";

      // Если мы изменили баланс счета операцией 
      // депозита или дебета, обновить базу данных.
      if ($updateDB == true) {
         // Подготовить выражение SQL Update.
         $updateStr = "update account set CheckingBalance=$newBalance " .
            "where AccountHolderName='$accountHolderName'";

         // Выполнить запрос на обновление.
         $dbResult = mysqli_query($link, $updateStr);

         // Есть ли ошибки?
         if (mysqli_errno($link)) {
            // Закрыть подключение к базе данных.
            close_connection_to_db();				
            // Подготовить возвращаемое сообщение об ошибке.
            $resultMsg = "DB write error: " . mysqli_errno($link) .
               " [" . mysqli_error($link) . "]";
            $finalResult["ResultCode"] = 1;
            $finalResult["ResultMsg"] = $resultMsg;
            // Возвратить сообщение об ошибке.
            return ($finalResult);
         }
					
         if ($dbResult == true) {
            // Все хорошо.
            // Подготовиться к возврату результата данной операции.
            $finalResult["ResultCode"] = 0;
            $finalResult["ResultMsg"] = 
               "New balance for $accountHolderName has been stored in DB.";
         } else {
            $finalResult["ResultCode"] = 1;
            $finalResult["ResultMsg"] = 
            "New balance for $accountHolderName could not be stored in DB.";
            // Возвратить окончательный результат с ошибкой.
            return($finalResult);
         } // Конец if ($dbResult == true)				
      } // Конец if ($updateDB == true)
		
      // Мы уже сохранили состояние счета до транзакции в
      // массиве в начале этой функции.
      // Сохранить вторую запись, которая будет содержать обновленный баланс.
      $data = null;
      $data["AccountHolderName"] = $row["AccountHolderName"];
      $data["TransactionAmount"] = $amount;
      $data["AccountNumber"] = $row["AccountNumber"];
      $data["NewCheckingBalance"] = $newBalance;
      $data["StockName"] = $row["StockName"];
      $data["StockQuantity"] = intval($row["StockQuantity"]);
      $data["StockValue"] = doubleval($row["StockValue"]);
      $accountInfo[1] = $data;		
      $finalResult["AccountInfo"] = $accountInfo;	
      // Закрыть подключение к DB.
      close_connection_to_db();	
      // Возвратить окончательный результат.
      return($finalResult);				
   } // Конец функции accountTransaction.

   /*
   ============================================================
   Функция: portfolioValue
	
   Дата последней модификации: 11 мая 2007.
	
   Эта функция сохраняет текущее значение стоимости портфеля ценных бумаг
   данного владельца счета в базе данных. Она принимает имя 
   владельца счета и текущую цену акции в качестве входных
   аргументов. Она считывает текущую позицию (в сценарии
   Bank каждый владелец владеет акциями только одной компании;
   это сделано для упрощения задачи.) и вычисляет
   текущую рыночную стоимость. Затем функция
   обновляет базу данных новым значением суммарной стоимости акций.
   ============================================================ 
   */		
   function portfolioValue($accountHolderName, $stockPrice) {
      // Мы будем использовать следующие глобальные переменные.
      global $link, $finalResult, $dbResult;

      // Подключиться к базе данных MySQL BankDB.
      $result = connect_to_db();
	
      // При ошибке подключения возвратить управление.
      if ($result == false) {
         return ($finalResult);
      } // Конец if ($result == false)

      // Подготовить строку запроса для получения информации о счете данного владельца.
      $queryStr = "Select * from account where AccountHolderName='$accountHolderName'";
      // Выполнить запрос MySQL.
      $dbResult = mysqli_query($link, $queryStr);
	
      // Есть ошибки?
      if (mysqli_errno($link)) {
         // Ошибка. Закрыть подключение к db.  
         close_connection_to_db();
         // Подготовить сообщение об ошибке для возврата.
         $resultMsg = "DB read error: " . mysqli_errno($link) .
            " [" . mysqli_error($link) . "]";
         $finalResult["ResultCode"] = 1;				
         $finalResult["ResultMsg"] = $resultMsg;
         // Возвратить ошибку.
         return ($finalResult);
      } // Конец if (mysqli_errno($link))

      // Были считаны какие-либо строки из DB? 
      $rowCount = mysqli_num_rows($dbResult);
	
      // Если соответствующих строк в DB нет, возвратить управление.
      if ($rowCount <= 0) {
         // Закрыть подключение к DB.
         close_connection_to_db();
         $finalResult["ResultCode"] = 1;				
         $finalResult["ResultMsg"] = "No accounts were found in BankDB.";
         // Возвратить окончательный результат.
         return ($finalResult);			
      } // Конец if ($rowCount <= 0)

      // Сохранить запись с текущим значением стоимости портфеля.
      // Выделить массив для хранения состояния счета 
      // до и после транзакции.
      $accountInfo = array();		
      // Извлечь результаты из базы данных в виде ассоциативного массива.
      $row = mysqli_fetch_assoc($dbResult);		
      // Сохранить поля данных строки в ассоциативный массив.
      $data = null;
      $data["AccountHolderName"] = $row["AccountHolderName"];
      $data["AccountNumber"] = $row["AccountNumber"];
      $data["CheckingBalance"] = doubleval($row["CheckingBalance"]);
      $data["StockName"] = $row["StockName"];
      $data["StockQuantity"] = intval($row["StockQuantity"]);
      $data["PreviousPortfolioValue"] = doubleval($row["StockValue"]);
      // Записать ассоциативный массив в обычный массив.
      $accountInfo[0] = $data;

      // Вычислить стоимость портфеля.
      $finalResult["ResultCode"] = 0;
      $finalResult["ResultMsg"] = "PortfolioValue successfully calculated.";
      $newPortfolioValue = intval($row["StockQuantity"]) * doubleval($stockPrice);
	
      // Поскольку стоимость портфеля изменилась, обновить ее в DB.
      $updateStr = "update account set StockValue=$newPortfolioValue " .
         "where AccountHolderName='$accountHolderName'";

      // Выполнить SQL-запрос.
      $dbResult = mysqli_query($link, $updateStr);

      // Есть ли ошибки DB?
      if (mysqli_errno($link)) {
         // Закрыть подключение к DB.
         close_connection_to_db();		
         // Подготовить сообщение об ошибке для возврата.		
         $resultMsg = "DB write error: " . mysqli_errno($link) .
            " [" . mysqli_error($link) . "]";
         $finalResult["ResultCode"] = 1;
         $finalResult["ResultMsg"] = $resultMsg;
         // Возвратить сообщение об ошибке.
         return ($finalResult);
      } // Конец if (mysqli_errno($link))
			
      if ($dbResult == true) {
         // Все нормально.
         // Подготовить для возврата сообщение об успешном выполнении.
         $finalResult["ResultCode"] = 0;
         $finalResult["ResultMsg"] = 
            "New stock value for $accountHolderName has been stored in DB.";
      } else {
         $finalResult["ResultCode"] = 1;
         $finalResult["ResultMsg"] = 
            "New stock value for $accountHolderName could not be stored in DB.";
         // Обновление неудачно. Поэтому возвратить ошибочный результат.
         return($finalResult);
      } // Конец else в if ($dbResult == true)				
		
      // Записать вторую запись, которая будет иметь обновленное значение стоимости 
      // портфеля. Мы уже сохранили состояние до транзакции в массиве.
      // Сохраним также состояние после транзакции.
      $data = null;
      $data["AccountHolderName"] = $row["AccountHolderName"];
      $data["AccountNumber"] = $row["AccountNumber"];
      $data["CheckingBalance"] = doubleval($row["CheckingBalance"]);
      $data["StockName"] = $row["StockName"];
      $data["CurrentStockPrice"] = doubleval($stockPrice);
      $data["StockQuantity"] = intval($row["StockQuantity"]);
      $data["NewPortfolioValue"] = $newPortfolioValue;
      // Записать ассоциативный массив в обычный массив.
      $accountInfo[1] = $data;		
      $finalResult["AccountInfo"] = $accountInfo;	
      // Закрыть подключение к DB и возвратить результат.
      close_connection_to_db();	
      return($finalResult);				
   } // Конец функции portfolioValue.
?>
		

                
<!--
============================================================
Проект: Полный цикл разработки 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>
		

                
/*
============================================================
Проект: Полный цикл разработки 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;   
}
		

                
/*
============================================================
Проект: Полный цикл разработки 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.
		

<script language="JavaScript" type="text/javascript" src="xyz.js"></script>

<link rel="stylesheet" type="text/css" href="xyz.css" media="all" />