Презентация на тему "Ajax"

Содержание

• 
  Слайд 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

  Результат