Эффективный AJAX

Александр Шуркаевalshur@ya.ruhtmlcoder.visions.ru, www.prototypejs.ru

Май 2007

2

Зачем нужен AJAX?

• Эффектность• Эффективность• Модность ;-)

3

Экскурс в историю JavaScript’а

• Mocha / LiveScript• Netscape Navigator 2.0• JScript• ECMA-262 (ECMAScript)• JavaScript 1.6, JavaScript 1.7 и т. д.

4

Особенности JavaScript’а

• !Java• Нестрогое приведение типов,

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

5

XMLHttpRequest (XHR)

• XML, да не только• Придумал Microsoft, реализован сейчас

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

6

Форматы передачи данных

XHR

XML JSON (X)HTML Текст

7

XML

<result> <foo>foobar</foo> <bar>23</bar></result>

• DOM / Template• XSLT / XPath

8

JSON

{ “foo”: foobar, “bar”: 23}

• eval(), но аккуратно

9

(X)HTML = AHAH

<p>Foo</p><p>Bar</p>

• innerHTML

10

Текст

Ваше сообщение успешно отправлено!

• innerHTML• alert()

11

Оптимизация JS

Graceful degradation Progressive

enhancement

12

Утечка памяти

• $(‘foobar’).foo = bar();

• CollectGarbage();

13

Безопасность

• XSRF

• XSS

14

IDE

• DreamWeaver

• Eclipse

• Aptana

• Visual Studio

• Блокнот и т. п.

15

Отладка

• alert()

• window.onerror

• Firebug! Firebug! Firebug!

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.