Презентация "Ajax" – проект, доклад

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-код

Результат