Давно забытый AJAX

Процесс создания AJAX (Асинхронный JavaScript + XML), являющаяся одной из основных технологий, лежащей в основе, этак называемого, WEB 2.0, была общеизвестно снова, немного ли далеко не, с времен каменного века. Однако, благодаря появлению термина AJAX, какой ввел Джис Джеймс Гаррет (Jesse James Garrett), она является необычайно модной. А также при условии если раньше, об ней могли разговаривать лишь только наиболее продвинутые программисты, в таком случае нынче, благодаря появлению специализированного термина, произнести О ней вероятно всякий, кому отнюдь не лень. Очень просто произнести «AJAX», а также ты уж об ней говоришь.
Суть процесса создания AJAX

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

Первые приемы динамической подзагрузки данных на WEB-страницу появился в спецификации HTML 4.0 от 18 декабря 1997 года. В этой спецификации впервые были определены:
семантика ради элемента SCRIPT,
элементы IFRAME а также OBJECT,
элемент FRAME.

Так же, был введен принадлежность target с целью элементов, создающих ссылки (A, LINK), навигационных карт (AREA) а также форм (FORM).

В результате этих революционных нововведений, стало возможным, отнюдь не перезагружая всю страницу, менять частица ее содержимого. Например, целую страницу дозволено было разделить на немножко фреймов а также, указав в одном из них ссылки, мишень которых определялась атрибутом target, менять содержимое другого фрейма, отнюдь не перезагружая заглавия (эта возможность применяется на интернет портале webdesign.site3k.net). Схоже дозволено было поступить вместе с IFRAME а также OBJECT, меняя их содержимое щелчком согласно ссылке (эта возможность применяется на интернет портале bosportour.com – содержимое гостевой книги заключено в личном IFRAME, отдельно от заглавия а также общего оформления). Благодаря JavaScript, стало возможным снова не меньше: Произвольно менять SRC рисунков, таблиц стилей а также скриптов, загружая новые части в еще загруженную страницу а также, пусть даже, менять содержимое статического текста (эта возможность применяется на интернет портале praktika.net – в страницу вставляется выбранный посетителем изображение а также в соответствии вместе с ним меняется подпись к рисунку; применение динамически загружаемых скриптов впервые упомянуто мной в 2003 году на странице http://discoverer.h11.ru/webdesig/menus.html, нынче это webdesign.site3k.net/conjuncture/append/d/menus.html).

Так же, в 1997 году появились Каскадные таблицы стилей (CSS), вместе с их атрибутом display, позволяющим укрывать или отображать отдельные элементы страницы, что сейчас, в взаимодействии вместе с JavaScript, могло мгновенно частично или совсем изменять ее видимое содержимое (применяется в древовидном меню сайта webdesign.site3k.net).

Компании Netscape сего показалось недостаточно а также в собственный браузер, они добавили тег LAYER, содержимое которого отображалось этак же, как будто содержимое тега DIV, однако могло обладать принадлежность SRC а также грузится из отдельного файла, благодаря чему, никак не перегружая страницу, дозволено было загрузить данные, привязанные к ссылке, даже если далеко не в отдельный фрейм или OBJECT, однако прямо в один из элементов текущей страницы – навсегда как будто это делается немедленно на AJAX.

Просто раньше никому в голову отнюдь не приходила придумать этому особое название.

Окончательное формирование всех вариаций процесса создания AJAX произошло в 1998 году, в какое время в браузере Internet Explorer 5.0 появился новые объекты ActiveX – XMLHttpRequest, DTC, RDC а также другие (использование TDC описано на старице Обработка баз данных браузером посетителя, ради обработки прайсов а также применено на cmk.net.ua – в случае если вы используете IE, вам удастся его видеть). Однако поэтому XMLHttpRequest приобрел наибольшую популярность а также поддержку в иных браузерах.

XMLHttpRequest приобрел популярность благодаря тому что сейчас, значительно ускорял загрузку данных, позволяя подключать в уж загруженную страницу данные любого вида. Его применение позволяло кроме особых ухищрений вставлять в страницу ответы сервера а также, таким образом, приминять технологию AJAX смогли даже если люди, далеко не отличающиеся особыми талантами (LAYER от Netscape позволял действовать это вместе с еще раз большей легкостью, однако, так как завершительный проиграл войну браузеров, победили поэтому стандарты Микрософта). Эта популярность вынудила производителей иных браузеров включить поддержку XMLHttpRequest в свои продукты (Mozilla Firefox, начиная вместе с версии 1.0, Opera, начиная вместе с версии 8.0, Safari…) а также применение AJAX стало повсеместным. Вскоре появился а также самолично термин. Использование AJAX стало модным а также О нем внезапно все заговорили. Произошло это в начале 2005 года а также, таким образом, официальное признание процесс создания получила спустя 8 лет вместе с момента появления.
Современное состояние AJAX

Поскольку AJAX – это ровно по сути, лишь только разнообразное применение компонента XMLHttpRequest, в таком случае для того чтобы осмыслить работу AJAX, требуется разобраться вместе с синтаксисом XMLHttpRequest. Сделаем это на примере:

И таким образом:

Условие window.XMLHttpRequest определяет, каким образом работает объект в данном браузере (дозволено добавить проверку, работает ли он вообще а также в случае если window.ActiveXObject таким образом же преподносит неверный итог, настоящий метод вообще далеко не поддерживается браузером). Затем создается объект одного из поддерживаемых типов, потом чего событию onreadystatechange (изменение состояния) назначается обработчик. Таким образом же, назначаются параметры методу open. Первый из них определяет тип запроса: POST или GET, второй определяет адрес (в данном случае адрес берется из значения текстового поля), 3, в случае истинен, определяет что именно, запрос вынужден выполнятся асинхронно, в таком случае существует, отправив запрос отнюдь не дожидаться ответа сервера, но продолжать работу, ожидая ответа в фоновом режиме.

После всего сего методом send происходит фактическая отправка запроса а также, как будто всего лишь от сервера приходит ответ, срабатывает обработчик события onreadystatechange.

При обработке события onreadystatechange нужно проверить код состояния объекта (свойство readyState). Определено 4 состояния:

0 – объект отнюдь не инициализирован

1 – шагает загрузка

2 – объект уж загружен

3 – Загружен частично

4 – завершение загрузки

Как лишь код становится равен 4, данные сервера дозволено приминять а также выводить в браузер. Однако, отнюдь не мешало бы проверить, что именно поэтому вытащили наши сети, используя код ответа сервера, сохраняющийся в req.status. Ежели код равен 200 (см. коды ошибок ВЕБ сервера), данные поистине дозволено выводить, по-другому, дозволено вывести сообщение об ошибке, сохраняющийся в свойстве req.statusText. Вместо стандартного текста ошибки, дозволено вывести собственный, что именно удобно сваять, создав массив определений, ключи которого будут отвечать номерам ошибок:

err[400]=”Запрос содержит синтаксическую ошибку”;

err[401]=”Для доступа требуется авторизация”;

err[403]=”Доступ запрещен”;

и т. д.

Все достаточно просто (хотя менять src ради IFRAME снова проще). Однако данным методом дозволено обращаться лишь к ресурсам того же сайта, вместе с которого закачана запрашивающая страница. Для того чтобы обратиться к другим всемирная сеть-ресурсам, придется приминять серверный скрипт, вроде такого:

И здесь задумаешься: Но вероятно отправить сейа#только AJAX к чертям а также приминять не менее простой а также всеядный IFRAME? Но IFRAME воспрещено приминять непосредственно внутри форм. В этом случае, применение AJAX окажется вполне разумным, а также станет выглядеть примерно этак:

Но это отнюдь не решает всех проблем. Потому что сейчас:
При использовании AJAX никак не срабатывает навигация согласно ссылкам: заполняя многостраничную форму стандартного образца, вы имеете возможность обнаружить ошибку, допущенную на предыдущей странице, а также вернутся обратно. Ежели в форме применяется AJAX никакой «Назад» отнюдь не сработает. Схожая неуспех постигнет, в случае если на AJAX построена вся навигация сайта.
Поисковые роботы отнюдь не интерпретируют JavaScript а также никак не будут прохаживаться согласно AJAX ссылкам.
AJAX поддерживается лишь только новыми браузерами, в связи вместе с чем, его поклонники требуют дабы «Юзеры меняли брузеры». Но, это же наглость. Я, несомненно, понимаю что именно, конечно нет смысла добиваться полной совместимости вместе с браузерами 10 летней давности, однако утрачивать доля посетителей лишь оттого, что именно вам хочется применить AJAX? Глупо. С целью кого вы делаете интернет портал? В случае если с целью себя, в таком случае согласно. Ежели с целью посетителей, в таком случае постарайтесь сваять таким образом, дабы максимально наибольшее их количество смогло им использовать.

Однако самая важная проблема AJAX заключается в том что именно, сохраняя локальную копию загруженного документа, посетитель страницы, на самом деле, ничто далеко не сохраняет! Конечно, при условии если вы желаете заставить его навещать интернет портал опять а также заново, вам это должно очень понравится, а в случае вы желаете помочь посетителю, вы имеете право усвоить одну, пошлую вещ: AJAX далеко не предназначен ради загрузки контента! Загруженный материал является временным а также существует всего лишь впредь до закрытия браузера, этак как будто он отнюдь не записывается в текст страницы, же только лишь хранится оперативной в памяти. Посвященный в данные вещи посетитель выделит текст а также скопирует в файл, однако никак не посвященный, ни в жизнь никак не поймет, для чего, посещая страницу на интернет портале, он наблюдает одно, однако открывая ее локальную копию – другое.
Альтернативы AJAX
Полное отсутствие AJAX

Первой альтернативой является давний добродушный серверный скрипт. Код, использующий серверный скрипт, вероятно выглядеть вот этак:

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

Но это классический вариация: итог выдается на прочий странице, которую придется загрузить совсем. Никакого AJAX.

Чтобы приблизить это к AJAX, дозволено поместить меняющуюся доля страницы (вместе с формой или кроме), в IFRAME (в частности, как будто сделал я на странице http://kazantip.net.ua/zajavka.html). Но дозволено сходить уже далее:
AJAX на старых дрожжах

Как говорилось в начале статьи, процесса создания AJAX, на самом деле, просто давненько забыли а также ради этой «технической революции» никакой XMLHttpRequest или ActiveXObject никак не требуются. Только значит, приведенный ниже код станет трудиться В ЛЮБОМ браузере:

Если в браузере далеко не работает JavaScript, событие onsubmit отнюдь не станет обработано а также принадлежность target далеко не будут переназначен. В этом, только этак же, в том случае, при условии если браузер далеко не поддерживает iframe, данные загрузятся в новую страницу, как будто при обычном использовании серверного скрипта. Однако, в случае все мы имеем нормальный браузер, поддерживающий HTML 4.0, согласно нажатию кнопки submit, на сервер отправится запрос. Когда же от туда вернется ответ, сработает событие onLoad в iframe а также пришедший текст отобразится в div id=content, как будто а также при использовании AJAX. А также, что именно самое важное, ежели посетитель сохранит страницу, полученный им текст никуда далеко не исчезнет, этак как будто, совместно вместе с ней сохранится а также текст iframe. При открытии сохраненной страницы, настоящийа#однако текст немедля загрузиться а также отобразится.

Осталось лишь придумать этому название, в частности, JAI (JavaScript and iframe) а также важно трубить об изобретении новой, сильнее совершенной процесса создания.
Область применения AJAX

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

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

Было бы отлично, при условии если бы все было на одной странице. Но размер страницы, содержащей названия всех стран а также всех городов этих стран был бы невероятно огромен. Вот Апорт а также делит на этапы, на каждом показываю как только ту доля, которая соответствует ранее выбранным параметрам (далеко не все города мира, же только лишь нужной страны). Но дозволено же сваять этак: На странице перечень стран, при выборе страны, происходит запрос на сервер а также тот, на данную же страницу передает перечень городов этой страны. Далее, выбираешь городок а также, произведя все установки на 1 странице, завершаешь регистрацию.

В подобный ситуации AJAX значительно ускорит процесс. Вот только лишь каковой AJAX? Вместе с использованием ActiveXObject или JavaScript + iframe? Исходя из того что именно, все, кто понимает недостатки AJAX, пытаются свести их впредь до минимума, добавляя к нему снова а также iframe, рекомендую немедля переходить к iframe а также отнюдь не пытаться угодить моде.