Преимущества использования технологии ajax:

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

2. Уменьшение нагрузки на сервер. AJAX позволяет несколько снизить нагрузку на сервер, например, в Gmail при отмеченных прочитанных письмах, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции, вместо необходимости повторно создавать страницу и отсылать ее клиенту.

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

Недостатки технологии ajax:

1. Интеграция со стандартными инструментами браузера. Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад» предоставляющая пользователям возможность вернуться к просмотренным ранее страницам.

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

3. Старые методы учета статистики сайтов становятся неактуальными. Многие сервисы статистики ведут учет просмотров новых страниц сайта, для сайтов страницы которых широко используют AJAX, такая статистика теряет актуальность.

Базовые технологии AJAX приведены в табл. 9.3

Таблица 9.3

Базовые технологии ajax

JavaScript	JavaScript — это язык сценариев общего назначения, предназначенный для включения кода в Web-приложение. Интерпретатор JavaScript в составе Web-браузера обеспечивает взаимодействие со встроенными средствами браузера. Данный язык используется для создания Ajax-приложений
CSS (Cascading Style Sheets)	CSS предоставляет возможность определять стили элементов Web-страницы. С помощью данной технологии можно без труда обеспечить согласованность внешнего вида компонентов приложения. В AjaxCSS используется для изменения представления интерфейса в процессе интерактивного взаимодействия
DOM (Document Object Model)	DOM представляет структуру Web-страницы в виде набора объектов, которые можно обрабатывать средствами JavaScript. Это дает возможность изменять внешний вид интерфейса Ajax-приложения в процессе работы
ОбъектXMLHttpRequest	Объект XMLHttpRequest позволяет программисту получать данные с Web-сервера в фоновом режиме. Как правило, возвращаемая информация предоставляется в формате XML, но данный объект позволяет также работать с любыми текстовыми данными. Несмотря на то что XMLHttpRequest является наиболее гибким из всех инструментов общего назначения, позволяющих решать подобные задачи, существуют и другие способы получения данных с сервера.

Пример реализации Ajax-Технологии. Рассмотрим следующий пример: имеется таблица с наименованиями изделий, в которой несколько тысяч записей. Пользователю необходимо выбрать всего одну запись из таблицы (реализация отношения "один ко многим"). Выбор пользователя является всего лишь одним из этапов заполнения веб-формы.

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

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

Выбор записи будет реализован с помощью двух элементов веб-формы. Первый элемент - это текстовое поле, где пользователь вводит ключевое слово. Оно отсылается на сервер, а тот возвращает только те строки из таблицы, которые удовлетворяют условию поиска. Ответ сервера (в виде списка) помещается в поле SELECT, в котором пользователь и сделает окончательный выбор. Таким образом, при отправке всей формы на сервер попадет выбранное в поле SELECT значение в виде ID записи из большой таблицы.

Html-Скрипт для рассмотренного примера выглядит следующим образом (поле Наименование изделия):

<input type="text"

onkeyup="lookup(this.value, 'id_select', 'http://localhost/cgi-bin/xmlhttp.cgi')" />

<select id="id_select" name="id_select">

<option selected="selected" value=""></option>

</select>

На любое событие KeyUp (отжатие кнопки) в текстовом поле вызывается функция lookup ('текст', 'id-selecta', 'url'):

function lookup(text, select_id, url) {

// Получаем объект XMLHTTPRequest

if(!this.http){

this.http = get_http();

this.working = false;

}

// Запрос

if (!this.working && this.http) {

var http = this.http;

// Если в текстовом поле менее трёх

// символов - не делаем ничего

if (text.length <3 ) return;

//добавляем закодированный текст в URL запроса

url = url + "?text="+encodeURIComponent(text);

//создаём запрос

this.http.open("GET", url, true);

//прикрепляем к запросу функцию-обработчик событий

this.http.onreadystatechange = function() {

// данные готовы для обработки

if (http.readyState == 4) {

fill(select_id, http.responseText);

this.working = false;

}else{

// данные в процессе получения,

}

}

this.working = true;

this.http.send(null);

}

if(!this.http){

alert('Ошибка при создании XMLHTTP объекта!')

}

}

В начале получаем XMLHTTP-объект с помощью функции get_http(). Затем поисковый текст кодируется в стиле URL и формируется GET-запрос к серверу. URL запроса в данном случае будет выглядеть приблизительно так: http://localhost/cgi-bin/xmlhttp.cgi?text=...

Скрипт на сервере, получив значение text, делает поиск в таблице и отсылает результат клиенту. В обработчике событий объекта XMLHTTP, когда данные от сервера получены и готовы к использованию, вызывается функция fill('select_id', 'data'), которая заполнит список SELECT полученными данными.

Функция get_http() - это кросс-браузерная реализация получения объекта XMLHTTP (в каждом браузере он получается по-своему).

function get_http(){

var xmlhttp;

/*@cc_on

@if (@_jscript_version >= 5)

try {

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlhttp = new

ActiveXObject("Microsoft.XMLHTTP");

} catch (E) {

xmlhttp = false;

}

}

@else

xmlhttp = false;

@end @*/

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

try {

xmlhttp = new XMLHttpRequest();

} catch (e) {

xmlhttp = false;

}

}

return xmlhttp;

}

Функция fill() получает на вход значение параметра ID списка SELECT, который необходимо заполнить, и сами данные, полученные с сервера.

Для простоты предполагается, что данные с сервера получаются в виде таблицы, поля которой разделены символом табуляции 't', а строки - символом переноса строки 'n':

id1tname1n

id2tname2n На основании содержимого этой таблицы заполняется поле SELECT элементами OPTION.

function fill (select_id, data){

// поле SELECT в переменную в виде объекта

var select = document.getElementById(select_id);

// очищаем SELECT

select.options.length = 0;

// если данных нет - не делаем больше ничего

if(data.length == 0) return;

// в массиве arr - строки полученной таблицы

var arr = data.split('n');

// для каждой строки

for(var i in arr){

// в массиве val - поля полученной таблицы

val = arr[i].split('t');

// добавляем новый объект OPTION к нашему SELECT

select.options[select.options.length]= new Option(val[1], val[0], false, false);

}}

Пример использования технологии AJAX (выбор данных из списка) представлен на рис. 9.9.

Рис. 9.9. Выбор изделия из списка

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

Пример разработки программы c использованием сценариев JavaScript

Задание: необходимо разработать программу, которая рассчитывает: сколько денег нужно вложить (стоимость инвестиций) на определенный срок x, чтобы получить определенную сумму (S) при заданной ставке дисконта на год (t).

Текущая стоимость инвестиций исчисляется по формуле:

где S - стоимость будущих доходов, t - ставка дисконта, x - количество лет.

Текст разработанной программы приведен ниже.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function compute(form) {

if (confirm("Вы уверены?"))

{

form.result.value = (form.S.value)/Math.pow((1+(form.t.value)/100),(form.x.value));

}

else

alert("Please come back again.")

}

</SCRIPT>

</HEAD>

<BODY>

<FORM> Введите стоимость будущих доходов:

<INPUT TYPE="text" NAME="S" SIZE=15 >

<BR>

Введите учетную ставку:

<INPUT TYPE="text" NAME="t" SIZE=15 >

<BR>

Введите количество лет:

<INPUT TYPE="text" NAME="x" SIZE=15 >

<BR>

<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">

<BR>

Результат:

<INPUT TYPE="text" NAME="result" SIZE=15 >

<BR>

</FORM>

</BODY>

В начале данной программы создается JavaScript, где определяется функция compute(), которая принимает значение form. В данной функции есть проверка условия - выводится на экран окно сообщения, в котором необходимо подтвердить выполнение расчетов. Дальше рассчитывается стоимость инвестиций, которая будет записана в элемент формы с именем result.

При рассчете стоимости инвестиций используется свойство pow объекта Math.

Дальше, создается html-форма, на которой размещаются три элемента для ввода показателей: S, t, x; кнопка, при нажатии на которую срабатывает событие ONCLICK и вызывается функция compute(), которая находится в JavaScript; также на форме расположен элемент для вывода результата расчета.

Результат расчета необходимой суммы инвестиций приведен на рис. 9.10.

Рис. 9.10. Расчет необходимой суммы взноса

Таким образом, чтобы получить через год 100 у.е. при ставке дисконтирования 5 %, необходимо вложить 90,7 у.е.