задание первая тема (Web 2.0 и Ajax)

ГЛОБАЛЬНАЯ КОМПЬЮТЕРНАЯ СЕТЬ – ИНТЕРНЕТ ............................................................................... 2
WEB 2.0........................................................................................................................................................................ 5
ОБЗОР ТЕХНОЛОГИЙ ........................................................................................................................................... 6
RSS ...................................................................................................................................................................... 7
JSON .................................................................................................................................................................... 8
SVG ..................................................................................................................................................................... 8
XPath ................................................................................................................................................................... 9
Canvas.................................................................................................................................................................. 9
Компоненты WEB2.0.............................................................................................................................................. 9
1.Веб-службы ..................................................................................................................................................... 9
2. Веб-синдикация ............................................................................................................................................ 10
3. Теги ............................................................................................................................................................... 11
4. Mash-up — сервисы ..................................................................................................................................... 11
Примеры веб 2.0: .............................................................................................................................................. 11
Недостатки Веб 2.0 ............................................................................................................................................... 12
Будущее web2.0..................................................................................................................................................... 12
Технология AJAX для создания современных веб-сайтов ............................................................................... 13
Запрос к серверу из сценария ......................................................................................................................... 15
Вспомним DOM ............................................................................................................................................... 16
Что же нового? ................................................................................................................................................. 17
Что получает пользователь ............................................................................................................................. 18
Сервер остается сервером ............................................................................................................................... 19
Недостатки Аякса ............................................................................................................................................ 20
Синхронная и асинхронная модель в AJAX .................................................................................................. 22
Особенности асинхронной модели ................................................................................................................. 23
Dom-model ................................................................................................................................................................. 24
Основные понятия ................................................................................................................................................ 27
Зачем нужна модель DOM ................................................................................................................................... 30
Модель DOM в окружающем мире ..................................................................................................................... 31
Клиент и сервер .................................................................................................................................................... 32
Использование модели DOM на сервере ............................................................................................................ 32
Использование модели DOM у клиента ............................................................................................................. 33
JavaScript .................................................................................................................................................................. 33
Обзор языка ........................................................................................................................................................... 35
Общие сведения об объектах ............................................................................................................................... 36
Базовые определения ............................................................................................................................................ 37
Размещение кода JavaScript на HTML-странице ............................................................................................... 39
Объекты, методы и свойства ............................................................................................................................... 40
Объекты ............................................................................................................................................................ 40
Методы.............................................................................................................................................................. 41
Свойства ........................................................................................................................................................... 41
XMLHTTP ................................................................................................................................................................. 41
История .................................................................................................................................................................. 42
Методы класса XMLHttpRequest ......................................................................................................................... 42
Свойства класса XMLHttpRequest ....................................................................................................................... 44
Ошибки, вызываемые классом XMLHttpRequest .............................................................................................. 45
Пример использования ......................................................................................................................................... 45
1
ГЛОБАЛЬНАЯ КОМПЬЮТЕРНАЯ СЕТЬ – ИНТЕРНЕТ
Интернет – это глобальная компьютерная сеть, объединяющая многие
локальные, региональные и корпоративные сети и включающая сотни миллионов
компьютеров.
Основу, «каркас» Интернета составляют более 700 миллионов серверов,
постоянно подключенных к сети.
К серверам Интернета могут подключаться сотни миллионов пользователей с
помощью локальных сетей, коммутируемых или выделенных телефонных линий.
Интернет считается последним и крупнейшим техническим достижением
двадцатого века. Благодаря ему оказалось возможным соединить сотни
миллионно компьютеров, разбросанных по всему свету.
Интернет обеспечил плавный переход от века массового производства, века
ядерного и космического к веку информационному. Последствия этого перехода
сегодня ощущают на себе все отрасли промышленности, культуры и науки.
Саморазвитие Интернета происходит путем его расширения за счет включения
се новых и новых компонентов. Этот процесс напоминает ветвление живого
растительного организма, только в его основе лежат не естественные процессы
обмена веществ, а экономические процессы обмена ресурсами.
Интернет
выполняет
де
основные
функции:
информационную
функция
позволяет
потребителям
и
коммуникационную.
Информационная
быстро
получать
затребованную информацию. Это могут быть научные знания, книги, статьи,
сообщения, рисунки, видеоматериалы и многое другое.
Информационная функция Интернета способствует бурному проникновению в
коммерцию. Немалая экономия на непродуктивных издержках позволяет снижать
цену на товары, увеличивать объемы продаж и, тем самым, увеличивать прибыль,
часть от которой поступает в распоряжение Интернета. Это введет к еще более
быстрому развитию служб Сети.
2
Коммуникационная функция Интернета позволяет людям общаться. Она
развивается за счет создания в Интернете служб, аналогичных традиционным
средствам общения, но превосходя их по возможностям.
Так, например, электронная почта объединяет возможности обычной почты и
приближает их к возможностям прямого телефонного общения за счет скорости
обмена сообщениями.
В
Интернете
существует
Интернет-телефония,
позволяющая
людям
разговаривать, как по обычному телефону, но не нести при этом значительных
расходов на междугороднюю и международную связь.
Разумеется, информационная и коммуникационная функции Интернета во
многом пересекаются. Так, многие профессионалы используют возможности
коммуникации для оперативного решения технических вопросов, получения
справочной информации, обсуждения специальных проблем.
Технология WWW позволяет создавать ссылки, которые реализуют переходы
не только внутри исходного документа, но и на любой другой документ,
находящийся на данном компьютере и на любой документ любого компьютера,
подключенного к Интернету.
В 1989 году Тим Бернерс-Ли предложил свой проект гипертекстовой системы
(см. рис.), согласно которой нажатие на ссылку вызывает переход на требуемый
документ или фрагмент документа.
В качестве указателей ссылок, то есть объектов, активизация которых
вызывает переход на другой документ, могут использоваться на только
фрагменты текста, но и графические изображения.
Серверы Интернета, реализующие WWW-технологию, называются Webсерверами, а документы, реализованные по технологии WWW, называются Webстраницами.
Создание
Web-страниц
осуществляется
с
помощью
языка
разметки
гипертекста (Hyper Text Markup Language - HTML). Основа используемой в
HTML технологии состоит в том, что в обычный текстовый документ
3
вставляются управляющие символы (тэги). В результате текстовый документ в
браузере выглядит как Web-страница.
Базовым кирпичиком для WWW является компьютер с установленным на нём
ВЕБ-сервером подключённый к сети, то есть к другим компьютерам. ВЕБ-сервер
– программа, запускаемая на подключённом к сети компьютере, и использующей
протокол HTTP для передачи данных.
В простейшем виде такая программа получает по сети HTTP-запрос на
определённый ресурс, находит соответствующий файл на локальном жёстком
диске и отправляет его по сети запросившему компьютеру. Более сложные вебсерверы способны динамически формировать ресурсы в ответ на HTTP-запрос.
Для
идентификации
ресурсов
во
Всемирной
паутине
используются
единообразные идентификаторы ресурсов URI ( Uniform Resource Identifier). Для
определения местонахождения ресурсов в сети используются единообразные
локаторы ресурсов URL (Uniform Resource Locator).
Такие URL-локаторы сочетают в себе технологию идентификации URL и
систему доменных имён DNS (Domain Name System) — доменное имя (или
непосредственно IP-адрес в числовой записи) входит в состав URL для
обозначения компьютера (точнее — одного из его сетевых интерфейсов),
который исполняет код нужного веб-сервера.
Для просмотра информации, полученной от веб-сервера, на клиентском
компьютере применяется специальная программа — веб-браузер.
Основная функция веб-браузера — отображение гипертекста. Гипертекст – это
текст, размеченный языком гипертекстовой разметки HTML, после HTMLразметки получившийся гипертекст помещается в файл, такой HTML-файл
является самым распространённым ресурсом Всемирной паутины.
После того, как HTML-файл становится доступен веб-серверу, его начинают
называть «веб-страницей». Набор веб-страниц образует веб-сайт. В гипертекст
веб-страниц добавляются гиперссылки.
Гиперссылки, основанные на технологии URL, помогают пользователям
Всемирной паутины легко перемещаться между ресурсами (файлами) вне
4
зависимости от того, находятся ресурсы на локальном компьютере или на
удалённом сервере.
WEB 2.0
Казалось бы, не так давно Интернет родился, охватил планету, превратился в
Web и уже сумел стать "обыденностью" для сотен миллионов людей. Однако
сегодняшняя
работа
в
Интернете
настоятельно
требует
расширения
интерактивности и открытости, и это ведет к изменению способов использования
сети сетей. И вот уже "нынешний" Интернет и "прежний" имеют различия.
"Новый" Интернет уже получил название Web 2.0, за которым скрывается
философия переосмысления Интерне та и находящаяся в непрерывном развитии
система концепций, касающихся его архитектуры, стандартов и приложений. В
Web 2.0 изменяются и правила функционирования онлайновых моделей, моделей
в сфере бизнеса и много чего еще. Появление же термина Web 2.0 принято
связывать со статьей Тима O’Рейли "What Is Web 2.0", впервые опубликованной
на русском языке в журнале "Компьютерра" в октябре 2005 г. В ней изобретатель
нового термина Тим О’Рейли привязал появление большого числа web-сайтов,
объединенных некоторыми общими принципами, с общей тенденцией развития
интернет-сообщества и назвал это явление Web 2.0, в противовес "старому" Web
1.0.Следует добавить, что новая концепция родилась на совместном мозговом
штурме издательства O’Reilly Media и компании MediaLive International, после
чего в Сети появилась "Конференция Web 2.0", и интернет-сообщество
разделилось на приверженцев и критиков нового термина. Критики, к примеру,
утверждают, что Web 2.0 является лишь новым рекламным ходом и
маркетинговым понятием, пришедшим на смену понятию "семантический
Интернет" и обещающим то же самое, о чем уже объявлялось ранее при запуске
первоначального проекта Web 1.0. В общем, одни приняли новую концепцию,
другие полагают, что это бессмысленный маркетинговый термин. Однако,
несмотря на ведущиеся споры, специалисты обычно выделяют несколько
основных аспектов нового явления.
5
Что же такое Web 2.0? Web 2.0 - это популярное определение новой концепции
Интернета, которая только начинает формировать новые принципы вашей работы
и взаимодействия с информацией в сети.
Web 2.0 - это не какое-то определенное программное обеспечение или
зарегистрированная торговая марка от Microsoft или Google, а "горячее словечко",
описывающее набор подходов к использованию сети новыми и очень
новаторскими способами.
Понятие "Web 2.0" относится к технологиям, позволяющим данным стать
независимыми от того, кто их произвел, или от сайта, на котором они впервые
появились. Оно относится к тому, каким путем можно подразделить информацию
на единицы или "кирпичики", свободно перетекающие с сайта на сайт - часто
даже так, как не предвидел (и изначально не подразумевал) их производитель.
Концепция Web 2.0 позволяет сетевым пользователям одновременно получать
информацию из большого количества разных сайтов и доставлять ее на свой
собственный сайт для того, чтобы найти ей новое применение. Однако это вовсе
не означает кражу чужой работы или пиратское распространение информации
для своих собственных целей. Наоборот, Web 2.0 - это результат концепции
открытого кода, совместного пользования идеями, на которых был построен
Интернет. Эта концепция делает данные более связанными друг с другом. Это
позволяет строить новые информационные и деловые возможности на основе уже
существующей информации и данных.
Web 2.0 позволяет данным работать в качестве самостоятельной субстанции,
которую каждый может изменять или перемешивать с любой целью. Когда
данные становятся самостоятельным организмом, сеть перестает быть просто
набором сайтов и становится настоящей паутиной (web) сайтов, которые могут
взаимодействовать друг с другом и коллективно обрабатывать информацию. Web
2.0 построен на таких технологиях, как, например, AJAX, JSON, SVG, RSS,
XPath, Canvas. Рассмотрим эти технологии более подробно в следующей главе.
ОБЗОР ТЕХНОЛОГИЙ
6
Web 2.0 базируется на нескольких старых, но по новому осмысленных
технологиях:
 AJAX
 JSON
 SVG
 RSS
 XPath
 Canvas
RSS
RSS — семейство XML-форматов, предназначенных для описания лент
новостей, анонсов статей, изменений в блогах и т. п. Информация из различных
источников, представленная в формате RSS, может быть собрана, обработана и
представлена
пользователю
в
удобном
для
него
виде
специальными
программами-агрегаторами.
Обычно с помощью RSS 2.0 даётся краткое описание новой информации,
появившейся на сайте, и ссылка на её полную версию. Интернет-ресурс в формате
RSS называется RSS-каналом, RSS-лентой или RSS-фидом.
Многие современные браузеры, почтовые клиенты и Интернет-пейджеры
умеют работать с RSS-лентами, среди них Safari, Maxthon, Miranda, Mozilla
Firefox, Mozilla Thunderbird, Opera, Opera mini, Microsoft Internet Explorer
(начиная
с
7-й
версии).
Кроме
того,
существуют
специализированные
приложения (RSS-агрегаторы), собирающие и обрабатывающие информацию
RSS-каналов. Также очень популярны веб-агрегаторы, представляющие собой
сайты по сбору и отображению RSS-каналов, такие как Яндекс.Лента, Google
Reader, Новотека и Bloglines.
Из-за существования нескольких различных версий формата RSS-каналов
программы-агрегаторы должны уметь работать со всеми вариантами, что создаёт
некоторые трудности их разработчикам.
7
Проблемы совместимости возникают также при вставке в RSS-описания
небольших HTML-фрагментов, которые в одних случаях оформляются как
CDATA узлы, а в других — как HTML-кодированные PCDATA узлы.
Существуют проблемы с различными форматами представления дат и
метаданных, таких как частота обновления.
JSON
JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными,
основанный на JavaScript и обычно используемый именно с этим языком. Как и
многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript (точнее, от подмножества языка
стандарта ECMA-262 1999 года), формат считается языконезависимым и может
использоваться практически с любым языком программирования. Для многих
языков существует готовый код для создания и обработки данных в формате
JSON.
Практическая польза использования JSON открывается при использовании
технологии AJAX. Формат JSON является более кратким и удобочитаемым по
сравнению с XML, является «родным» для Javascript. Кроме того, в JSON-код
возможна вставка вполне работоспособных функций.
SVG
SVG— язык разметки масштабируемой векторной графики, созданный
Консорциумом Всемирной паутины (W3C) и входящий в подмножество
расширяемого языка разметки XML, предназначен для описания двухмерной
векторной и смешанной векторно/растровой графики в формате
XML.
Поддерживает как неподвижную, так анимированную и интерактивную графику
— или, в иных терминах, декларативную и скриптовую. Это открытый стандарт,
является рекомендацией консорциума W3C, — организации, разработавшей такие
стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и
PGML.
8
XPath
XPath (XML Path Language) - язык запросов к элементам XML-документа.
Он был разработан для организации доступа к частям документа XML в
файлах трансформации XSLT, и является стандартом консорциума W3C.
Canvas
Canvas — это элемент HTML5, который предназначен для создания bitmap
изображения при помощи JavaScript.
На сегодняшний день canvas чаще используется для построения графиков,
простой анимации и игр в веб-браузерах. Группа WHATWG предлагает
использовать canvas как стандарт для создания графики в новых поколениях вебприложений
Ці технології дозволили винести веб на якісно новий рівень,однак потрібно
усвідомлювати, що самі по собі дані технології не є революційними, революцію
Web 2.0 зробили методики використання даних технологій.
Компоненты WEB2.0
1.Веб-службы
Веб-службы — это программы, доступ к которым осуществляется через Веб (то
есть протокол HTTP), а обмен данными происходит в формате XML или JSON
или REST. В результате программное обеспечение может использовать вебслужбы
вместо
того
чтобы
самостоятельно
реализовывать
требуемый
функционал (например, проверить введенный в форме почтовый адрес). В
отличие от обычных динамических библиотек, такой подход обладает рядом
плюсов:
 Веб-служба находится на серверах компании, которая её создала. Поэтому в
любой момент пользователю доступна самая свежая версия данных и ему
не приходится заботиться об обновлениях и вычислительных мощностях,
требуемых для выполнения операции.
9
 Инструменты для работы с HTTP и XML есть в любом современном языке
программирования,
поэтому
веб-службы
переходят
в
разряд
платформонезависимых.
Веб-службы используются для решения определенных трудоемких задач. В
качестве примера можно привести, например Гугл-карты (Google Maps API),
которые можно легко встраивать на сайт.
Рис.1 Карта Google
2. Веб-синдикация
Одновременное распространение информации в том числе аудио- и видео- на
различные страницы или web-сайты, как правило, с использованием технологий
RSS. Принцип заключается в распространении заголовков материалов и ссылки
на них (например, последние сообщения форумов, и т. п.). Первоначально эта
технология использовалась на новостных ресурсах и в блогах, но постепенно
сфера применения расширилась.
10
Это массовое, автоматическое дублирование материала, опубликованного в
одном месте на различных сайтах. Эта технология вышла из новостных сервисов
и «Живого Журнала» и быстро вошла в нашу жизнь, как удобная концепция
распространения материала в едином формате RSS.
3. Теги
Ключевые слова, описывающие рассматриваемый объект, либо относящие его к
какой-либо категории. Это своего рода метки, которые присваиваются объекту,
чтобы определить его место среди других объектов. С понятием меток тесно
связано понятие фолксономии — термина, о котором широко заговорили именно
в связи с ростом сервисов Веб 2.0, таких как Flickr, del.icio.us, и, в дальнейшем,
Wink.
Появление и быстрое распространение блогов тоже вписывается в концепцию
Веб 2.0, создавая так называемую «редактируемую Паутину» (writable web).
Возможность пометить документ ключевыми словами существует и в языке
HTML (англ. keywords), однако этот способ был полностью скомпрометирован
широким его использованием в целях поискового спама.
4. Mash-up — сервисы
Веб mash-up (дословный перевод — «смешение») — сервис, который полностью
или частично использует в качестве источников информации другие сервисы,
предоставляя пользователю новую функциональность для работы. В результате
такой сервис может становиться также новым источником информации для
других веб mash-up сервисов. Таким образом образуется сеть зависимых друг от
друга сервисов, интегрированных друг с другом.
Например, сайт по поиску недвижимости с интегрированными картами Google
Maps в итоге представляет собой новый, более удобный сервис, с помощью
которого каждый пользователь может сразу увидеть все предлагаемые для
продажи дома на карте
Примеры веб 2.0:
1. Википедия – свободная энциклопедия
11
2. Google Earth - Google-карты
3. Flickr - онлайн-фотоальбом
4. delicious - Служба закладок
5. Netvibes - Персональний рабочий стол
6. Digg.com – Ресурс новостей
7. UcoZ - Веб хостинг
Недостатки Веб 2.0
Использование сервисов сторонних компаний наряду с достоинствами
приносит и определённые проблемы. Среди них:
 зависимость от наличия постоянного соединения (исчезает связь —
информация становится недоступной или неудобной в использовании);
 зависимость сайтов от решений сторонних компаний, зависимость
качества работы сервиса от качества работы многих других компаний;
 слабая приспособленность нынешней инфраструктуры к выполнению
сложных вычислительных задач в браузере;
 уязвимость
конфиденциальных
данных, хранимых
на сторонних
серверах, для злоумышленников (известны случаи хищения личных
данных пользователей, массовых взломов учётных записей блогов).
Фактически сайт эпохи Веб 2.0 на первый взгляд интерактивен и дружелюбен,
позволяет себя легко настраивать. Однако сбор статистики о пользователях, их
предпочтениях и интересах, личной жизни, карьере, круге друзей могут помочь
владельцу сайта манипулировать сообществом. По самым пессимистичным
прогнозам многочисленные сайты Веб 2.0 вкупе с другими современными
технологиями дают прообраз тоталитарной системы «Большого брата».
Будущее web2.0
12
Google предоставляет все больше и больше бесплатных веб-служб, что
значительно упрощает разработчикам их работу, позволяя значительно снижать
бюджеты на сложных порталах. Например, еще 4 года назад социальная сеть
«Мир тесен» просто не смогла бы быть создана, т.к. она построена на связке
социальности и картографии (тогда просто не было адекватных технологий), а
сейчас разработчикам даже не пришлось реализовывать картографический сервис
— они взяли уже готовый удобный инструментарий у Google.
Теги, так распространенные для связи текстового контента, уже скоро начнут
находить свое применения в видео. Сейчас, если взять тот же youtube, видео
связывается на уровне самих роликов. Следующим шагом в развитии тегирования
будет расстановка тегов на конкретные объекты внутри видео, например, на
конкретного человека или его часы (см. технологию «гипервидео»), что позволит
связывать и находить, например одинаковые объекты в различных роликах.
Как видите, использование технологии web2.0 довольно широко и не
привязано только к социальным сетям или ajax-интерфейсам. Динамичное
развитие этой концепции, а так же ее грамотное использование позволяет очень
быстро создавать успешные проекты. Главное — быть оригинальным и делать
полезные, востребованные инструменты для аудитории.
Технология AJAX для создания современных веб-сайтов
В покере есть такая начальная комбинация карт - туз и валет. Ее называют
«AJAX». Если она выпадает при раздаче, то шансы на выигрыш очень велики.
Существует одноименная компьютерная технология, которая обещает стать
козырной картой в колоде любого сайта.
На заре развития Web сама возможность доступа к связанным гиперссылками
документам казалась чудом, поэтому пользователи готовы были терпеливо
ожидать загрузки очередной страницы хоть вечность. К тому же такое неудобство
считалось временным. Уже скоро, надеялись если не все, то, по крайней мере,
13
многие, появятся скоростные каналы и время отклика удаленной машины станет
практически таким же, как и локальной.
Однако шли годы, возможность обращения к серверу на другом континенте
становилась привычной, а надежды на ускорение отклика таковыми и оставались.
Пропускная способность линий связи действительно росла, но еще быстрее
увеличивался средний размер документа. Если раньше Web-страница содержала
только текст и максимум одну-две картинки, то сейчас среднее количество
изображений исчисляется десятками. В угоду внешнему виду прибегают даже к
графическому представлению заголовков – мера, которая еще десять лет назад
была немыслимой. Внедренные в страницу видео- и аудиофрагменты также не
способствуют
ее
быстрой
загрузке.
В
результате
пользователю,
активизировавшему ссылку, все так же приходится ожидать, когда на экране
браузера появится новая страница, и придумывать себе на это время занятие.
Но даже если на некоторых сайтах принципиально не используются
изображения и мультимедийные данные, это вовсе не означает, что они всегда
будут загружаться с максимальной скоростью. Причина – в неравномерной
нагрузке на различные участки Всемирной Сети. Из-за этого страница,
пересылаемая за доли секунды, может долго ожидать своей очереди на
маршрутизаторе, поскольку тот в данный момент испытывает пиковую нагрузку.
Одним словом, задержки, связанные с передачей информации по Сети, с
годами не исчезли и в дальнейшем ситуация вряд ли принципиально улучшится.
Чтобы найти выход или хотя бы определить, где его искать, надо прежде всего
понять суть проблемы. Как ни странно, она состоит не в том, что активизация
ссылки не приводит к немедленному получению результата. Гораздо хуже, что в
течение времени, необходимого для загрузки, старая страница уже недоступна, а
новая еще не получена, поэтому пользователю приходится прерывать работу и
ждать. Как показали исследования, подобный режим существенно снижает
производительность труда. Кроме того, часто бывает, что новый сайт отличается
от старого лишь в мелочах. На месте остаются элементы навигации, колонтитулы,
а заменяется лишь небольшой фрагмент текста или одно-два изображения.
14
Возникает резонный вопрос: почему бы не копировать по Сети лишь ту часть
документа, которую действительно нужно обновить, и нельзя ли на время
загрузки дополнительной информации предоставить пользователю возможность
продолжать работу с текущей страницей? Ответ на него дает новая концепция
Ajax, объединяющая несколько давно известных технологий.
Запрос к серверу из сценария
До недавнего времени вся работа в Web строилась по принципу полной
замены текущего документа. При активизации гипертекстовой ссылки или формы
браузер передавал запрос серверу, который возвращал ответ в виде HTMLдокумента. Ситуация изменилась с появлением объекта XMLHttpRequest,
доступного из JavaScript-сценариев.
Объект XMLHttpRequest берет на себя одну из функций браузера, а именно
формирование и передачу запроса Web-серверу, и воспользоваться ею довольно
просто. Сначала следует открыть запрос (метод open()), указав характеристики
заголовка, а затем передать его (send()). Принципиальный вопрос – нужно ли
теперь ждать ответа? Если бы дело обстояло так, то объект XMLHttpRequest был
бы совершенно бесполезен. Согласитесь, пользователю ведь все равно, кто
«отключит» интерактивные возможности документа – браузер или JavaScriptсценарий. К счастью, в методе open() предусмотрен специальный параметр – флаг
асинхронного выполнения. Если его значение равно true, метод send()
практически сразу же вернет управление сценарию, и в то время, пока запрос
будет «путешествовать» по направлению к серверу, а затем ответ проходить тот
же путь в обратном направлении, пользователь сможет продолжить работу с
документом. Конечно, новая информация, которая должна поступить в ответе,
будет некоторое время недоступна, но тут уж ничего не поделаешь – пауза
неизбежна.
Зато
текущая
страница
останется
в
полном
распоряжении
пользователя.
15
Что же произойдет при получении ответа? Очевидно, управление должно
перейти к функции обратного вызова (подобный подход не нов и вряд ли его
стоит здесь обсуждать), задать которую позволяет свойство onready statechange
того же объекта XMLHttpRequest. С помощью свойства readyState мы проверяем
состояние процесса обработки запроса (значение 4 свидетельствует о его
окончании) и при необходимости извлекаем данные из свойств responseText или
responseXML.
Вспомним DOM
Итак, принципиально задача решена: нам удалось загрузить новые данные, не
прерывая работу пользователя с текущей страницей. Однако для практического
применения этого мало. Полученные данные нужно как-то включить в состав
документа, уже отображающегося на экране. К счастью, это возможно, –
подходящий механизм давно отработан и широко известен: надо воспользоваться
структурой DOM. При этом от свойства responseText лучше отказаться, так как
его применение потребует дополнительного синтаксического разбора. Гораздо
полезнее responseXML, в котором информация изначально представляется в
совместимом с DOM виде. Таким образом, в структуре текущего документа
необходимо выбрать узел, в состав которого следует включить возвращенные
данные, и вызвать метод replaceChild(), заменив старое и ненужное поддерево
новым, прочитанным из responseXML объекта XMLHttpRequest.
Остались сущие мелочи – задать внешний вид полученных данных
посредством каскадных таблиц стилей. Эту задачу многократно решал каждый,
кто имеет хотя бы небольшой опыт создания Web-узлов.
Выполнив упомянутые выше действия, мы получим не что иное, как Ajaxприложение. Несмотря на предельную простоту оно, тем не менее, отражает все
особенности, характерные для инфраструктуры Ajax. Во-первых, и это самое
главное, запрос передается серверу в асинхронном режиме (отсюда первая буква
в имени Ajax: «a» – asynchronous). Во-вторых, инициатором запроса выступает
JavaScript-сценарий («ja» – JavaScript). Теперь совсем не обязательно размещать
16
на странице гипертекстовые ссылки. Запрос может быть сформирован в ответ на
попадание курсора мыши в некоторую область или по истечении заданного
времени (в общем, его можно «привязать» к любому событию). И, в-третьих,
серверу совсем не обязательно передавать в ответ на запрос целый документ.
Достаточно, если браузер получит лишь фрагмент, в котором пользователь в
данный момент нуждается. Посредством DOM мы включаем его в состав текущей
страницы и формируем внешний вид с помощью правил CSS. Ну а чтобы не
нарушалась
структура,
например,
чтобы
не
встречались
открывающие
дескрипторы без закрывающих (как известно, существующие браузеры очень
лояльны к подобным ошибкам), целесообразно вообще отказаться от HTML –
гораздо большего доверия заслуживает формат XML (отсюда и последняя буква:
«x» – XML). К сожалению, не хватило для обозначения структуры DOM и
каскадных таблиц стилей, но очевидно, что без них не обойтись. Ведь
полученные данные надо как-то включить в состав документа, и удобнее всего
сделать это именно средствами DOM. Кроме того, в отличие от HTML для
элементов XML не предусмотрены правила отображения по умолчанию, и
придать им требуемый внешний вид можно только посредством стилей (CSS или
же XSL).
Что же нового?
Традиционно новый подход к созданию приложений и инструмент,
позволяющий
реализовать
его
на
практике,
появляются
практически
одновременно и идут рука об руку. Какой же инструмент претворяет идею Ajax в
жизнь? Объект XMLHttpRequest был разработан задолго до Ajax. Язык JavaScript
не намного моложе HTML. XML и CSS также широко известны.
Как ни странно, ни одну базовую технологию для Ajax создавать не пришлось,
но именно эта особенность и является одним из главных преимуществ данной
концепции. Платформу для выполнения Ajax-приложений можно собрать из
готовых компонентов, необходимо лишь, чтобы браузер, применяемый для
17
просмотра документов, поддерживал объект XMLHttpRequest. Но это уже забота
пользователя – если речь идет не о корпоративной, а о Всемирной Сети,
разработчики Web-приложений никак не могут влиять на выбор клиентских
программ.
Что получает пользователь
Инициировав загрузку очередного фрагмента, пользователь может продолжать
работу, ни на минуту не отвлекаясь. Все действия по передаче данных происходят
«за сценой», незаметно для него. И лишь после получения ответа сервера он
увидит, что одна из частей страницы обновилась. Вероятно, он будет как-то
оповещен об этом – аудио или визуальным способом, но это уже задача Webдизайнера, который волен распорядиться очередным инструментом наилучшим
образом.
Однако
предоставляя
пользователю
новые
возможности,
клиентская
программа не может не измениться сама. Если раньше в «классических» Webприложениях вся обработка осуществлялась на стороне сервера, то в Ajax такой
подход неприемлем. Если каждое решение будет приниматься на сервере, то
практически безразлично, в каком режиме передаются запросы: асинхронном или
синхронном, в любом случае до получения ответа придется приостановить
работу. Выход заключается в повышении «уровня интеллекта» клиентской
программы, которая должна обеспечивать интерактивное взаимодействие с
пользователем, лишь изредка обращаясь к серверу. А это неминуемо приведет к
увеличению объема клиентского кода – JavaScript-сценарии в составе документа
становятся все сложнее, и для их создания приходится затрачивать больше
времени и усилий.
Существует еще одна особенность Ajax-приложений. Поскольку с сервера
загружаются не целые документы, а их фрагменты, динамически отображаемые
посредством DOM, время работы пользователя с одной страницей многократно
возрастает. Это хорошо видно даже на примере простого приложения, основные
18
этапы создания которого были рассмотрены выше. И если при классическом
Web-взаимодействии незначительные ошибки бывают некритичны (все равно
через несколько минут пользователь запросит новую страницу), то в Ajaxприложении требования к качеству документов существенно повышаются. Как
всегда, чтобы обеспечить пользователям комфортные условия, программистам
приходится
работать
интенсивнее
и
брать
на
себя
дополнительную
ответственность.
Сервер остается сервером
С точки зрения требований к серверной части Ajax-программы мало
отличаются от классических Web-приложений. Код на стороне сервера должен
обрабатывать
клиентские
запросы,
при
необходимости
обеспечивать
взаимодействие с базой данных, формировать ответ, – одним словом, выполнять
совершенно привычные действия. Тот факт, что вместо документов клиенту
передаются лишь их отдельные фрагменты, вряд ли окажет существенное
влияние на общую архитектуру. Учитывая, что Ajax-клиент берет на себя
дополнительные обязанности, можно было бы ожидать некоторого упрощения
серверного кода, но это вряд ли произойдет. Как говорится, природа не терпит
пустоты, и как только появляется новая возможность, тут же возникает и
потребность в дополнительных функциях.
Несмотря на относительную новизну Ajax как концепции, примеры успешных
проектов уже доступны в Глобальной Сети. Например, в службе GMail
реализовано автоматическое обновление информации о поступивших письмах
независимо от действий, которые в этот момент выполняет пользователь. На
основе Ajax созданы также Google Suggest и Google Maps. Нетрудно заметить, что
именно Google на сегодняшний день является бесспорным лидером по
применению Ajax и главным апологетом этой концепции, однако и другие
компании стараются идти в ногу со временем. В частности, примеру Google уже в
ближайшем будущем собираются последовать mail.ru и еще ряд онлайновых
служб.
19
Так что же ожидает Ajax? Разделит ли данная концепция участь многих
модных новинок, попадающих в поле зрения программистов лишь для того,
чтобы вскоре оказаться навсегда забытыми? Ответ, видимо, должен быть
отрицательным.
И
пользователи,
и
разработчики
осознают
недостатки
классических Web-приложений и будут приветствовать любое решение,
способное их устранить. Если же Ajax и уступит место, то только той технологии,
которая позволит достичь еще большей эффективности. А пока многие ведущие
специалисты, коллективы и известные компании взяли курс на Ajax и в
обозримом будущем свернуть с него вряд ли захотят.
Недостатки Аякса
Любая технология всегда имеет не только плюсы, но и минусы. Ниже
перечисленно наиболее существенные недостатки AJAX и возможные методы их
устранения.
 Поисковая оптимизация
Главной проблемой страниц на Аяксе является их «невкусность» для
поисковиков, поэтому такие страницы очень плохо ими «съедаются», ведь
поисковик не умеет переходить по ссылкам JavaScript. Огромное количество
пользователей могут пройти мимо твоего сайта, даже если на нем есть требуемый
контент. Следовательно, его нужно сделать доступным другим способом, хотя бы
самым банальным – смастерить страничку «Карта сайта» с полным списком
страниц.
 Кроссбраузерность
У пользователей есть плохое качество - они пользуются разными браузерами.
Казалось бы, нет проблем – пиши код на HTML, CSS и JavaScript, который
соответствует стандартам, и все. Но не тут-то было - разные браузеры
поддерживают стандарты неодинаково. Что ж, ставим себе несколько самых
популярных браузеров (причем необходимо поставить еще и их разнообразные
версии) и тестируем наши веб-странички.
20
 Кнопка «Назад»
По данным исследователей, кнопка браузера «Назад» является вторым по
популярности средством навигации после перехода по ссылке. То есть
пользователь всегда рассчитывает на возможность вернуться на одну страницу
назад. Веб-странички, которые созданы с использованием Аякса, такую
возможность не поддерживают, потому что их содержание создается «на лету».
Чтобы как-то это исправить, можно запрограммировать соответствующую логику
на JavaScript и сделать ссылку «Назад», щелчок на которую позволит
пользователю перейти на предыдущую страницу. Второй вариант, более
универсальный и чаще всего легче реализуемый, – использовать невидимый
IFRAME, который будет накапливать историю переходов.
 Избранное
Твоя страничка на Аяксе настолько понравилась посетителю сайта, что он
решил кинуть ее в «Избранное» (или в «Закладки», если посетитель - лисовод).
Но у него ничего не получится, так как у группы страничек на Аяксе всегда адрес
первой из них. Справиться с проблемой опять же можно двумя способами:
программингом и хаком. Программерское решение заключается в том, чтобы
каждая сгенерированная страница имела свой адрес и ссылку «Добавить в
Избранное», которая будет реализовывать нужную логику. Второй способ использовать ссылку на подраздел, который идет в адресе страницы после знака
диеза «#». Дело в том, что с помощью JavaScript эту часть адреса можно
изменять. Таким образом, этот хак может частично решить и проблему кнопки
«Назад».
 Неопределенное время ответа
Время ответа сервера на запрос не определено - может пройти несколько
секунд, а может - несколько минут. И пользователь начинает сильно нервничать,
грызть ногти и наконец закрывает страничку - ведь браузер никак не отображает,
что там что-то происходит :). Чтобы не доводить пользователя до невроза, нужно
вставить на страничку хотя бы надпись «Идет загрузка», а лучше -
21
анимированное графическое изображение, которое будет показывать, что она
жива.
Синхронная и асинхронная модель в AJAX
В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока
тот совершит всю необходимую работу. Сервер выполняет запросы к базе
данных, заворачивает ответ в необходимый формат и выводит его. Браузер.
получив ответ, вызывает функцию показа.
Все процессы выполняются последовательно, один за другим.
Сетевые задержки включены во время ожидания, обозначенное на схеме
серым цветом.
Пользователь не может заниматься чем-то другим на этой же странице, пока
происходит синхронный обмен данными.
Рис.
В асинхронной модели запрос отсылается. Когда запрос выполнилсязапускается заранее подготовленная программистом функция - показа сообщения
сервера.
22
Здесь сервер сразу же уведомляет браузер о том, что запрос принят в
обработку и освобождает его для дальнейшей работы. Когда ответ будет готов сервер перешлет его, и на браузере будет вызвана соответствующая функция
показа, но пока этот ответ формируется и пересылается - браузер свободен.
Асинхронная модель характеризуется почти мгновенной реакцией на действия
пользователя, так что создается впечатление удобного и быстрого приложения.
Особенности асинхронной модели
Рис.
 Сложность в реализации
1. Недостаточные возможности браузера (javascript)
2. Асинхронная модель сложнее для отладки
 Race conditions
1. Неопределена последовательность выполнения
2. Можно делать много одновременных задач ("удочек"), но задача,
начатая первой, может окончиться последней.
23
 Реакция тут же, но неизвестно, какой будет результат. Усложнена
обработка ошибок
1. Ошибок коммуникации - разрыв связи, и т.п.
2. Пользовательских ошибок - например, не хватило привилегий
 Контроль целостности (bugproof)
1. Например, редактор отправил асинхронный запрос на удаление
ветки дерева. Добавление в нее нужно отключить, пока не придет
ответ сервера. Если вдруг не хватило привелегий, то операция не
удалась.
 Интерактивность
 Быстрый интерфейс
Dom-model
Объектная модель документа DOM "выросла" из объектной модели Dynamic
HTML, но этот рост правильнее назвать революцией, чем эволюцией. Объектная
модель DHTML позволяет обращаться к отдельным объектам HTML-документа и
модифицировать их. К каждому тэгу HTML можно обратиться с помощью его
атрибутов id или name. Каждый объект экспонирует свои индивидуальные
свойства, методы и события. Свойства можно использовать для получения и
изменения локальных атрибутов объекта, методы - для оперирования объектом, а
события - для выполнения предопределенных действий.
Объектная модель DOM оказывается намного более общей по сравнению с
объектной моделью DHTML. Она предоставляет модель для всего документа, а не
только для отдельных тэгов HTML. Модель DOM представляет документ в виде
дерева. Каждый узел дерева соответствует тэгу HTML или текстовому элементу
(textual entry) внутри тэга HTML. Древовидная структура точно описывает весь
HTML-документ, включая взаимосвязи (relationships), или отношения, между
тэгами и текстовыми элементами документа. Отношения имеют тип child (дочь,
или потомок), parent (родитель, или предок) и sibling (родственник, или сосед, а
24
буквально - брат или сестра). Первые два отношения определяют направление по
вертикали (parent - вверх, child - вниз), а третье - по горизонтали.
Модель DOM позволяет проходить (navigate) по дереву документа вверх и
вниз, а также по горизонтали. С помощью отношений child, parent и sibling можно
перейти из любого места дерева документа в любое другое место
Модель DOM позволяет оперировать деревом документа, т.е. создавать (create)
новые узлы, удалять (delete) существующие узлы и перемещать (move) узлы по
дереву. Семантика этих операций точно соответствует их смыслу: они добавляют
новые тэги, удаляют существующие тэги и перемещают тэги по документу.
Пусть наш документ имеет вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Моя домашняя страница</TITLE>
</HEAD>
<BODY>
<H1>Моя домашняя страница</H1>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
Тогда мы можем представить его в виде следующего дерева:
Рис
Корнем этого дерева является элемент HTML, который имеет двух детей HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент
BODY - отцом элементов H1 и P (два последних элемента называются братьями,
25
причем H1 является старшим братом, а P - младшим). Все элементы дерева
являются потомками корня, а тот является их предком. При этом все элементы и
тексты, образующие их содержимое, являются узлами дерева документа.
Каждый
элемент
данного
дерева
соответствует
элементу
HTML
и,
следовательно, имеет тег(и), содержимое и набор атрибутов. Для перехода к
объектной модели документа остается сделать единственный шаг: назвать все
элементы дерева объектами, а их атрибуты сделать доступными для чтения и для
изменения из сценариев и аплетов. В результате дерево элементов HTMLдокумента становится динамически управляемым; более того, теперь мы можем
легко добавлять к каждому элементу новые свойства, помимо стандартных
атрибутов HTML.
Именно такой подход был положен в основу динамической модели HTML
обозревателей Microsoft, а затем принят за основу стандартов W3C, получивших
название объектная модель документа (Document Object Model или DOM). При
этом W3C расширил понятие DOM на любые XML-документы, рассматривая
HTML DOM как специализированный частный случай с дополнительными
возможностями. Таким образом, DOM - это модель HTML- и XML-документов,
независимая от платформы и языка программирования, которая определяет:
 интерфейсы и объекты, которые используются для представления
документа и манипулирования им;
 семантику этих интерфейсов и объектов, включая их атрибуты и
реакцию на события;
 взаимосвязи между этими интерфейсами и объектами
На сегодняшний день W3C стандартизовал DOM первого и второго уровней
(DOM 1 и DOM 2); в стадии рабочего проекта находится DOM 3. Эти
аббревиатуры соответственно обозначают следующее:
 DOM 1 описывает базовое представление XML- и HTML-документов в
виде деревьев объектов;
 DOM 2 расширяет базовые интерфейсы DOM 1 и добавляет к ним
поддержку событий и стилей;
26
 DOM 3 описывает загрузку и синтаксический анализом документов, а
также их отображение и форматирование.
Рассмотрим DOM 2 (и содержащуюся в нем DOM 1). DOM 2 состоит из
следующих групп взаимосвязанных интерфейсов:
 Core - базовые интерфейсы, определяющие представление любого XMLдокумента в виде дерева;
 View - интерфейсы, описывающие возможные отображения документа;
 Event - интерфейсы, определяющие порядок генерации и обработки
событий;
 Style - интерфейсы, определяющие применение к документам таблиц
стилей;
 Traversal & Range - интерфейсы, определяющие прохождение дерева
документа и манипулирование областями его содержимого;
 HTML - интерфейсы, определяющие представление HTML-документа в
виде дерева.
Основные понятия
DOM 2 Core представляет XML-документы в виде деревьев, состоящих из
узлов, которые, в свою очередь, также являются объектами и реализуют более
специализированные интерфейсы. Одни типы узлов могут иметь детей, т. е. сами
являться поддеревьями, другие являются листьями, т. е. детей не имеют. В
следующей таблице сведены все возможные типы узлов абстрактного документа;
для каждого типа узлов перечислены те узлы, которые могут быть его детьми. О
понятиях, соответствующих перечисленным узлам.
Интерфейс
Описание
Дети
Document
Документ
Element
(не
более
одного),
ProcessingInstruction,
27
Comment,DocumentType
(не
более
одного)
DocumentFragment
Фрагмент
Element,
документа
Comment,
ProcessingInstruction,
Text,
CDATASection,
EntityReference
DocumentType
Тип
детей не имеет
документа
EntityReference
Ссылка
раздел
на Element,
ProcessingInstruction,
Comment,
Text,
CDATASection,EntityReference
Element
Элемент
Element,
ProcessingInstruction,
Comment,
Text,
CDATASection,EntityReference
Атрибут
Attr
ProcessingInstruction Директива
Text, EntityReference
детей не имеет
XML
Comment
Комментарий детей не имеет
Text
Текст
детей не имеет
CDATASection
Секция
детей не имеет
CDATA
Entity
Раздел
Element, ProcessingInstruction,
Comment,
,
CDATASection,EntityReference
Notation
Нотация
детей не имеет
Таблица Структура дерева документа
Кроме того, DOM 2 Core содержит спецификацию интерфейсов NodeList
(упорядоченные списки узлов, доступных по номеру в списке) и NamedNodeMap
(неупорядоченные списки узлов, доступных по своему имени). Эти объекты
28
являются живыми, т. е. любое изменение документа автоматически влечет
изменение всех связанных с ним списков.
Интерфейсы Text, Comment и CDATASection являются потомками интерфейса
CharacterData.
Следует подчеркнуть, что DOM 2 Core содержит два набора интерфейсов,
каждый из которых обеспечивает полный доступ ко всем элементам документа.
Первый набор представляет объектно-ориентированный подход со следующей
иерархией наследования: документ - составляющие его элементы - их атрибуты и
текстовое содержимое. При таком рассмотрении дерева документа мы говорим о
иерархии объектов. Второй подход построен по принципу "все есть узлы
(Nodes)". Здесь все составляющие документа рассматриваются как равноправные
узлы его дерева, и мы можем говорить только о иерархии узлов. Таким образом,
DOM 2 по своей сути является избыточной, но предоставляет нам возможность в
зависимости от задачи рассматривать документ тем или иным способом.
Все интерфейсы DOM 2 Core подразделяются на основные (fundamental) и
дополнительные (extended). Основными являются интерфейсы DOMException,
DOMImplementation,
DocumentFragment,
Document,
Node,
NodeList,
NamedNodeMap, CharacterData, Attr, Element,Text и Comment. Эти интерфейсы
должны поддерживаться всеми реализациями DOM, как для XML-, так и для
HTML-документов. Дополнительные интерфейсы ориентированы на XMLдокументы, поэтому реализации DOM для HTML могут их не поддерживать. К
ним относятся CDATASection, DocumentType, Notation, Entity, EntityReference и
ProcessingInstruction.
В целях независимости от языка и платформы DOM определяет следующие
типы:
 DOMString-текстовая строка, состоящая из символов Unicode в формате
UTF-16. В JavaScript и в Java реализуется типом String.
 DOMTimeStamp-дата и время в приемлемом для конкретного языка
формате. Например, в JavaScript это будет объект Date, а в Java - целое
число типа long, содержащее количество миллисекунд.
29
Зачем нужна модель DOM
В качестве метода доступа к файлам XML всегда следует выбирать модель
DOM. По сравнению с такими доступными механизмами генерации документов
XML, как запись непосредственно в поток, этот метод имеет ряд преимуществ:
1. Модель DOM гарантирует правильную грамматику и правильное
оформление документов.
DOM трансформирует текстовый файл в абстрактное представление дерева
узлов. Это позволяет полностью избежать таких проблем, как незакрытые или
неправильно вложенные теги. Работая с документом XML при помощи этого
метода, разработчик должен беспокоиться не о текстовом выражении документа,
а только о связях типа родитель-потомок и об относящейся к этому информации.
Кроме того, DOM предотвращает создание неправильных связей родительпотомок в документе.
2. Модель DOM абстрагирует содержание от грамматики.
Созданное моделью DOM дерево узлов - это логическое представление
содержания файла XML, показывающее, какая информация в нем представлена и
как ее фрагменты соотносятся друг с другом, вне непосредственной связи с
грамматикой XML. Информация дерева узлов используется для обновления
реляционной базы данных или для создания страницы HTML, и разработчики при
этом не должны вникать в специфику языка XML.
3. Модель DOM упрощает внутреннее манипулирование документом.
Задача разработчика, использующего модель DOM для модификации
внутренней структуры файла XML, упрощается по сравнению с работой тех, кто
для этой цели применяет традиционные механизмы манипулирования файлами.
Как уже было, описано DOM позволяет легко добавить элемент в середину
документа. Кроме того, такие глобальные операции, как удаление из документа
всех элементов с конкретным именем тега, могут быть выполнены с помощью
30
пары команд, а не "метода грубой силы", предполагающего полное сканирование
всего файла и удаление ненужных тегов.
4. Модель DOM напоминает структуры иерархических и реляционных баз
данных.
Способ, используемый DOM для представления связей между элементами
данных, напоминает метод представления этой информации в современных
иерархических и реляционных базах данных. С помощью этой модели
упрощается процесс обмена данными между файлом XML и базой данных.
Использование
модели
DOM
для
построения
иерархической
структуры
документа позволяет легко передавать информацию между системами.
Модель DOM в окружающем мире
Компания Netscape в версии 4.7 своего браузера еще не предлагает встроенной
поддержки DOM, но при наличии библиотек ActiveX или Java DOM можно
обращаться к документам XML и работать с ними у клиента с помощью языков
Java и JavaScript. Следующие версии браузера Netscape включает встроенную
поддержку XML и XSL.
В браузерах Internet Explorer 5 и выше находятся встроенные библиотеки DOM
и поддержка XSL. Для сценариев на стороне клиента доступно множество
объектов для работы с XML-документом, самые важные из них, объекты
XMLDOMDocument, XMLDOMNode, XMLDOMNodeList, XMLDOMParseError
представляющие интерфейс для доступа ко всему документу, отдельным его
узлам и поддеревьям, предоставляющие необходимую для отладки информацию
о произошедших ошибках анализатора соответственно.
Объект
XMLDOMNode,
реализует
базовый
DOM
интерфейс
Node,
предназначен для манипулирования с отдельным узлом дерева документа. Его
свойства и методы позволяют получать и изменять полную информацию о
текущем узле - его тип (является ли текущий узел элементом, комментарием,
31
текстом и т.д.), название, полное название (вместе с Namespace префиксом), его
содержимое, список дочерних элементов и т.д.
Объект
XMLDOMDocument
представляет
верхний
уровень
объектной
иерархии и содержит методы для работы с документом: его загрузки, анализа,
создания в нем элементов, атрибутов, комментариев и т.д. Многие свойства и
методы этого объекта реализованы также в классе Node, т.к. документ может
быть рассмотрен как корневой узел с вложенными в него поддеревьями.
Объект XMLDOMNodeList представляет собой список узлов - поддеревья и
содержит методы, при помощи которых можно организовать процедуру обхода
дерева.
Объект XMLDOMParserError объект позволяет получить всю необходимую
информацию об ошибке, произошедшей в ходе разбора документа. Все свойства
этого объекта доступны только для чтения.
Клиент и сервер
Все
приложения
DOM
и
XML
можно
разделить
на
две
группы:
устанавливаемые на сервере (или в таком контролируемом окружении, как
системы типа клиент/сервер) и устанавливаемые у клиента.
Использование модели DOM на сервере
Поскольку разработчики Интернет -приложений имеют значительно больший
контроль над программным обеспечением, устанавливаемым на их серверах,
первые приложения DOM, как правило, были нацелены именно на эту область.
Модель DOM позволяет существенно упростить обмен данными между
различными деловыми системами, а также предоставляют идеальный механизм
для архивирования и извлечения данных.
32
Использование модели DOM у клиента
В настоящее время становится все более важно, чтобы документ можно было
читать различными клиентами. Эти клиенты могут визуализировать документ поразному, в зависимости от типа клиента и назначения файла. Пользовательский
браузер с помощью модели DOM изучит дерево узлов документа и отобразит
необходимую клиенту информацию.
По мере интеграции модели DOM в основные браузеры станет возможно с
помощью манипуляций документами XML у клиента добиваться более
эффективного
взаимодействия
с
пользователями.
Структурированную
информацию можно собирать у клиента и отправлять на сервер за одну
транзакцию, а не с помощью нескольких обращений к формам, находящимся на
различных страницах HTML.
Таким образом, Объектная модель документа DOM представляет собой
нейтральный к платформе и языку интерфейс, который позволяет скриптам
обращаться к содержанию, структуре и стилю Web-документа и изменять их. Она
определяет логическую структуру документов и включает в себя модель для
объединения стандартного набора объектов HTML- и XML-документов и
интерфейс для доступа и манипулирования ими.
Главное достоинство DOM - возможность обращаться ко всем элементам
документа для обновления их содержания и стиля. Работая совместно с
объектной моделью Dynamic HTML (DHTML), реализованной в броузерах
четвертого поколения, модель DOM расширяет возможности авторов создавать
сложные документы и данные и управлять ими. Многие задачи, которые сложно
или даже невозможно решить в модели DHTML, например перемещение объекта
из одной части документа в другую, легко реализуются с помощью методов
DOM.
JavaScript
33
Язык программирования JavaScript был разработан Бренданом Эйком (Brendan
Eich) в Netscape Communications как язык сценариев для обозревателей Netscape
Navigator, начиная с версии 2.0. В дальнейшем к развитию этого языка
подключилась
корпорация
Microsoft,
чьи
обозреватели
Internet
Explorer
поддерживают JavaScript, начиная с версии 3.0. Версия Microsoft получила
название JScipt, поскольку JavaScript является зарегистрированной маркой фирмы
Netscape. В 1996 г. ECMA приняла решение о стандартизации этого языка, и в
июне 1997 г. была принята первая версия стандарта под названием ECMAScript
(ECMA-262). В апреле 1998 г. этот стандарт был принят ISO в качестве
международного под номером ISO/IEC 16262. Мы в последующем изложении
основываемся на третьей версии стандарта ECMA (декабрь 1999 г.), но
используем название JavaScript, а не ECMAScript по двум причинам:
 Это название является исторически первым, и под ним данный язык
наиболее известен широкому кругу пользователей.
 Соответствующий тип MIME, а именно "text/javascript", распознается
всеми обозревателями, которые поддерживают сценарии на данном
языке, в отличие от JScript или ECMAScript.
JavaScript
-
это
объектно-ориентированный
язык
программирования,
предназначенный для написания сценариев, работающих как на стороне клиента,
так и на стороне сервера. Поэтому он не является "полноценным" языком
программирования, а ориентирован на использование возможностей той среды, в
которой сценарии исполняются.
Веб-обозреватель, работающий на компьютере-клиенте, обеспечивает среду, в
которой JavaScript имеет доступ к объектам, которые представляют собой окна,
меню, диалоги, текстовые области, фреймы, куки и ввод-вывод в Веб-страницу.
Кроме того, обозреватель позволяет присоединить сценарии на языке JavaScript к
таким событиям, как загрузка и выгрузка страниц и графических образов,
нажатие клавиш и движение мыши, выбор текста и пересылка форм. При этом
программный код сценариев только реагирует на события и поэтому не
34
нуждается
в
главной
программе.
Набор
объектов,
предоставляемых
обозревателем, известен под названием Document Object Model (DOM).
Веб-сервер обеспечивает иную среду, в которой объектами являются запросы
к базам данных, клиенты, файлы и механизмы блокировки и совместного
использования данных. Совместное использование сценариев и на стороне
клиента, и на стороне сервера позволяет распределить вычисления между ними и
обеспечить желаемый пользовательский интерфейс для Веб-приложения.
Обзор языка
JavaScript - это язык программирования, основанный на объектах: и языковые
средства, и возможности среды представляются объектами, а сценарий
(программа) на JavaScript - это набор взаимодействующих объектов. Объект
JavaScript - это неупорядоченный набор свойств, каждое из которых имеет нуль
или
более
атрибутов,
которые
определяют,
как
это
свойство
может
использоваться. Например, если атрибуту свойства ReadOnly (неизменяемый)
присвоено значение true (истина), то все попытки программно изменить значение
этого свойства будут безрезультатны. Свойства - это контейнеры, которые
содержат другие объекты, примитивные значения и методы. Примитивное
значение - это элемент любого из встроенных типов: Undefined, Null, Boolean,
Number и String; объект - это элемент еще одного встроенного типа Object; метод
- функция, ассоциированная с объектом через свойство.
JavaScript содержит несколько встроенных объектов, таких, как Global, Object,
Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Кроме того,
JavaScript содержит набор встроенных операций, которые, строго говоря, не
обязательно являются функциями или методами, а такжн набор встроенных
операторов, управляющих логикой выполнения программ. Синтаксис JavaScript в
основном соответствует синтаксису языка Java, но упрощен в сравнении с ним,
чтобы сделать язык сценариев легким для изучения. Так, к примеру, декларация
35
переменной не содержит ее типа, свойства также не имеют типов, а декларация
функции может стоять в тексте программы после ее вызова.
Общие сведения об объектах
Язык JavaScript, в отличие от языков Java и C++, не содержит классов объектов
в строгом смысле слова. Вместо этого он поддерживает конструкторы, которые
создают объекты путем выделения для них памяти и инициализации всех или
некоторых их свойств. Все конструкторы являются объектами, но не все объекты
являются конструкторами. Каждый конструктор имеет свойство prototype,
которое используется для реализации наследования, основанного на прототипах,
и разделяемых свойств. Объекты создаются путем вызова конструктора в
операции new; например new String("Это строка") создает новый объект String.
Результат вызова конструктора без new зависит от конструктора. Так, String("Это
строка") создает примитивную строку, а не объект.
JavaScript поддерживает наследование, основанное на прототипах. С каждым
конструктором связан соответствующий прототип, и каждый объект, созданный
конструктором, содержит неявную ссылку на этот прототип (называемый
прототипом объекта). Прототип, в свою очередь, может содержать ссылку на свой
прототип и так далее. Так образуется цепочка прототипов. Ссылка на свойство
объекта - это ссылка на первый прототип в цепочке прототипов объекта, который
содержит свойство с данным именем. Иными словами, если данный объект имеет
свойство с данным именем, то используется ссылка на это свойство; если нет, то
исследуется прототип этого объекта и т. д.
В объектно-ориентированных языках, основанных на классах объектов,
текущее состояние реализуется экземплярами классов, методы реализуются
классами, а наследование - структурой и поведением. В JavaScript текущее
состояние и методы реализуются объектами, а структура и поведение
наследуются. Все объекты, которое явно содержат свойство, которое содержит их
прототип, разделяют это свойство и его значение. В отличие от языков,
36
основанных на классах, свойства могут динамически добавляться к объектам
путем присвоения им значений. В частности, конструкторы не обязаны
присваивать значения всем или некоторым свойствам создаваемого объекта.
Базовые определения
После краткого описания языка JavaScript дадим неформальные определения
его основных понятий.
Тип
Набор значений данных.
Примитивное
Элемент одного из типов Undefined, Null, Boolean, Number
значение
или String. Примитивные значения - это данные, которые
представляются непосредственно и на самом нижнем
уровне реализации языка.
Объект
Элемент типа Object; является неупорядоченным
набором свойств, каждое
из которых
примитивным
объектом
значением,
может
или
быть
функцией.
Свойство, являющееся функцией, называется методом.
Конструктор
Функция,
которая
создает
и
инициализирует
объекты. Каждый конструктор имеет соответствующий
прототип, который используется для наследования и
разделения свойств.
Прототип
Объект, который используется в JavaScript для реализации
наследования структуры, состояния и поведения. Когда
конструктор создает объект, последний содержит неявную
ссылку
на
прототип
конструктора,
позволяющий
разрешать ссылки на свойства данного объекта. Свойства
прототипа разделяются всеми объектами, созданными на
его основе.
37
Объект языка
Любой объект, который поддерживается реализацией
языка JavaScript, а не средой исполнения сценариев. Часть
объектов языка являются встроенными; другие создаются в
процессе выполнения сценария.
Встроенный
объект
Любой объект, который поддерживается реализацией
языка JavaScript независимо от среды исполнения и
существующий на момент начала исполнения сценария.
Все встроенные объекты являются объектами языка.
Объект среды
Любой объект, который не является объектом языка, а
поддерживается средой исполнения сценариев.
Неопределенное Примитивное значение, которое означает, что переменной
значение
не присвоено никакого значения.
Тип Undefined
Этот тип состоит из единственного значения undefined,
которое является неопределенным.
Нулевое
Примитивное значение, которое означает нулевую, пустую
значение
или несуществующую ссылку.
Тип Null
Этот тип состоит из единственного значения null, которое
является нулевым.
Логическое
Примитивное значение типа Boolean, означающее истину
значение
или ложь.
Тип Boolean
Тип, состоящий ровно из двух значений: true (истина) и
false (ложь).
Логический
Элемент типа Object, который является экземпляром
объект
встроенного
логического
логический
объект
Boolean(value),
где
объекта.
создается
value
-
Иными
словами,
выражением
логическое
new
значение.
Результирующий объект имеет неявное (безымянное)
свойство типа Boolean.
Строковое
Элемент типа String. Предсталяет собой строку символов, т
38
значение
. е. упорядоченный массив из нуля или более символов
Unicode (т. е. 16-битовых целых чисел без знака).
Тип String
Этот тип состоит из всех возможных строковых значений.
Строковый
Элемент типа Object, который является экземпляром
объект
встроенного
строкового
объекта.
Иными
словами,
строковый объект создается выражением new String(value),
где value - строковое значение. Результирующий объект
имеет неявное (безымянное) свойство типа String.
Числовое
Элемент
типа
Number.
Является
непосредственным
значение
представлением числа.
Тип Number
Тип, состоящий из всех возможных числовых значений.
Точнее говоря, это набор 64-битовых числовых значений
формата IEEE 754, включающий специальные значения
NaN
(не
число),
положительная
бесконечность
и
отрицательная бесконечность.
Числовой
Элемент типа Object, который является экземпляром
объект
встроенного числового объекта. Иными словами, числовой
объект создается выражением new Number(value), где value
- числовое значение. Результирующий объект имеет
неявное (безымянное) свойство типа Number.
Бесконечность
Примитивное значение Infinity, являющееся элементом
типа Number.
NaN
Примитивное значение NaN (не число), являющееся
элементом типа Number.
Размещение кода JavaScript на HTML-странице
Выполнение программы зависит от того, когда и как интерпретатор получает
управление. Что, в свою очередь, зависит от функционального применения кода.
39
В общем случае можно выделить четыре способа функционального применения
JavaScript:
 гипертекстовая ссылка (схема URL);
 обработчик события (в атрибутах, отвечающих событиям);
 подстановка (entity);
 вставка (контейнер <SCRIPT>).
Объекты, методы и свойства
Объекты
Объект (object) - это какой-либо предмет. Подобно тому, как в реальном
мире все одушевленные и неодушевленные предметы являются объектами
(машины, собаки и пр.), объектами считаются и составляющие компьютерного
мира.
Что касается JavaScript, его объекты находятся внутри браузера. Это, в
частности, окно браузера, формы и их части, например кнопки и текстовые окна.
В JavaScript также имеется собственная группа встроенных объектов, к которым
относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом
внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны
усвоить лишь необходимые определения.
Именно благодаря наличию объектов язык JavaScript считается объектноориентированным. Язык организован вокруг объектов, а не действий, или, иначе
говоря, ориентирован на данные, а не на логику. При объектно-ориентированном
программировании первоочередное внимание уделяется объектам, с которыми
производятся некоторые манипуляции, а не логическим правилам, необходимым
для таких манипуляций. Преимуществом такого подхода является не только
облегчение программирования (или написания сценария), но и в то, что каждое
действие можно выполнить разными способами.
40
Методы
Метод (method) - это действия, которые может выполнять объект. В
реальном мире у объектов тоже имеются какие-либо методы. Машины ездят,
собаки лают, доллар покупается и т.д. В нашем случае alert() является методом
объекта Window, то есть объект Window может выдавать пользователю какоелибо предупреждение в окне сообщений. Примерами других методов являются
открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах:
open(), close() и click(). Обратите внимание на круглые скобки. Они означают, что
методы, в отличие от свойств, используются.
Свойства
У всех объектов имеются свойства (properties). Если вы и далее будете
следовать аналогии с объектами реального мира, то обнаружите, что все
предметы обладают какими-то свойствами: у машин есть колеса, а у собаки шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется
название и номер версии.
XMLHTTP
В интерактивности - статические html сайты - это прошлое. Динамические с
использованием CGI (или модулей сервера, например Apache) и баз данных,
когда сервер при отправки формы формирует страницу и показывает ее после
обновления - чуть современней, но все же во многих областях, где требуется
практически сопостовимая с десктопными приложениями интерактивность - так
же угасают. На смену приходят интерактивные функциональные программы, в
полной мере взаимодействующие с пользователем; информация, полученная от
сервера практически мгновенно отображается на экране без перезагрузке
страницы. Речь идет об AJAX'e, что в расшифровке "асинхронный JavaScript и
XML" (термин ввел Джесс Гарретт). А если более подробно, то - "асинхронный
JavaScript + CSS + DOM + XMLHttpRequest".Рассмотрим XMLHttpRequest.
41
XMLHTTP (XMLHttpRequest, XHR) — набор API, используемый в языках
JavaScript, JScript, VBScript и им подобных для пересылки различных данных
(XML, XHTML, JSON и т.д.) по HTTP-протоколу между браузером и вебсервером. Позволяет осуществлять HTTP-запросы к удаленному серверу без
необходимости перезагружать страницу.
XMLHTTP является важной составляющей технологии AJAX (Asynchronous
JavaScript And XML), используется многими сайтами для создания динамичных,
быстро
реагирующих
на
запросы
пользователя
приложений.
Например
XMLHTTP используется такими сайтами как Gmail, Google Suggest, MSN Virtual
Earth. XMLHTTP работает только с файлами, находящимися на том же домене,
что и использующая XMLHTTP страница. Как и в случае JavaScript, это сделано в
целях безопасности (cross-site scripting).
Кроме пересылки XML, через XMLHTTP можно обмениваться данными
формы и просто текстовыми строками.
История
Впервые был реализован компанией Microsoft, появившись в Internet Explorer
5.0 в виде объекта ActiveX, доступного через JScript, VBScript, или другие
скриптовые языки, поддерживающиеся браузером. Программисты проекта
Mozilla затем разработали совместимую версию, называющуюся XMLHttpRequest
в Mozilla 1.0. В дальнейшем эта возможность также была реализована
компаниями Apple начиная с Safari 1.2, родственным браузером Konqueror,
компанией Opera Software начиная с Opera 8.01, и, вероятно, другими.
Методы класса XMLHttpRequest
Метод
1. abort()
Описание
Отменяет текущий запрос, удаляет
42
все заголовки, ставит текст ответа
сервера в null.
Возвращает полный список HTTP-
2. getAllResponseHeaders()
заголовков
в
виде
строки.
Заголовки разделяются знаками
пересноса (CR+LF).
Если флаг ошибки равен true,
возвращает пустую строку.
Если статус 0 или 1, вызывает
ошибку INVALID_STATE_ERR.
3. getResponseHeader(headerName)
Возвращает значение указанного
заголовка.
Если флаг ошибки равен true,
возвращает null.
Если
фзаголовок
не
найден,
возвращает null.
Если статус 0 или 1, вызывает
ошибку INVALID_STATE_ERR.
4. open(method,
URL,
async, Определяет метод, URL и другие
userName, password)
опциональные параметры запроса;
параметр
async
происходит
ли
определяет,
работа
в
асинхронном режиме.
Последние
три
параметра
необязательны.
5. send(content)
Отправляет запрос на сервер.
6. setRequestHeader(label, value)
Добавляет
HTTP-заголовок
к
запросу.
7. overrideMimeType(mimeType)
Позволяет
указать
mime-type
документа, если сервер его не
43
передал или передал неправильно.
Внимание: метод отсутствует в
Internet Explorer!
Свойства класса XMLHttpRequest
Свойство
Тип
Описание
onreadystatechange
EventListener
Обработчик
события,
которое происходит при
каждой смене состояния
объекта. Имя должно
быть записано в нижнем
регистре.
readyState
unsigned short
Текущее
объекта
состояние
(0
—
не
инициализирован, 1 —
открыт, 2 — отправка
данных, 3 — получение
данных и 4 — данные
загружены)
responseText
DOMString
Текст ответа на запрос.
Если статус не 3 или 4,
возвращает
пустую
строку.
responseXML
Document
Текст ответа на запрос в
виде
затем
XML,
может
который
быть
обработан посредством
DOM.
44
Если
статус
не
4,
возвращает null.
status
unsigned short
HTTP-статус
числа
(404
в
виде
—
«Not
Found», 200 — «OK» и
т. д.)
statusText
DOMString
Статус в виде строки
(«Not Found», «OK» и т.
д.).
Если
статус
не
распознан,
браузер
пользователя
должен
вызвать
ошибку
INVALID_STATE_ERR.
Ошибки, вызываемые классом XMLHttpRequest
 SECURITY_ERR-вызывается
при
попытке
совершить
запрос,
запрещённый настройками безопасности в браузере пользователя.
 NETWORK_ERR- вызывается при ошибке сети (во время синхронного
запроса).
 ABORT_ERR-вызывается при прерывании пользователем запроса (во
время синхронного запроса).
Пример использования
План работы с объектом XMLHttpRequest можно представить следующим
образом:
Создание экземпляра объекта XMLHttpRequest
Установка обработчика события
45
Открытие соединения и отправка запроса.
Создание экземпляра объекта XMLHttpRequest.
На этой стадии необходима отдельная реализация для разных браузеров.
Конструкция создания объекта отличается: в IE 5 - IE 6 она реализована через
ActiveXObject, а в остальных браузерах (IE 7, Mozilla, Opera, Netscape и Safari) —
как встроенный объект типа XMLHttpRequest.
Вызов для ранних версий Internet Explorer выглядит так:
var req = new ActiveXObject("Microsoft.XMLHTTP");
В
более
поздних
версиях
Internet
Explorer
(до
IE7) рекомендуется
использовать:
var req = new ActiveXObject("Msxml2.XMLHTTP");
В остальных браузерах:
var req = new XMLHttpRequest();
То есть, для обеспечения кросс-браузерности кода, нужно лишь проверять
наличие объектов window.XMLHttpRequest и window.ActiveXObject, и, в
зависимости от того, какой есть, тот и применять.
В качестве универсального решения предлагается использование такой
функции:
function createRequestObject()
{
if (window.XMLHttpRequest) {
try {
return new XMLHttpRequest();
} catch (e){}
} else if (window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){
try {
46
return new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
}
return null;
}
Установка обработчика событий, открытие соединения и отправка запросов
Эти вызовы выглядят так:
req.onreadystatechange = processReqChange;
req.open(<"GET"|"POST"|...>, <url>, <asyncFlag>);
После определения всех параметров запроса его остается только отправить.
Делается это функцией send(). Если необходимо передать на сервер POSTданные, их надо подставить в качестве параметра для этой функции. POSTданные должны быть свернуты в URL-escaped строку (кодировка UTF-8) и
добавлен заголовок req.setRequestHeader ("Content-Type", "application/x-wwwform-urlencoded");. Другими словами эта строка будет иметь вид, который мы
привыкли видеть в командной строке браузера, при передаче данных методом
GET. При отправке GET-запроса для версии без ActiveX необходимо указать
параметр null, в остальных случаях можно не указывать никаких параметров. Не
будет ошибкой, если для GET всегда будет указан параметр null:
req.send(null);
После этого начинает работать вышеуказанный обработчик событий. Он —
фактически основная часть программы. В обработчике обычно происходит
перехват всех возможных кодов состояния запроса и вызов соответствующих
действий, а также перехват возможных ошибок. Пример кода с этими двумя
функциями:
var req;
47
function loadXMLDoc(url)
{
req = null;
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e){}
} else if (window.ActiveXObject) {
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
}
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
}
function processReqChange()
{
try { // Важно!
// только при состоянии "complete"
if (req.readyState == 4) {
// для статуса "OK"
48
if (req.status == 200) {
// обработка ответа
} else {
alert("Не удалось получить данные:\n" +
req.statusText);
}
}
}
catch( e ) {
// alert('Caught Exception: ' + e.description);
// В связи с багом XMLHttpRequest в Firefox приходится отлавливать
ошибку
// Bugzilla Bug 238559 XMLHttpRequest needs a way to report networking
errors
// https://bugzilla.mozilla.org/show_bug.cgi?id=238559
}
}
49