AJAX Asynchronous Javascript and XML. Для чего нужен AJAX Недостаточная функциональность HTTP и HTML Не интерактивен Нет частичных обновлений Альтернативы. - презентация

1 AJAX Asynchronous Javascript and XML

2 Для чего нужен 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

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

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

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

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

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

8 Особенности функций 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 и др.

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

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

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

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

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

14 JavaScript код show-message.js

15 HTML код show-message.html

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

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

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

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

20 HTML- код

21 Результат