Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

?????????? ?? AJAX ? J2EE by T0BLPTB

VIEWS: 18 PAGES: 20

									Технологията AJAX – основни
         принципи
                      Цветелин Андреев
Българска асоциация на разработчиците на софтуер
        Съдържание

• Какво е AJAX и как работи?
• Технологиите зад AJAX
• Демонстрация
• Поддръжка на AJAX при различните
  браузъри
• Преимущества и недостатъци
Какво е AJAX и как работи?




   AJAX?
        Дефиниция

• Начин за създаване на динамични и
  интерактивни уеб приложения
• Популяризира се чрез проекти като Google
  Mail и Google Maps
• По-широка поддръжка между браузърите
              Модели на комуникация между
              браузър и уеб сървър

• Класически                  vs                          AJAX
 Уеб браузър                           Уеб браузър
  Потрбителски интерфейс                Потрбителски интерфейс

                                        1                      4
    1               2
                                                AJAX Engine

 Уеб сървър                                 2             3
                                       Уеб сървър

1 HTTP заявка                      1    JavaScript извикване

2 HTTP отговор (HTML + CSS)        2    HTTP заявка
                                   3    HTTP отговор (XML)
                                   4    HTML + CSS (чрез DOM)
              Модели на комуникация между
              браузър и уеб сървър

• Класически
Уеб браузър
     1

време
              2        4

Уеб сървър
                   3

1   Потребителска активност
2   HTTP заявка
3   Обработка на заявката
4   HTTP отговор
              Модели на комуникация между
              браузър и уеб сървър

• AJAX
Уеб браузър
     1
              2       4
AJAX Engine
        3
време
                  5        7

Уеб сървър
                      6
1   Потребителска активност    5 HTTP заявка
2   JavaScript извикване       6 Обработка на заявката
3   Обработка при клиента      7 HTTP отговор
4   Динамично визуализиране
         Asynchronous JavaScript and
         XML
• AJAX – Asynchronous JavaScript and XML
  • Asynchronous – заявките са асинхронни
  • JavaScript – имплементацията е на JavaScript
  • XML – често използван формат за предаване на
    данните
         Технологиите зад AJAX

• Технологиите зад AJAX
  • (X)HTML и CSS – за изграждане и стилизиране
    съдържанието на страницата
  • DOM (Document Object Model) – за динамично
    визуализиране в страницата.
  • XMLHttpRequest – за асинхронна комуникация.
  • XML (XSLT) – за обмен и обработка на данните.
            Технологиите зад AJAX

• Document Object Model
   • DOM е платформено независим начин за достъп до
     XML/HTML документ
<html>
   <head>
       <script type="text/javascript">
          function change() {
             var x = document.getElementById("header")
             x.innerHTML = "New"
       }
       </script>
   </head>

   <body>
      <h1 id="header" onclick="change()">Old</h1>
   </body>
</html>
           Технологиите зад AJAX

• XMLHttpRequest
   • API позволяващо клиентски скрипт да прави HTTP
     заявки към сървър.
• Примерна заявка:
var req = new XMLHttpRequest();
req.open('GET', '/test/test.xml');
req.setRequestHeader('X-Test', 'one');
req.send(null);
           Технологиите зад AJAX

• XMLHttpRequest
   • Заявките могат да бъдат само към сървъра,
     предоставил страницата
• Примерна обработка на отговор:
req.onreadystatechange = handleResponse;

function handleResponse () {
   if (req.readyState == 4) {
      // Do something
   }
}
         Технологиите зад AJAX

• HTML и CSS
  • HTML изгражда структурата на страницата или на
    част от нея. CSS стилизира страницата.
• XML
  • Данните се съдържа в полето req.responseXML от
    тип Document (Отговорът трябва да има хедър
    Content-Type : text/xml)
AJAX




Демонстрация
            Поддръжка на AJAX при
            различните браузъри
• AJAX се поддържа от:
  •   Apple Safari 1.2 и нагоре
  •   Konqueror
  •   Microsoft Internet Explorer 4.0 и нагоре
  •   Mozilla Firefox 1.0 и нагоре
  •   Netscape 7 и нагоре
  •   Opera 7.6 и нагоре
           Поддръжка на AJAX при
           различните браузъри
• Разликите в поддръжката
var xmlreq = null;
if (window.XMLHttpRequest) { // Non IE
   xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   try { // new IE
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e1) {
      try { // Old IE
         xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
         // Unable to create XMLHttpRequest
      }
   }
}
         Преимущества и
         недостатъци
• Какво може да ни даде AJAX?
• Интерактивност
  • Валидация на форми в реално време. За всяко
    поле във формата може да се извика заявка до
    сървъра, която прави валидация.
  • Симулация на нотификация от страна на
    сървъра. Чрез изпращане на заявки на заден фон,
    през определен интервал от време.
          Преимущества и
          недостатъци
• Недостатъци
  • Бутоните Refresh и Back
     • неочаквано поведение
  • Проблеми със забавянето на отговора
     • създава усещане, че приложението не работи
  • JavaScript
     • Браузърът трябва да разрешава изпълнението на
       JavaScript
     • Различна имплементацията на JavaScript в различните
       браузъри
           AJAX Frameworks

• DOJO
  •   http://dojotoolkit.org/
  •   Пакетиране
  •   Потребителски и готови Javascript widgets
  •   drag-and-drop, ефекти, анимация
  •   Обработка на събития
  •   Отворен лиценз
• Prototype
  • http://prototype.conio.net/
  • Интеграция с Ruby on Rails
  • Отворен лиценз
Технологията AJAX –
основни принципи




Въпроси?

								
To top