1 / 21

AJAX

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

nevan
Télécharger la présentation

AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Некорректный подход (с использованием глобальной переменной Request) • Сценарий • 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. Результат

More Related