AJAX для новичков
Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.
Что такое AJAX?
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обобщим достоинства AJAX:
AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttpRequest, о чем мы и будем говорить, и использование техники скрытого фрейма.
Обмен данными
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.
Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.
Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.
Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.
Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.
Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.
В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.
Методы объекта XMLHttpRequest
Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.
abort() — отмена текущего запроса к серверу.
getAllResponseHeaders() — получить все заголовки ответа от сервера.
getResponseHeader(«имя_заголовка») — получить указаный заголовок.
open(«тип_запроса»,»URL»,»асинхронный»,» имя_пользователя»,» пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).
send(«содержимое») — послать HTTP запрос на сервер и получить ответ.
setRequestHeader(«имя_заголовка»,»значение») — установить значения заголовка запроса.
Свойства объекта XMLHttpRequest
onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState — число, обозначающее статус объекта.
responseText — представление ответа сервера в виде обычного текста (строки).
responseXML — объект документа, совместимый с DOM, полученного от сервера.
status — состояние ответа от сервера.
statusText — текстовое представление состояния ответа от сервера.
Следует подробнее расммотреть свойство readyState:
Именно опираясь на состояние готовности объекта можно представить посетителю информацию о том, на какой стадии находится процесс обмена данными с сервером и, возможно, оповестить его об этом визуально.
Создание объекта XMLHttpRequest
Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
А для Internet Explorer`а используется следующее:
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
AJAX. Так что же это?
Наша жизнь непостоянна. Все в этом мире эволюционирует и изменяется. В том числе и виртуальная реальность. И одно из слов, с которым связаны эти изменения,- это AJAX. Об AJAX уже слышали не только веб-программисты, но и рядовые пользователи. Что реально кроется за этой магической аббревиатурой? Как это использовать на своем сайте? На эти вопросы я и попытаюсь ответить в данной статье.
Впервые об AJAX я услышал весной этого года. Сразу заинтересовался этой технологией, и, как и положено в таких случаях, отправился в поиск за статьями, которые смогли бы ответить на возникшие у меня вопросы: «Что это такое? Как это работает? И в чем преимущества? Что нужно дополнительно установить на сервер/клиент для работы с AJAX? Как это можно использовать на своем сайте?». Прочтя с десяток статей, я получил ответ лишь на первые два вопроса, но на остальные ответа так нигде не нашел. И лишь после прочтения нескольких публикаций на английском языке я окончательно понял, что к чему. Это и подвигло меня к написанию данного материала.
В первую очередь статья адресуется подготовленным людям, пишущим программы для интернета и знакомым с такими терминами как «объект», «метод», «свойства». Однако частично может оказаться полезной и тем, кто просто интересуется данным вопросом. В списке литературы имеется необходимый перечень ссылок, воспользовавшись которыми вполне реально освоить технологию «с нуля».
По ходу изложения под термином «браузер» мы будем понимать браузеры: Internet Explorer 5.0+, Safari 1.3 и 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (плюс означает данную версию и более новые). Если речь станет заходить о других версиях, об этом будет упоминаться отдельно.»Что это такое? Как это работает и в чем преимущества?»
Для того чтобы понимать, какие преимущества дает AJAX, нужно знать, как работают веб-приложения в настоящее время. А работают они по клиент-серверной технологии (рис. 1).
Пользователь в браузере открывает какую-либо страницу page. На странице есть гиперссылки, которые ведут на другие страницы. При нажатии на любую из них браузер посылает запрос URL на сервер, с которым связана эта ссылка. Если в природе не существует сервера, связанного с этой ссылкой (например, когда, набирая URL в адресной строке, вы ошиблись при написании имени ресурса), или имеются проблемы связи с интернетом, то браузер сгенерирует страницу, подобную показанной на картинке (так она выглядит в Operа-е):
В случае существования сервера, но отсутствии на нем документа, указанного в запросе сервер сам создаст HTML страницу с описанием ошибки. Например, это может быть всем известная 404-ая ошибка (документ не найден). Или, если все верно, в ответ сервер отдаст новую страницу. В любом случае, в браузер будет загружена новая страница new_page, даже если по сравнению со старой на ней изменилась лишь пара слов. Довольно существенный минус данной технологии. Кроме того, работа ведется в синхронном режиме. То есть после того как браузер отослал на сервер запрос он ожидает от него ответ, и пока ответ не получен ничего предпринимать не будет. А порой ответ, и загрузка новой страницы может длиться слишком долго. Настолько долго, что пользователь может не дождаться загрузки страницы и просто закрыть её. Поэтому веб-программмисты прибегают к некоторым уловкам.
Например, используя DOM методы языка JavaScript [1], можно динамически изменять фоновый рисунок блока без перезагрузки страницы. Это обеспечивает необходимую интерактивность. При наведении курсора мыши на ячейку таблицы исходная фоновая картинка pic_1.gif заменяется pic_2.gif. При уходе курсора с ячейки происходит обратный процесс.
Или такой пример. В файл с изображением в формате JPEG можно записать (и прочитать) метаданные EXIF. Многие интернет фоторесурсы позволяют для отображаемой фотографии показать и эти данные. Но они появляются только после нажатия соответствующей кнопки на экране. При этом обновление страницы не происходит. Делается это очень просто. EXIF данные находятся на странице, но расположены в скрытом блоке с помощью CSS (display: none). При нажатии на кнопку блок становится видимым (display: block). Минусы очевидны: вместе со страницей передаются данные, которые, возможно, не будут использованы; отобразить можно лишь те данные, которые были присланы вместе со страницей.
Когда-то клиент-серверная технология способствовала развитию сети. Но как это нередко бывает то, что двигало прогресс в определенный период истории, чуть позже начинает этот прогресс тормозить. В данном случае становилось очевидным, что клиент-серверная технология в чистом виде не может удовлетворить всем требованиям, которые предъявляются к некоторым веб-приложениям. Требовалось какое-то новое решение. И оно появилось в виде AJAX подхода к написанию веб-приложений.
Так в чем ключевое отличие AJAX технологии от классической клиент-серверной? Это наличие AJAX-движка, состоящего из двух частей: клиент-приложение (написанное на языке JavaScript) и сервер-приложение (написанное на любом серверном языке). Также немного другой логикой общения приложения-клиента с сервером (рис. 2).
Теперь при активации какого-либо элемента управления интерфейса браузер не делает запрос новой страницы с сервера, а запускает клиентскую часть. А уже приложение-клиент, в свою очередь, обращается к серверу через запрос requst и запрашивает только те данные, которые должны измениться на странице. После получения данных data от приложения-сервера клиент-приложение производит обновление части страницы через DOM методы без перегрузки всей страницы в целом. При этом возможна работа в асинхронном режиме. То есть когда пользователь не дожидается получения ответа с сервера и перегрузки страницы, а продолжается работать со страницей page, как ни в чем не бывало.
Тут мне хочется сделать небольшое лирическое отступление. Немало статей, в которых говорится о том, что AJAX это не технология, это подход к написанию приложения, идея. В принципе, верно, все, что нас окружает и есть идеи, но лично я настаиваю на термине «технология AJAX» для подчеркивания того факта, что это еще одна технология взаимодействия клиентского и серверного приложений (наряду с клиент- и файл-серверными технологиями).»Что нужно дополнительно установить на сервер/клиент для работы с AJAX?»
Все вышеизложенное было чисто теоретическими рассуждениями разработчика, которые и написал Гарретт. Настало время перейти к практическому рассмотрению того, на чем основывается AJAX и что конкретно нужно использовать для написания AJAX-приложений.
Когда я решил поработать с AJAX-приложением, то подумал, что для поддержки нужно что-то поставить на сервер. Какой-либо модуль, может, в виде dll. Но как потом понял, ничего никуда устанавливать не нужно. Требуется лишь корректно написать движок и все. Возникает вопрос, а что за AJAX-движки распространяются в сети? Ответ прост: это уже готовые приложения, которые предназначены для каких-либо задач, и которые в готовом виде можно использовать на своем сайте. Например, существует библиотека для PHP, которая называется xAjax. Она включает в себя как клиентский скрипт, написанный на JavaScript, так и серверный скрипт, с которым JavaScript взаимодействует. Помните об этом! У меня был случай, когда человек думал, что AJAX-приложение это только JavaScript, использующий XMLHttpRequest объект, и все. Но это далеко не все. Есть еще скрипт на стороне сервера, логику работы которого также придется проектировать, а потом писать код.
Рассматривать готовые библиотеки я не буду. В документации, идущей с ними, все расписано достаточно подробно. Остается лишь, используя их API, подключить их к своему сайту. Наша цель ознакомится с начинкой таких приложений. Эти знания помогут, как самому написать Ajax-приложение, так и разобраться в уже готовом решении.
У данного объекта немало свойств и методов [10], но не все из них поддерживаются ведущими браузерам. Полная поддержка есть только в FireFox-е. Поэтому привожу только то, что будет работать в современных браузерах [9].
СВОЙСТВА:
readonly onreadystatechange function
Указывает функцию обратного вызова (callback function), которая будет вызываться каждый раз, когда будет изменяться readyState свойство. Несмотря на то, что вызывается функция, параметры передать в нее не получиться. Но об этом чуть позже в примере.
readonly readyState integer
readonly responseText string
Ответ сервера в виде обыкновенного текста. Только чтение.
readonly responseXML object
Ответ сервера в виде объекта DOM Document. Используется, если ответ сервера является корректным XML документом. Если документ не корректный, данные не получены или еще не оправлены, то свойство равно NULL. Только чтение.
readonly status string
Статус ответа. Например: 200 (ОК), 404 (документ не найден), 503 (временная перегрузка сервера).
МЕТОДЫ:
Прерывает HTTP запрос или получение данных. Очищает все свойства объекта, которым присваиваются начальные значения. Метод полезен в связке с таймером, когда по прошествии определенного времени с момента запроса (вылете в тайм-аут) ответ от сервера так и не был получен.
Возвращает все заголовки ответа сервера в виде отформатированной строки. Каждый новый заголовок начинается с новой строки.
string getResponseHeader(string header)
Вернуть заголовок с именем header.
void open(string method, string uri, [boolean asynch])
Подготавливает запрос по адресу uri методом method (POST или GET) с указанием режима asynch, асинхронный режим или нет. В результате вызова свойство readyState становиться равным 1.
Инициирует запрос к серверу. В запросе передаются данные data.
void setHeader(string header, string value)
Присваивает заголовку с именем header, значение value. Перед началом использования этого метода не забудьте вызвать open()!
Теперь, когда у нас есть не только необходимые теоретические знания, но и представление о том, на что практически опирается AJAX, можно преступать к написанию своего приложения. Далее я привожу один пример от момента формулирования задачи до полной ей реализации, в виде приложения, поясняя некоторые тонкости по ходу изложения.
Итак, у нас задача: нужно реализовать базу данных (БД) драйверов для различных устройств. При этом БД настолько большая, что нет смысла пересылать её приложению-клиенту и делать выборку из неё посредством JavaScript. Из-за изменения одного значения на странице перегружать её тоже нежелательно. Лично я для реализации данной задачи применяю для серверных скриптов PHP, а реализации БД применяю XML файл.
Структуру БД выбираю следующую:
Листинг БД файл data.xml: ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR(128bit) ATI X1300 256 DDR (128bit) NVidia 6600 128 DDR (128bit) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1900XT 512 DDR (256bit) NVidia 6600 Silencer 128 DDR (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR(256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR (128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990
Как в этой БД человек ведет поиск? Скорее всего, он от корневого элемента шел бы по дереву документа до тех пока в нужной ветви не нашел ссылку или убедился, что драйвера для данного устройства нет в базе. Также поступим и мы, используя для нахождения нужного узла или набора узлов выражения языка XPath [11].
Листинг формы для отправки данных index.htm:
В форме есть две переменные: path и flag. В первой хранится запрашиваемый путь, который отправляется на сервер. Так как один элемент в форме уже есть, то у этой переменной уже есть начальное значение. Вторая переменная служит для того, чтобы указать серверному скрипту, что из документа нужно извлечь определенный элемент Device. Кроме того, формат возвращаемых данных с сервера изменится.
Как я уже говорил, в функцию свойства onreadystatechange нельзя передать параметры. Точнее нельзя передавать параметры, которые являются объектами. Поэтому в самом начале создаем переменную, в которой и будем хранить ссылку на вызвавший функцию объект. Поскольку данная переменная находится в глобальной зоне видимости переменных, то обратиться к ней можно будет из любой части программы. На данный момент это самый разумный способ передать параметры call-back функции свойства onreadystatechange объекта.
А теперь разберем по шагам работу движка.
При наступлении события onblur (элемент select потерял фокус) вызывается функция sendData(), которая и подготавливает POST данные для оправки запроса. Кроме того, она формирует XPath выражение в зависимости от значения переменной flag=0 (например, //Devices/VideoCards) или flag=1 (например, //Devices/VideoCards/AGP/Sapphire/Device[«ATI 9600XT 256 DDR (128bit)»]).
Далее вызываем функцию sendRequest(), в которую передаем URL серверного скрипта, а также переменную типа строка, в которой содержатся готовые POST-данные. И первым делом создаем XMLHttpRequest объект, ссылку на который храним в переменной requestObj. Функция httpRequest() является кросс-браузерной, и будет работать во всех браузерах.
Когда-то обращение к функции httpRequest() я делал сразу при загрузке страницы через и больше не создавал XMLHttpRequest объект. Но как оказалось, это работает для всех браузеров кроме IE, который каждый раз требует создавать новый объект. Поэтому вызов данной функции делается каждый раз перед отправкой данных.
После отправки данных браузер ждет ответа с сервера. При каждом изменении свойства readyState будет вызываться функция responseServer(). Если статус ответа пришел с кодом «200» (все нормально), то будет вызвана функция addSelect(), которая и добавит полученный данные в DOM текущего документа. Все браузеры будут ждать ответа от сервера. Однако по истечении некоторого времени (time-out) принудительно назначат XMLHttpRequest.readyState = 4 и перестанут ожидать ответа с сервера. Например, для Opera значение тайм-аута составляет 10 секунд. Используя другие статусы, можно добавить в движок обработчик ошибок в ответах сервера.
Функция addSelect() добавляет в DOM текущего документа еще один узел DIV, в который и помещает ответ с сервера. Может возникнуть вопрос, почему используется свойство responseText, а не responseXML? У кого-то обязательно возникнет желание, используя это свойство, импортировать ответ сервера (а серверный скрипт в ответ присылает XML документ) прямо в DOM документа. Возникло такое желание и у меня. Я хотел импортировать корневой элемент присланного XML файла и все его потомки методом importNode. Но браузер импортировал элемент без потомков, даже несмотря на то, что второй параметр данного метода был установлен в true: importNode(Object importedNode,true). Поэтому не точная реализация этого метода пока исключает его использование.
Равнозначное решение было найдено, используя innerHTML метод элемента.
На этом работа клиентской части заканчивается. Оставшаяся нерассмотренной функция reset() призвана вернуть DOM документа к начальному виду. Достичь того же можно, обновив страницу по F5, но AJAX-движок как раз и пишется для того, чтобы избежать перезагрузки страницы. Поэтому все элементы, добавленные в документ скриптом, должны быть удалены из него также скриптом.
Если запрашиваемый узел имеет имя Device, то возвращается обычный отформатированный текст. Серверный скрипт написан на PHP V5 и не будет работать на более ранних версиях этого интерпретатора, так как расширение для работы с DOM было введено в этот язык только с пятой версии, и заменило собой расширение DOM XML, интерфейс которого не соответствовал спецификации. А теперь посмотрим на код серверного скрипта.
Полный AJAX. Теория и Примеры. Фишки и Фичи
По многочисленным просьбам начинающих (и не только) AJAX разработчиков, решил выделить часть своего времени для описания некоторых хитростей и приемов, которыми пользуюсь при построении сложных, динамических веб-приложений. Статья представляет из себя смесь теоретических выкладок и практических примеров.
Наибольшие трудности при построении сайтов c применением AJAX возникают при реализации механизма AHAH (Asynchronous HTML and HTTP). Особенно выполнение на лету подгружаемых Javascript-ов. Также есть куча дополнительного «гемороя» при разработке AJAX сайтов и веб-приложений. Вы можете ознакомится с детальным описанием некоторых существующих проблем. Из-за указанных сложностей, многие разработчики отказываются от более насыщенного внедрения AJAX.
Однако, мало кто знает, что перечисленные проблемы можно решить. Тем более уже имеется ряд решений, которые позволяет с легкостью обходить проблемные и узкие места при разработке сложных AJAX веб-приложений, а также при динамической подгрузке HTML страниц со встроенными скриптами.
Одним из таких решений является Fullajax — технология построения сайтов и веб-приложений с использованием AJAX. Это совокупность алгоритмов, подходов, правил и методов максимального внедрения всей мощности AJAX & AHAH. Технология нацелена на уменьшение сложности и расширения узконаправленности области применения AJAX.
Fullajax выражен в отдельной независимой библиотеке. Это не аналог jQuery, Mootools, ExtJS, Prototype, YASS. Однако, совместное использование с современными javascript библиотеками не противоречит и не вызывает конфликтов, а наоброт дополняет друг друга. Библиотека предназначена сугубо для коммуникации. Весь упор сделан на удобство, гибкость и в то же время простоту в использовании методов и функций для обмена данными между клиентом и сервером. В ранее перечисленных библиотеках имеется DOM навигация и манипуляция, различные визуальные эффекты, наборы визуальных компонентов. В Fullajax всего этого нет. Зато есть свои другие возможности.
Список основных возможностей:
1. доступ к элементу по id
2. SRAX.onReady — готовность DOM
Теперь непосредственно о коммуникационных функциях.
Для работы с AJAX запросами в библиотеке реализованы две функции dax и hax.
Основное правило:
3. Пример использования dax
id — определяет внутренний идентификатор потока, предназначен для разделения потоков запроса к серверу, в один и тот же момент времени не может существовать два потока (запроса) с одинаковыми id, следующий запрос отменяет предыдущий. Использование id также позволяет повторно использовать созданные в памяти объекты.
Список опций работы dax
4. Пример использования hax
70% всего кода библиотеки — это реализация работы hax. Эта функция выполняет все сложные операции по обработке разных вариантов HTML кода. Можно сказать hax — это полноценное ядро анализа и обработки HTML документов. Она автоматически выделяет и применяет стили и жабаскрипты, сама регламентирует их последовательность загрузки, метод загрузки ручной (через dax) или автоматический (отдавая процесс загрузки браузеру), реализацию истории AJAX навигации, обработку document.write, window.onload, автоматическое изменение title, поддержка прямых AJAX ссылок, другое.
Рассмотри внутренний алгоритм работы hax. При получении html ответа производится анализ документа и парсинг стилей, скриптов. Если стили и скрипты внешние производится их автоматическая рекурсивная дозагрузка. Рекурсивная означает если внутри дозагружаемых скриптов, стилей есть еще внешние ссылки процес повторяется. В случае если скрипты, стили с другого домена, процесс загрузки тогда отдается браузеру и последующий анализ таких скриптов, стилей не производится.
Для реализации четкой и стабильной работы при обработке сложных HTML страниц был разработан алгоритм контроля подгружаемости и очередности выполнения скриптов, стилей и линков, который снимает с браузеров эти обязанности. За счет этого реализована хорошая, стабильная, а главное одинаково предсказуемая работы AHAH в основных веб-браузерах.
Одним из «камней в сандале» является совместное использование AJAX и document.write. При появлении в скриптах document.write — работа сайта с применением AJAX (AHAH) по умолчанию невозможна. Так как document.write можно использовать только до окончания потока вывода основной страницы. В противном случае — контент страницы просто напросто стирается. В Fullajax функция document.write переопределена, таким образом что без ошибок выполняется то что было задумано программистом. Алгоритм эмуляции этой функции был одним из самых сложных моментов при разработке библиотеки.
Также одним из сложнейших функционалов библиотеки является реализация кроссбраузерной истории AJAX навигации. В конце концов, в Fullajax работа с AJAX историей сводится к определению одного параметра вкл/выкл.
Примеры работы с hax:
В элемент с будет загружена страница ‘index.html’ с использованием AJAX истории.
В элемент с будет загружена страница ‘index.html’ без использованием AJAX истории, после загрузки вылетит alert.
Список опций работы hax
Продолжение
Всех благ, спишемся…
UPD1: Некоторые примеры внедрения
Dream Travel — туристическая Компания
Tooglecms — правда еще сыровато, только первая бета.
Datamash.us — виджет платформа
Форум где можно задать вопросы технического характера
