Главная
страница 1страница 2страница 3страница 4

ГЛОБАЛЬНАЯ КОМПЬЮТЕРНАЯ СЕТЬ – ИНТЕРНЕТ 2

WEB 2.0 5

ОБЗОР ТЕХНОЛОГИЙ 7

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: 12

Недостатки Веб 2.0 12

Будущее web2.0 13

Технология 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

Объекты, методы и свойства 39

Объекты 40

Методы 40

Свойства 41

XMLHTTP 41

История 42

Методы класса XMLHttpRequest 42

Свойства класса XMLHttpRequest 43

Ошибки, вызываемые классом XMLHttpRequest 45

Пример использования 45




ГЛОБАЛЬНАЯ КОМПЬЮТЕРНАЯ СЕТЬ – ИНТЕРНЕТ



Интернет – это глобальная компьютерная сеть, объединяющая многие локальные, региональные и корпоративные сети и включающая сотни миллионов компьютеров.

Основу, «каркас» Интернета составляют более 700 миллионов серверов, постоянно подключенных к сети.

К серверам Интернета могут подключаться сотни миллионов пользователей с помощью локальных сетей, коммутируемых или выделенных телефонных линий.

Интернет считается последним и крупнейшим техническим достижением двадцатого века. Благодаря ему оказалось возможным соединить сотни миллионно компьютеров, разбросанных по всему свету.

Интернет обеспечил плавный переход от века массового производства, века ядерного и космического к веку информационному. Последствия этого перехода сегодня ощущают на себе все отрасли промышленности, культуры и науки.

Саморазвитие Интернета происходит путем его расширения за счет включения се новых и новых компонентов. Этот процесс напоминает ветвление живого растительного организма, только в его основе лежат не естественные процессы обмена веществ, а экономические процессы обмена ресурсами.

Интернет выполняет де основные функции: информационную и коммуникационную.

Информационная функция позволяет потребителям быстро получать затребованную информацию. Это могут быть научные знания, книги, статьи, сообщения, рисунки, видеоматериалы и многое другое.

Информационная функция Интернета способствует бурному проникновению в коммерцию. Немалая экономия на непродуктивных издержках позволяет снижать цену на товары, увеличивать объемы продаж и, тем самым, увеличивать прибыль, часть от которой поступает в распоряжение Интернета. Это введет к еще более быстрому развитию служб Сети.



Коммуникационная функция Интернета позволяет людям общаться. Она развивается за счет создания в Интернете служб, аналогичных традиционным средствам общения, но превосходя их по возможностям.

Так, например, электронная почта объединяет возможности обычной почты и приближает их к возможностям прямого телефонного общения за счет скорости обмена сообщениями.

В Интернете существует Интернет-телефония, позволяющая людям разговаривать, как по обычному телефону, но не нести при этом значительных расходов на междугороднюю и международную связь.

Разумеется, информационная и коммуникационная функции Интернета во многом пересекаются. Так, многие профессионалы используют возможности коммуникации для оперативного решения технических вопросов, получения справочной информации, обсуждения специальных проблем.

Технология WWW позволяет создавать ссылки, которые реализуют переходы не только внутри исходного документа, но и на любой другой документ, находящийся на данном компьютере и на любой документ любого компьютера, подключенного к Интернету.

В 1989 году Тим Бернерс-Ли предложил свой проект гипертекстовой системы (см. рис.), согласно которой нажатие на ссылку вызывает переход на требуемый документ или фрагмент документа.

В качестве указателей ссылок, то есть объектов, активизация которых вызывает переход на другой документ, могут использоваться на только фрагменты текста, но и графические изображения.

Серверы Интернета, реализующие WWW-технологию, называются Web-серверами, а документы, реализованные по технологии WWW, называются Web-страницами.

Создание Web-страниц осуществляется с помощью языка разметки гипертекста (Hyper Text Markup Language - HTML). Основа используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги). В результате текстовый документ в браузере выглядит как 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, помогают пользователям Всемирной паутины легко перемещаться между ресурсами (файлами) вне зависимости от того, находятся ресурсы на локальном компьютере или на удалённом сервере.

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. В общем, одни приняли новую концепцию, другие полагают, что это бессмысленный маркетинговый термин. Однако, несмотря на ведущиеся споры, специалисты обычно выделяют несколько основных аспектов нового явления.

Что же такое 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. Рассмотрим эти технологии более подробно в следующей главе.

ОБЗОР ТЕХНОЛОГИЙ

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-каналов программы-агрегаторы должны уметь работать со всеми вариантами, что создаёт некоторые трудности их разработчикам.

Проблемы совместимости возникают также при вставке в 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.

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. В результате программное обеспечение может использовать веб-службы вместо того чтобы самостоятельно реализовывать требуемый функционал (например, проверить введенный в форме почтовый адрес). В отличие от обычных динамических библиотек, такой подход обладает рядом плюсов:

  • Веб-служба находится на серверах компании, которая её создала. Поэтому в любой момент пользователю доступна самая свежая версия данных и ему не приходится заботиться об обновлениях и вычислительных мощностях, требуемых для выполнения операции.

  • Инструменты для работы с HTTP и XML есть в любом современном языке программирования, поэтому веб-службы переходят в разряд платформонезависимых.

Веб-службы используются для решения определенных трудоемких задач. В качестве примера можно привести, например Гугл-карты (Google Maps API), которые можно легко встраивать на сайт.

Рис.1 Карта Google

2. Веб-синдикация


Одновременное распространение информации в том числе аудио- и видео- на различные страницы или web-сайты, как правило, с использованием технологий RSS. Принцип заключается в распространении заголовков материалов и ссылки на них (например, последние сообщения форумов, и т. п.). Первоначально эта технология использовалась на новостных ресурсах и в блогах, но постепенно сфера применения расширилась.

Это массовое, автоматическое дублирование материала, опубликованного в одном месте на различных сайтах. Эта технология вышла из новостных сервисов и «Живого Журнала» и быстро вошла в нашу жизнь, как удобная концепция распространения материала в едином формате 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. Википедия – свободная энциклопедия

  2. Google Earth - Google-карты

  3. Flickr - онлайн-фотоальбом

  4. delicious - Служба закладок

  5. Netvibes - Персональний рабочий стол

  6. Digg.com – Ресурс новостей

  7. UcoZ - Веб хостинг



Недостатки Веб 2.0

Использование сервисов сторонних компаний наряду с достоинствами приносит и определённые проблемы. Среди них:



  • зависимость от наличия постоянного соединения (исчезает связь — информация становится недоступной или неудобной в использовании);

  • зависимость сайтов от решений сторонних компаний, зависимость качества работы сервиса от качества работы многих других компаний;

  • слабая приспособленность нынешней инфраструктуры к выполнению сложных вычислительных задач в браузере;

  • уязвимость конфиденциальных данных, хранимых на сторонних серверах, для злоумышленников (известны случаи хищения личных данных пользователей, массовых взломов учётных записей блогов).

Фактически сайт эпохи Веб 2.0 на первый взгляд интерактивен и дружелюбен, позволяет себя легко настраивать. Однако сбор статистики о пользователях, их предпочтениях и интересах, личной жизни, карьере, круге друзей могут помочь владельцу сайта манипулировать сообществом. По самым пессимистичным прогнозам многочисленные сайты Веб 2.0 вкупе с другими современными технологиями дают прообраз тоталитарной системы «Большого брата».

Будущее web2.0

Google предоставляет все больше и больше бесплатных веб-служб, что значительно упрощает разработчикам их работу, позволяя значительно снижать бюджеты на сложных порталах. Например, еще 4 года назад социальная сеть «Мир тесен» просто не смогла бы быть создана, т.к. она построена на связке социальности и картографии (тогда просто не было адекватных технологий), а сейчас разработчикам даже не пришлось реализовывать картографический сервис — они взяли уже готовый удобный инструментарий у Google.

Теги, так распространенные для связи текстового контента, уже скоро начнут находить свое применения в видео. Сейчас, если взять тот же youtube, видео связывается на уровне самих роликов. Следующим шагом в развитии тегирования будет расстановка тегов на конкретные объекты внутри видео, например, на конкретного человека или его часы (см. технологию «гипервидео»), что позволит связывать и находить, например одинаковые объекты в различных роликах.

Как видите, использование технологии web2.0 довольно широко и не привязано только к социальным сетям или ajax-интерфейсам. Динамичное развитие этой концепции, а так же ее грамотное использование позволяет очень быстро создавать успешные проекты. Главное — быть оригинальным и делать полезные, востребованные инструменты для аудитории.



Технология AJAX для создания современных веб-сайтов

В покере есть такая начальная комбинация карт - туз и валет. Ее называют «AJAX». Если она выпадает при раздаче, то шансы на выигрыш очень велики. Существует одноименная компьютерная технология, которая обещает стать козырной картой в колоде любого сайта.

На заре развития Web сама возможность доступа к связанным гиперссылками документам казалась чудом, поэтому пользователи готовы были терпеливо ожидать загрузки очередной страницы хоть вечность. К тому же такое неудобство считалось временным. Уже скоро, надеялись если не все, то, по крайней мере, многие, появятся скоростные каналы и время отклика удаленной машины станет практически таким же, как и локальной.

Однако шли годы, возможность обращения к серверу на другом континенте становилась привычной, а надежды на ускорение отклика таковыми и оставались. Пропускная способность линий связи действительно росла, но еще быстрее увеличивался средний размер документа. Если раньше Web-страница содержала только текст и максимум одну-две картинки, то сейчас среднее количество изображений исчисляется десятками. В угоду внешнему виду прибегают даже к графическому представлению заголовков – мера, которая еще десять лет назад была немыслимой. Внедренные в страницу видео- и аудиофрагменты также не способствуют ее быстрой загрузке. В результате пользователю, активизировавшему ссылку, все так же приходится ожидать, когда на экране браузера появится новая страница, и придумывать себе на это время занятие.

Но даже если на некоторых сайтах принципиально не используются изображения и мультимедийные данные, это вовсе не означает, что они всегда будут загружаться с максимальной скоростью. Причина – в неравномерной нагрузке на различные участки Всемирной Сети. Из-за этого страница, пересылаемая за доли секунды, может долго ожидать своей очереди на маршрутизаторе, поскольку тот в данный момент испытывает пиковую нагрузку.

Одним словом, задержки, связанные с передачей информации по Сети, с годами не исчезли и в дальнейшем ситуация вряд ли принципиально улучшится. Чтобы найти выход или хотя бы определить, где его искать, надо прежде всего понять суть проблемы. Как ни странно, она состоит не в том, что активизация ссылки не приводит к немедленному получению результата. Гораздо хуже, что в течение времени, необходимого для загрузки, старая страница уже недоступна, а новая еще не получена, поэтому пользователю приходится прерывать работу и ждать. Как показали исследования, подобный режим существенно снижает производительность труда. Кроме того, часто бывает, что новый сайт отличается от старого лишь в мелочах. На месте остаются элементы навигации, колонтитулы, а заменяется лишь небольшой фрагмент текста или одно-два изображения. Возникает резонный вопрос: почему бы не копировать по Сети лишь ту часть документа, которую действительно нужно обновить, и нельзя ли на время загрузки дополнительной информации предоставить пользователю возможность продолжать работу с текущей страницей? Ответ на него дает новая концепция Ajax, объединяющая несколько давно известных технологий.



Запрос к серверу из сценария

До недавнего времени вся работа в Web строилась по принципу полной замены текущего документа. При активизации гипертекстовой ссылки или формы браузер передавал запрос серверу, который возвращал ответ в виде HTML-документа. Ситуация изменилась с появлением объекта XMLHttpRequest, доступного из JavaScript-сценариев.

Объект XMLHttpRequest берет на себя одну из функций браузера, а именно формирование и передачу запроса Web-серверу, и воспользоваться ею довольно просто. Сначала следует открыть запрос (метод open()), указав характеристики заголовка, а затем передать его (send()). Принципиальный вопрос – нужно ли теперь ждать ответа? Если бы дело обстояло так, то объект XMLHttpRequest был бы совершенно бесполезен. Согласитесь, пользователю ведь все равно, кто «отключит» интерактивные возможности документа – браузер или JavaScript-сценарий. К счастью, в методе open() предусмотрен специальный параметр – флаг асинхронного выполнения. Если его значение равно true, метод send() практически сразу же вернет управление сценарию, и в то время, пока запрос будет «путешествовать» по направлению к серверу, а затем ответ проходить тот же путь в обратном направлении, пользователь сможет продолжить работу с документом. Конечно, новая информация, которая должна поступить в ответе, будет некоторое время недоступна, но тут уж ничего не поделаешь – пауза неизбежна. Зато текущая страница останется в полном распоряжении пользователя.

Что же произойдет при получении ответа? Очевидно, управление должно перейти к функции обратного вызова (подобный подход не нов и вряд ли его стоит здесь обсуждать), задать которую позволяет свойство onready statechange того же объекта XMLHttpRequest. С помощью свойства readyState мы проверяем состояние процесса обработки запроса (значение 4 свидетельствует о его окончании) и при необходимости извлекаем данные из свойств responseText или responseXML.


Вспомним DOM

Итак, принципиально задача решена: нам удалось загрузить новые данные, не прерывая работу пользователя с текущей страницей. Однако для практического применения этого мало. Полученные данные нужно как-то включить в состав документа, уже отображающегося на экране. К счастью, это возможно, – подходящий механизм давно отработан и широко известен: надо воспользоваться структурой DOM. При этом от свойства responseText лучше отказаться, так как его применение потребует дополнительного синтаксического разбора. Гораздо полезнее responseXML, в котором информация изначально представляется в совместимом с DOM виде. Таким образом, в структуре текущего документа необходимо выбрать узел, в состав которого следует включить возвращенные данные, и вызвать метод replaceChild(), заменив старое и ненужное поддерево новым, прочитанным из responseXML объекта XMLHttpRequest.

Остались сущие мелочи – задать внешний вид полученных данных посредством каскадных таблиц стилей. Эту задачу многократно решал каждый, кто имеет хотя бы небольшой опыт создания Web-узлов.

Выполнив упомянутые выше действия, мы получим не что иное, как Ajax-приложение. Несмотря на предельную простоту оно, тем не менее, отражает все особенности, характерные для инфраструктуры Ajax. Во-первых, и это самое главное, запрос передается серверу в асинхронном режиме (отсюда первая буква в имени Ajax: «a» – asynchronous). Во-вторых, инициатором запроса выступает JavaScript-сценарий («ja» – JavaScript). Теперь совсем не обязательно размещать на странице гипертекстовые ссылки. Запрос может быть сформирован в ответ на попадание курсора мыши в некоторую область или по истечении заданного времени (в общем, его можно «привязать» к любому событию). И, в-третьих, серверу совсем не обязательно передавать в ответ на запрос целый документ. Достаточно, если браузер получит лишь фрагмент, в котором пользователь в данный момент нуждается. Посредством DOM мы включаем его в состав текущей страницы и формируем внешний вид с помощью правил CSS. Ну а чтобы не нарушалась структура, например, чтобы не встречались открывающие дескрипторы без закрывающих (как известно, существующие браузеры очень лояльны к подобным ошибкам), целесообразно вообще отказаться от HTML – гораздо большего доверия заслуживает формат XML (отсюда и последняя буква: «x» – XML). К сожалению, не хватило для обозначения структуры DOM и каскадных таблиц стилей, но очевидно, что без них не обойтись. Ведь полученные данные надо как-то включить в состав документа, и удобнее всего сделать это именно средствами DOM. Кроме того, в отличие от HTML для элементов XML не предусмотрены правила отображения по умолчанию, и придать им требуемый внешний вид можно только посредством стилей (CSS или же XSL).



Что же нового?

Традиционно новый подход к созданию приложений и инструмент, позволяющий реализовать его на практике, появляются практически одновременно и идут рука об руку. Какой же инструмент претворяет идею Ajax в жизнь? Объект XMLHttpRequest был разработан задолго до Ajax. Язык JavaScript не намного моложе HTML. XML и CSS также широко известны.

Как ни странно, ни одну базовую технологию для Ajax создавать не пришлось, но именно эта особенность и является одним из главных преимуществ данной концепции. Платформу для выполнения Ajax-приложений можно собрать из готовых компонентов, необходимо лишь, чтобы браузер, применяемый для просмотра документов, поддерживал объект XMLHttpRequest. Но это уже забота пользователя – если речь идет не о корпоративной, а о Всемирной Сети, разработчики Web-приложений никак не могут влиять на выбор клиентских программ.

Что получает пользователь

Инициировав загрузку очередного фрагмента, пользователь может продолжать работу, ни на минуту не отвлекаясь. Все действия по передаче данных происходят «за сценой», незаметно для него. И лишь после получения ответа сервера он увидит, что одна из частей страницы обновилась. Вероятно, он будет как-то оповещен об этом – аудио или визуальным способом, но это уже задача Web-дизайнера, который волен распорядиться очередным инструментом наилучшим образом.

Однако предоставляя пользователю новые возможности, клиентская программа не может не измениться сама. Если раньше в «классических» Web-приложениях вся обработка осуществлялась на стороне сервера, то в Ajax такой подход неприемлем. Если каждое решение будет приниматься на сервере, то практически безразлично, в каком режиме передаются запросы: асинхронном или синхронном, в любом случае до получения ответа придется приостановить работу. Выход заключается в повышении «уровня интеллекта» клиентской программы, которая должна обеспечивать интерактивное взаимодействие с пользователем, лишь изредка обращаясь к серверу. А это неминуемо приведет к увеличению объема клиентского кода – JavaScript-сценарии в составе документа становятся все сложнее, и для их создания приходится затрачивать больше времени и усилий.

Существует еще одна особенность Ajax-приложений. Поскольку с сервера загружаются не целые документы, а их фрагменты, динамически отображаемые посредством DOM, время работы пользователя с одной страницей многократно возрастает. Это хорошо видно даже на примере простого приложения, основные этапы создания которого были рассмотрены выше. И если при классическом Web-взаимодействии незначительные ошибки бывают некритичны (все равно через несколько минут пользователь запросит новую страницу), то в Ajax-приложении требования к качеству документов существенно повышаются. Как всегда, чтобы обеспечить пользователям комфортные условия, программистам приходится работать интенсивнее и брать на себя дополнительную ответственность.


Сервер остается сервером

С точки зрения требований к серверной части Ajax-программы мало отличаются от классических Web-приложений. Код на стороне сервера должен обрабатывать клиентские запросы, при необходимости обеспечивать взаимодействие с базой данных, формировать ответ, – одним словом, выполнять совершенно привычные действия. Тот факт, что вместо документов клиенту передаются лишь их отдельные фрагменты, вряд ли окажет существенное влияние на общую архитектуру. Учитывая, что Ajax-клиент берет на себя дополнительные обязанности, можно было бы ожидать некоторого упрощения серверного кода, но это вряд ли произойдет. Как говорится, природа не терпит пустоты, и как только появляется новая возможность, тут же возникает и потребность в дополнительных функциях.

Несмотря на относительную новизну Ajax как концепции, примеры успешных проектов уже доступны в Глобальной Сети. Например, в службе GMail реализовано автоматическое обновление информации о поступивших письмах независимо от действий, которые в этот момент выполняет пользователь. На основе Ajax созданы также Google Suggest и Google Maps. Нетрудно заметить, что именно Google на сегодняшний день является бесспорным лидером по применению Ajax и главным апологетом этой концепции, однако и другие компании стараются идти в ногу со временем. В частности, примеру Google уже в ближайшем будущем собираются последовать mail.ru и еще ряд онлайновых служб.

Так что же ожидает Ajax? Разделит ли данная концепция участь многих модных новинок, попадающих в поле зрения программистов лишь для того, чтобы вскоре оказаться навсегда забытыми? Ответ, видимо, должен быть отрицательным. И пользователи, и разработчики осознают недостатки классических Web-приложений и будут приветствовать любое решение, способное их устранить. Если же Ajax и уступит место, то только той технологии, которая позволит достичь еще большей эффективности. А пока многие ведущие специалисты, коллективы и известные компании взяли курс на Ajax и в обозримом будущем свернуть с него вряд ли захотят.



Недостатки Аякса

Любая технология всегда имеет не только плюсы, но и минусы. Ниже перечисленно наиболее существенные недостатки AJAX и возможные методы их устранения.



  • Поисковая оптимизация

Главной проблемой страниц на Аяксе является их «невкусность» для поисковиков, поэтому такие страницы очень плохо ими «съедаются», ведь поисковик не умеет переходить по ссылкам JavaScript. Огромное количество пользователей могут пройти мимо твоего сайта, даже если на нем есть требуемый контент. Следовательно, его нужно сделать доступным другим способом, хотя бы самым банальным – смастерить страничку «Карта сайта» с полным списком страниц.

  • Кроссбраузерность

У пользователей есть плохое качество - они пользуются разными браузерами. Казалось бы, нет проблем – пиши код на HTML, CSS и JavaScript, который соответствует стандартам, и все. Но не тут-то было - разные браузеры поддерживают стандарты неодинаково. Что ж, ставим себе несколько самых популярных браузеров (причем необходимо поставить еще и их разнообразные версии) и тестируем наши веб-странички.

  • Кнопка «Назад»

По данным исследователей, кнопка браузера «Назад» является вторым по популярности средством навигации после перехода по ссылке. То есть пользователь всегда рассчитывает на возможность вернуться на одну страницу назад. Веб-странички, которые созданы с использованием Аякса, такую возможность не поддерживают, потому что их содержание создается «на лету». Чтобы как-то это исправить, можно запрограммировать соответствующую логику на JavaScript и сделать ссылку «Назад», щелчок на которую позволит пользователю перейти на предыдущую страницу. Второй вариант, более универсальный и чаще всего легче реализуемый, – использовать невидимый IFRAME, который будет накапливать историю переходов.

  • Избранное

Твоя страничка на Аяксе настолько понравилась посетителю сайта, что он решил кинуть ее в «Избранное» (или в «Закладки», если посетитель - лисовод). Но у него ничего не получится, так как у группы страничек на Аяксе всегда адрес первой из них. Справиться с проблемой опять же можно двумя способами: программингом и хаком. Программерское решение заключается в том, чтобы каждая сгенерированная страница имела свой адрес и ссылку «Добавить в Избранное», которая будет реализовывать нужную логику. Второй способ - использовать ссылку на подраздел, который идет в адресе страницы после знака диеза «#». Дело в том, что с помощью JavaScript эту часть адреса можно изменять. Таким образом, этот хак может частично решить и проблему кнопки «Назад».

  • Неопределенное время ответа

Время ответа сервера на запрос не определено - может пройти несколько секунд, а может - несколько минут. И пользователь начинает сильно нервничать, грызть ногти и наконец закрывает страничку - ведь браузер никак не отображает, что там что-то происходит :). Чтобы не доводить пользователя до невроза, нужно вставить на страничку хотя бы надпись «Идет загрузка», а лучше - анимированное графическое изображение, которое будет показывать, что она жива.

Синхронная и асинхронная модель в AJAX

В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока тот совершит всю необходимую работу. Сервер выполняет запросы к базе данных, заворачивает ответ в необходимый формат и выводит его. Браузер. получив ответ, вызывает функцию показа.

Все процессы выполняются последовательно, один за другим.

Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом.

Пользователь не может заниматься чем-то другим на этой же странице, пока происходит синхронный обмен данными.

Рис.
В асинхронной модели запрос отсылается. Когда запрос выполнился- запускается заранее подготовленная программистом функция - показа сообщения сервера.

Здесь сервер сразу же уведомляет браузер о том, что запрос принят в обработку и освобождает его для дальнейшей работы. Когда ответ будет готов - сервер перешлет его, и на браузере будет вызвана соответствующая функция показа, но пока этот ответ формируется и пересылается - браузер свободен.

Асинхронная модель характеризуется почти мгновенной реакцией на действия пользователя, так что создается впечатление удобного и быстрого приложения.



Особенности асинхронной модели



Рис.



  • Сложность в реализации

    1. Недостаточные возможности браузера (javascript)

    2. Асинхронная модель сложнее для отладки

  • Race conditions

    1. Неопределена последовательность выполнения

    2. Можно делать много одновременных задач ("удочек"), но задача, начатая первой, может окончиться последней.

  • Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок

    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 (родственник, или сосед, а буквально - брат или сестра). Первые два отношения определяют направление по вертикали (parent - вверх, child - вниз), а третье - по горизонтали.

Модель DOM позволяет проходить (navigate) по дереву документа вверх и вниз, а также по горизонтали. С помощью отношений child, parent и sibling можно перейти из любого места дерева документа в любое другое место

Модель DOM позволяет оперировать деревом документа, т.е. создавать (create) новые узлы, удалять (delete) существующие узлы и перемещать (move) узлы по дереву. Семантика этих операций точно соответствует их смыслу: они добавляют новые тэги, удаляют существующие тэги и перемещают тэги по документу.

Пусть наш документ имеет вид:







Моя домашняя страница






следующая страница >>
Смотрите также:
Глобальная компьютерная сеть – интернет 2 web 0 5 обзор технологий 7
497.86kb.
4 стр.
Глобальная сеть интернет и информационная среда
41.87kb.
1 стр.
Статья раскрывает проблему проектирования новой образовательной среды обучения, основанной на современных информационных и коммуникационных технологиях в условиях применения Интернет, Web-технологий, гипертекста
104.1kb.
1 стр.
Москва, Россия
75.38kb.
1 стр.
Интернет: скрытые угрозы у интернета много имен и свойств. Всемирная компьютерная сеть, способ мгновенной коммуникации, «территория свободы»
86kb.
1 стр.
Общие положения о web-сайтах Сайт от англ website: web — «паутина, сеть»
126.41kb.
1 стр.
Стоит отметить, что в 90-х годах прошлого столетия Интернет рассматривался как глобальная сеть, не имеющая границ, в том числе государственных, с присущей ему географической анонимностью пользователей
129.27kb.
1 стр.
Нормы пользования услугами сети передачи данных и доступа в сеть интернет общие положения
47.33kb.
1 стр.
Программа предпрофильного элективного курса
127.15kb.
1 стр.
Управление корпоративной информационно-образовательной средой на базе интернет-технологий
37.13kb.
1 стр.
В этом разделе мы рассмотрим вопросы подключения к всемирной паутине, безопасности, общения и развлечения в Сети. А также, что для этого необходимо
16.32kb.
1 стр.
Сеть и Интернет Заходим в Пуск->Панель управления->Сеть и Интернет
35.14kb.
1 стр.