JavaScript - Назначение и применение AJAX при создании сайтов
Урок, рассматривающий понятие, назначение и преимущества технологии ajax, а также то, что скрывается под его аббревиатурой.
Знакомство с технологией AJAX
Перед тем как перейти к рассмотрению понятия AJAX выясним то, как пользователь (браузер) получает некоторую страницу.
![Процесс получения браузером страницы с сервера Процесс получения браузером страницы с сервера](/assets/images/tickets/2015.12/ajax.png)
Процесс получения некоторой страницы во всемирной паутине всегда начинается с того, что пользователь вводит в адресной строке браузера URL или переходит по ссылке, содержащей URL. Браузер получив этот URL, отправляет запрос на веб-сервер. Веб-сервер получив этот запрос, формирует клиенту (браузеру) ответ и отправляет его. Браузер, получив ответ (веб-страницу) от веб-сервера отображает его в своём окне (вкладке).
Например, пользователь, прочитав некоторую страницу, заинтересовался фотографиями, представленными на ней. Изначально на странице доступны только 4 фотографии (миниатюры). Для того чтобы пользователь смог посмотреть другие фотографии, ему, например, необходимо нажать на кнопку "Далее".
Без технологии AJAX, единственным решением в этом случае было бы отправка запроса на сервер и получение точно такой же страницы, но с другими миниатюрами изображений.
![Процесс получения информации с сервера без AJAX Процесс получения информации с сервера без AJAX](/assets/images/tickets/2015.12/page-without-ajax.png)
Этот вариант выглядит непрактично, но этот был единственный способ до появления технологии AJAX. Т.е. вместо того чтобы обновить только нужный блок информации на странице, мы запрашиваем вместо этого новую страницу у сервера. Это приводит к тому, что пользователь ждёт, пока загрузится страница с новыми изображениями, что представляется не очень удобным.
С использованием AJAX серверу не надо посылать всю страницу, он может послать Вам только те кусочки информации, которые Вам нужны, в данном случае это изображения.
![Процесс получения информации с помощью AJAX Процесс получения информации с помощью AJAX](/assets/images/tickets/2015.12/page-with-ajax.png)
На самом деле AJAX это не одна технология, это группа технологий, которые работают вместе для того чтобы Вы могли в любой момент времени запросить любую информацию с сервера и отобразить её на странице без перезагрузки.
Как расшифровывается аббревиатура AJAX
С технической точки зрения AJAX – это асинхронный JavaScript (Asynchronous JavaScript) и (And) XML.
![Что означает аббревиатура AJAX Что означает аббревиатура AJAX](/assets/images/tickets/2015.12/ajax-abbreviation.png)
A - это первая буква слова "Asynchronous" (Асинхронный). Это означает то, что клиент может запросить любую часть информации в любое время и ему не нужно ждать пока она придёт.
J - это первая буква слова JavaScript. Это основная технология, которая делает всю эту "магию". JavaScript управляет событиями, делает запросы на сервер, и выполняет изменение (обновление) необходимой части документа. JavaScript общается с сервером с помощью методов, которые используют запросы XHR (XMLHttpRequest) или XML HTTP. XHR позволяет браузеру посылать (send) и получать (receive) данные с сервера. Вот что означает буква X в названии технологии AJAX.
Не смотря на то что в названии объектов XMLHttpRequest и XML HTTP используется слово XML, они позволяют работать с данными любых форматов (текстовый, HTML, JSON, XML).
Таким образом, AJAX - это термин для технологий, позволяющих создать страницу, в которой любые её части могут обновляться в фоновом режиме с помощью данных, полученных с сервера.
Преимущества технологии AJAX
Применение технологии AJAX на странице позволит привнести в неё следующие преимущества:
- уменьшить трафик (из-за сокращения размера данных передаваемых между сервером и браузером);
- снизить нагрузку на сервер (т.к. не требуется генерировать различные повторяющиеся элементы на странице, а только тот контент, который необходимо передать);
- ускорить отзывчивость интерфейса страницы и его мерцание (из-за того что нет необходимости в полной перезагрузке страницы);
- улучшить интерактивность (т.е. более удобно вести диалог (осуществлять взаимодействие) с пользователем).
Комментарии: 0