Документ описывает использование Ajax и его преимущества, включая эффектность и эффективность технологий. Также рассматривается история и особенности JavaScript, методы работы с XMLHttpRequest и форматы передачи данных, такие как XML и JSON. Включены темы оптимизации JavaScript, безопасности приложений и инструменты для разработки и отладки.

1. Эффективный AJAX
Александр Шуркаев
alshur@ya.ru
htmlcoder.visions.ru, www.prototypejs.ru
Май 2007

2. Зачем нужен AJAX?
• Эффектность
• Эффективность
• Модность ;-)
2

3. Экскурс в историю JavaScript’а
• Mocha / LiveScript
• Netscape Navigator 2.0
• JScript
• ECMA-262 (ECMAScript)
• JavaScript 1.6, JavaScript 1.7 и т. д.
3

4. Особенности JavaScript’а
• !Java
• Нестрогое приведение типов,
автоматическое приведение
• Автоматическая сборка мусора
• Замыкания и анонимные функции
• Функции – объекты первого уровня
• Концепция прототипов
• Обработка исключений
4

5. XMLHttpRequest (XHR)
• XML, да не только
• Придумал Microsoft, реализован сейчас
во всех ведущих браузерах
• Custom-заголовки
• Синхронно и асинхронно
• POST и GET (принципы REST)
• POST’ить файлы через XHR нельзя
5

6. Форматы передачи данных
XHR
XML JSON (X)HTML Текст
6

7. XML
<result> • DOM / Template
<foo>foobar</foo> • XSLT / XPath
<bar>23</bar>
</result>
7

8. JSON
{ • eval(), но аккуратно
“foo”: foobar,
“bar”: 23
}
8

9. (X)HTML = AHAH
<p>Foo</p> • innerHTML
<p>Bar</p>
9

10. Текст
Ваше сообщение • innerHTML
успешно отправлено!
• alert()
10

11. Оптимизация JS
Graceful degradation Progressive
enhancement
11

12. Утечка памяти
• $(‘foobar’).foo = bar();
• CollectGarbage();
12

13. Безопасность
• XSRF
• XSS
13

14. IDE
• DreamWeaver
• Eclipse
• Aptana
• Visual Studio
• Блокнот и т. п.
14

15. Отладка
• alert()
• window.onerror
• Firebug! Firebug! Firebug!
15

16. Prototype.js
• Библиотека, облегчающая жизнь
• $, $$, $A, $F, $H, $R, Try.these()
• Array, String, Number
• AJAX (Ajax.Request, Ajax.Updater и т. Д.)
• DOM
• Template
• Class.create(), Object.extend(), options,
etc.
16