JavaScript - Назначение и применение AJAX при создании сайтов

Содержание:
  1. Знакомство с технологией AJAX
  2. Как расшифровывается аббревиатура AJAX
  3. Преимущества технологии AJAX
  4. Комментарии

Урок, рассматривающий понятие, назначение и преимущества технологии ajax, а также то, что скрывается под его аббревиатурой.

Знакомство с технологией AJAX

Перед тем как перейти к рассмотрению понятия AJAX выясним то, как пользователь (браузер) получает некоторую страницу.

Процесс получения браузером страницы с сервера
Процесс получения браузером страницы с сервера

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

Например, пользователь, прочитав некоторую страницу, заинтересовался фотографиями, представленными на ней. Изначально на странице доступны только 4 фотографии (миниатюры). Для того чтобы пользователь смог посмотреть другие фотографии, ему, например, необходимо нажать на кнопку "Далее".

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

Процесс получения информации с сервера без AJAX
Процесс получения информации с сервера без AJAX

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

С использованием AJAX серверу не надо посылать всю страницу, он может послать Вам только те кусочки информации, которые Вам нужны, в данном случае это изображения.

Процесс получения информации с помощью AJAX
Процесс получения информации с помощью AJAX

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

Как расшифровывается аббревиатура AJAX

С технической точки зрения AJAX – это асинхронный JavaScript (Asynchronous JavaScript) и (And) XML.

Что означает аббревиатура AJAX
Что означает аббревиатура AJAX

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