AJAX Asynchronous Javascript and XML

Для чего нужен AJAX Недостаточная функциональность HTTP и HTML Не интерактивен Нет частичных обновлений Альтернативы Java Applets Нет универсальной поддержки Нет взаимодействия с HTML c тек технологий Flash в виде ActionScript 3, Adobe Flex и Flash Remoting составляет технологическую основу RIA (Rich Internet Applications) активно продвигаемых Macromedia ( теперь часть Adobe) Новые и еще не имеющие широкой поддержки Microsoft Silverlite JavaFX Adobe AIR

Традиционные веб - приложения и AJAX

Основной процесс AJAX JavaScript Определение объекта для генерации HTTP- запросов Инициирование запроса Получить объекта запроса Определить анонимный обработчик ответа И использовать его в качестве атрибута onreadystatechange запроса Инициировать GET или POST запрос Отправить данные Обработка ответа Обработать readyState = 4 и HTTP status = 200 Извлечь и обработать текст ответа с помощью responseText или responseXML Что - то сделать с результатом HTML Загрузить JavaScript Определить элемент управления для инициирования зароса Определить ID для элементов ввода и вывода ответа

Определение объекта запроса

Инициирование запроса

Обработка ответа

Особенности функций JavaScript На JavaScript можно передавать функции как аргументы function doSomethingWithResponse() { code } request.onreadystatechange = doSomethingWithResponse; Возножны анонимные функции var request = getRequestObject(); request.onreadystatechange = function() { code-that-uses-request-variable }; В Java есть анонимные классы, но нет анонимных функций В С и С ++ нет анонимных функций Анонимные функции ( т. н. closures) широко используются в технологиях Lisp, Ruby, Scheme, C#, Python, Visual Basic, ML, PHP (as of 5.3), Clojure, Go и др.

Функции в качестве аргументов

Анонимные функции

Некорректный подход ( с использованием глобальной переменной Request)

Сценарий 2 кнопки, 2 обработчика : function1 и function2 function1 получает данные с сервера в среднем 5 с function2 – 1 с Пользователь нажимает кнопку 1 затем – кнопку 2 с интервалом около секунды Проблема function1 при обращении к request.responseText получит текст ответа для function2 Решение Использование анонимной функции с локальной копией объекта запроса

Правильный подход

JavaScript код show-message.js

HTML код show-message.html

message-data.html Some random message Результат :

Взаимодействие сервлетом и динамическое изменение страницы

Инициирование запроса

Обработка ответа

HTML- код

Результат