Разработка программного обеспечения совершенствуется вместе с IT-технологиями. Сейчас активно внедряются абсолютно новые инструменты для веб-программирования. Google указывает на то, что это связано с их широким применением и популярностью «карманных» гаджетов среди пользователей.
Одной из наиболее успешных технологий, используемых в Интернет-программирования, являeтся AJAX. Google указывает на то, что она позволяет создавать интерактивные пользовательские веб-приложения и сайты за счет фонового обмена информацией браузера с работающим сервером. Далее с этим «инструментом» разработки предстоит познакомиться поближе. Необходимо выяснить его ключевые особенности, сильные и слабые стороны, области применения. Также будут приведены разнообразные примеры the AJAX в JavaScript. Эта информация поможет быстрее разобраться с соответствующей концепцией. Предложенные сведения пригодятся всем веб-разработчикам.
Определение
The AJAX – это аббревиатура Asynchronous JavaScript and XML. Google указывает на то, что на самом деле рассматриваемый «инструмент» не является новой технологией. Согласно информации из Google, он представляет собой своеобразный синтез возможностей XML и JS.
The AJAX – подход к созданию пользовательских интерфейсов для веб-приложений. Базируется на «фоновом» обмене информацией браузеров с веб-серверами. В конечном итоге при реализации соответствующей концепции и обновлении данных сайт не перезагружается полностью. Этот подход к разработке появился, согласно данным из Google и других поисковиков, в 2005 году благодаря Джесси Джеймсу Гарретту. Google указывает на то, что таким термином он описал новый набор технологий.
При применении the AJAX обновлять веб-страницу каждый раз при корректировке информации на ней не придется. Это связано с тем, что обновления относятся только к конкретной части проекта. Google указывает на то, что рассматриваемая технология делает работу в Интернете удобной и экономичней в плане расхода ресурсов и трафика.
Термины и определения
Чтобы лучше разбираться в рассматриваемых технологиях, необходимо запомнить несколько ключевых терминов. Они помогут быстрее понять, что собой представляет the AJAX:
- JavaScript (JS) – язык, на котором пишутся приложения, а также составляются запросы для сервера и отправляются на него. Ответы от серверной части проекта тоже поступают за счет JS. Сюда же можно отнести обновление сайта и разбор полученного клиентом сообщения.
- XML – формат, используемый для хранения и передачи информации. Его все чаще заменяет JSON.
- Асинхронность – ситуация, при которой процесс (действие) выполняется в фоновом режиме, а не в основном потоке. В соответствующем случае пользователь сможет дальше комфортно взаимодействовать с сайтом или веб-сервисом, пока та или иная операция находится на стадии выполнения.
Новичкам этого будет достаточно для того, чтобы понять определение the AJAX. Теперь можно более подробно рассмотреть принципы его функционирования, а также ключевые особенности.
Синхронный запрос
Чтобы лучше понимать изучаемую технологию, необходимо разобраться в принципах обработки сервером получаемых запросов. Существует синхронный вариант. Это обычные запросы. Для получения и формирования сайта они работают так:
- Сначала пользователь в форме обратной связи щелкает на кнопку «Отправить».
- Браузер «замечает», что по кнопке требуется отправить запрос на серверную часть веб-проекта. Он формирует из запроса пакеты и направляет их серверу.
- Сервер получает запрос, а затем обрабатывает его и выдает ответ. Им послужит новый веб-сайт.
- Браузер получает ответ и загружает новую страницу «с нуля». На ней предусматриваются все необходимые пользователю сведения, но присутствует «эффект вспышки». The Google описывает его как нахождение на одном сайте, на котором в определенный момент белеет экран, а затем клиент оказывается на новой странице.
Синхронность здесь выражается отправкой данных большой кучей на сервер, после чего весь веб-сайт также «массово» возвращается клиенту.
Выше можно увидеть наглядный пример синхронности в клиент-серверных моделях. Именно такой вариант функционирования поддерживают всевозможные формы обратной связи: пользователь нажимает на кнопку, а браузер для демонстрации новых данных начинает загружать новую страницу. Но синхронный подход – это всего лишь одна из известных концепций. The Google выделяет еще один вариант.
Асинхронные запросы
Асинхронные запросы – это и есть the AJAX технология. Она работает несколько иначе. Вместо того, чтобы синхронно загружать новую информацию с новой страницей, the AJAX использует обращение к серверу за недостающими данными, после чего добавляет их на веб-сайт. Перезагрузка всей страницы не потребуется.
На примере формы обратной связи Google описывает асинхронные запросы так:
- Пользователь заполняет форму и нажимает на кнопку «Отправить».
- Браузер запускает скрипт, который был заранее привязан к кнопке.
- Соответствующий скрипт отправляет запрос на сервер, а затем получает в качестве ответа новую порцию данных от сервера. Сайт не перезагружается. Все операции осуществляются внутри скрипта.
- Скрипт считывает ответ от серверной части и внедряет новую информацию на веб-страницу.
- Сайт не перезагружается, посетитель остается там же, где и был, но только с новыми данными.
Выше – наглядный пример работы рассматриваемой технологии. С его помощью можно быстро понять разницу в синхронных и асинхронных запросах.
Примерами работы the AJAX на сайте могут послужить следующие операции:
- получение списка новых сообщений в чате, не перезагружая весь чат;
- загрузка новых товаров в интернет-магазин;
- получение новых рекламных баннеров;
- сворачивание видео на сервисе «Ютуб» в маленький плеер в углу;
- демонстрация статуса заказа службами доставки.
Ленты в социальных сетях – это тоже результат функционирования асинхронных запросов. Когда пользователь пролистывает их до конца, сервер получает новый the AJAX-запрос, после чего загружает очередной «блок» новостей и постов.
Преимущества и недостатки
Перед тем как более детально изучать рассматриваемую технологию, стоит сначала разобраться в ее преимуществах и недостатках. Это поможет понять, стоит ли внедрять асинхронные запросы на тот или иной веб-портал.
К сильным сторонам the AJAX Google относит:
- Экономию трафика и уменьшение общей нагрузки на серверную часть проекта. При грамотной реализации the AJAX в несколько раз снижает нагрузку на сервер. Все страницы сайта обычно генерируются по одному шаблону, включая неизменные компоненты («подвалы», «шапки», «навигационные панели»). Для их генерации необходимо обращаться к различным файлам, время на обработку скриптов (иногда – на обращение к запросам базы данных). Все эти операции удастся «опустить», если заменить полную загрузку сайта генерацией и передачей лишь определенной ее части.
- Ускорение реакции со стороны интерфейса. Google связывает это с тем, что загрузка части веб-сервиса всегда быстрее, чем полноценное обновление. Пользователь практически моментально сможет увидеть результат своих действий, причем без характерного мерцания сайта.
- Поддержку возможностей для интерактивной обработки. Пример – в процессе ввода поискового запроса в Google на экране выводится подсказка с возможными вариантами его продолжения. На большинстве веб-страниц в процессе регистрации клиент вводит имя и сразу же видит, доступно ли оно для использования или нет. The AJAX удобно использовать при написании чатов, административных панелей, а также иных инструментов, которые отвечают за вывод меняющихся время от времени данных.
- Отсутствие остановки мультимедиа. Google указывает на еще одно преимущество the AJAX JS – веб-портал не будет перезагружаться при применении технологии, плеер продолжит свою работу. Именно поэтому упомянутый инструмент представляет ценность для аудио- и видеохостингов.
Google отмечает, что у изучаемой технологии существуют не только преимущества, но и недостатки:
- Отсутствие интеграции со стандартными браузерными инструментами.
- Недоступность поисковикам динамически загружаемого содержимого.
- Усложнение всего проекта. Этот недостаток Google характеризует перераспределением логики обработки информации: осуществляется выделение и частичный перенос на сторону клиента процессов первичного форматирования информации. Это делает контроль за целостностью форматов и типов более сложным.
- Необходимость включения в браузере JavaScript. Из соображений безопасности, как говорит Google, JS может быть отключен. Также стоит учитывать, что the AJAX-страницы труднодоступны неполнофункциональным браузерам, веб-архивам, а также роботам.
- Проблемы с отображением нестандартных кодировок. Этот недостаток встречается лишь в некоторых сценариях the AJAX-скриптов.
- Низкая скорость при «грубом» программировании. Если рассматриваемого типа запросов на одном сайте много, и по каждому клику подгружается список, страница становится медленнее «традиционной».
- Плохая работа на ненадежных соединениях. Если связь часто теряется, обычную веб-страницу можно просто перезагрузить. Google отмечает, что в случае с the AJAX-сайтом пользователю нужно будет перезагружать все с самого начала, а затем искать, где он остановился. Параллельная работа в соответствующей ситуации – это минус, а не плюс. API истории помогут устранить данный недостаток.
- Риски, связанные с фабрикацией запросов другими страницами. Google указывает на то, что результат работы рассматриваемой технологии может выступать в качестве JS-кода (обычно – JSON). XMLHttpRequest действует только в пределах одного домена, а тег script – нет.
The AJAX запрос, несмотря на ряд недостатков и недочетов, все равно остается популярной и удобной технологией.
Знакомство с XMLHttpRequest
С основными особенностями изучаемой технологии разобраться удалось. Теперь можно написать с ее использованием несколько команд. Google указывает на то, что перед началом разработки необходимо изучить объект XMLHttpRequest. Это ключевой элемент будущих запросов.
XMLHttpRequest (XHR) – это объект, встроенный в браузер. Он необходим для отправки HTTP-запросов на серверную сторону и дальнейшего получения информации в ответ. Этот компонент поддерживается всеми современными браузерами.
Google указывает, что у XHR поддерживаются следующие методы:
| Abort() | Отмена текущего запроса |
| getAllResponseHeaders() | Возврат полного списка HTTP-заголовков в виде строчки |
| getAllResponseHeader(имя) | Возраст значения указанного заголовка |
| Open (метод, URL, async, имя_пользователя, пароль) | Отвечает за определение метода, URL и других опциональных параметров запроса. Async определяет, происходит ли работа в асинхронном режиме. |
| Send(метод) | Отправка запроса на имеющийся сервер |
| setRequestHeader (label, value) | Добавление к запросу HTTP-заголовка |
The XML также поддерживает у своего класса следующие свойства:
| Onreadystatechange | Обработчик события, которое происходит при каждой смене состояния объекта. |
| ReadyState | Отвечает за возврат текущего состояния объекта: 0 – не инициализирован, 1 – открыт, 2 – отправка информации, 3 – получение данных, 4 – информация загружена. |
| responseText | Текст ответа на запрос. |
| responseXML | Текст ответа на запрос, представленный XML. Позже его можно распарсить при помощи DOM. |
| Status | Возврат HTTP-статуса в виде числа (404 – «Not Found», 200 – «OK» и так далее). |
| statusText | Возвращение статуса в виде строки. Запись выводится по аналогии с предыдущим вариантом, но без числа. |
Теперь можно разобрать несколько примеров работы the AJAX на сервере. Эта информация поможет быстрее освоить рассматриваемую технологию.
Отправка запроса и получение ответа
Перед выполнением the AJAX-связи между клиентом и сервером необходимо создать экземпляр объекта XHR. Для этого используется команда:
Для отправки запроса на сервер, как уверяет Google, необходимо создать экземпляр созданного объекта запроса через метод open():
Файл может иметь любой тип – .xml, .txt и так далее. Допускается также использование файлов скриптов на стороне сервера, которые смогут выполнить разнообразные действия.
Для отправки «команды» на серверную сторону потребуется метод send():
Google говорит о том, что этот метод принимает необязательный параметр the body. С его помощью получается указать request-тело. Такой прием используется в основном для конструкций the HTTP POST. Связано это с тем, что the GET не имеет тела – у него поддерживаются только заголовки.
Метод the GET, согласно Google, используется для того, чтобы отправлять на серверы небольшие объемы данных. The POST подходит для крупных информационных массивов. Пример – данные электронной формы.
В методе the GET, как говорит Google, информация отправляется в виде URL-параметров. В POST данные передаются как часть тела HTTP-запроса. Они не будут отображаться в URL.
Выполнение the AJAX GET-request
Далее предстоит познакомиться с принципами реализации GET и POST. Google указывает на то, что первая команда используется для получения/извлечения некоторых сведений с сервера, не требующих изменений в базе данных. Пример – выборка результатов поиска на основе того или иного термина.
Вот наглядный пример того, как сделать GET-request при помощи рассматриваемой технологии в JavaScript:
Google подчеркивает, что, когда request является асинхронным, метод send() вернется сразу после отправки соответствующей команды на обработку. Это значит, что сначала требуется проверить местоположение ответа в жизненном цикле. Для этого, согласно Google, используется свойство readyState объекта XHR. Это целое число. Оно указывает на состояние HTTP-request. Ниже можно увидеть возможные значения свойства readyState:
Кроме GET есть еще один вариант request – POST. Пример его выполнения также предстоит изучить каждому веб-программисту для понимания принципов работы рассматриваемой технологии.
Выполнение AJAX POST
Google говорит о том, что POST используется в основном для отправки данных форм на веб-сервер. Вот один из таких примеров:
Если не использовать FormData для отправки данных формы при ее отправке на сервер в виде request-строки (request.send), Google говорит о необходимости явной установки заголовка в request. Делается это при помощи метода setRequestHeader:
Теперь в общих чертах понятно, что собой представляет AJAX запрос, а также как его составить. Здесь можно увидеть изученный материал в наглядной форме. А лучше работать с клиент-серверными моделями пользователям помогут дистанционные компьютерные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
