Введение в AJAX для фронтенд-разработчиков

() translation by (you can also view the original English article)

Данная серия статей нацелена на ознакомление frontend разработчиков с AJAX, весьма важной техникой во фронтенде

В этом первом уроке мы рассмотрим основы AJAX. Мы начнем изучать разные вещи, связанные с этим, узнаем, что такое ajaxx, как это работает, и где лежат его ограничения. Начнем!

Примечание. В этой серии предполагается, что вы знакомы с основными интерфейсными технологиями, такими как HTML и CSS.

Что такое AJAX?

AJAX означает «Асинхронный Javascript и XML». Это не одна, и не новая технология. Фактически, это группа существующих технологий (HTML, CSS, Javascript, XML и т. д.), Которые собираются вместе для создания современных веб-приложений.

С AJAX клиент (то есть браузер) общается с веб-сервером и запрашивает данные. Затем он обрабатывает ответ сервера и вносит изменения в страницу без полной его перезагрузки.

Давайте разберем акроним AJAX:

«Асинхронный» означает, что когда клиент запрашивает данные с веб-сервера, он не останавливается до тех пор, пока сервер не ответит. Наоборот, пользователь может перемещаться по страницам. Как только сервер возвращает ответ, соответствующая функция манипулирует возвращаемыми данными за кулисами.
«Javascript» - это язык, который создает экземпляр запроса AJAX, анализирует соответствующий ответ AJAX и, наконец, обновляет DOM.
Клиент использует XMLHttpRequest или XHR API для отправки запроса на сервер. Подумайте об API (Application Programming Interface) как о наборе методов, которые определяют правила коммуникации между двумя заинтересованными сторонами. Однако учтите, что входящие данные из запроса AJAX могут быть в любом формате, а не только в формате XML.

Как работает AJAX

Чтобы получить представление о том, как работает AJAX, взгляните на следующую визуализацию:

Эта визуализация описывает типичный сценарий, управляемый AJAX:

Пользователь хочет увидеть больше статей, поэтому он или она нажимает на кнопку назначения. Это событие делает вызов AJAX.
Запрос отправляется на сервер. Наряду с запросом могут быть переданы разные данные. Запрос может указывать на статический файл (например, example.json) который находится на сервере. В качестве альтернативы, можно выполнить динамический скрипт (например, functions.php) после чего сценарий обращается к базе данных (или другой системе) для извлечения данных.
База данных отправляет запрошенные статьи на сервер. Затем сервер отправляет их браузеру.
JavaScript анализирует ответ и обновляет определенные части DOM (структуру страницы). Здесь, например, обновляется только боковая панель. Остальные части страницы не меняются.

Имея это в виду, вы можете понять, почему AJAX является важной концепцией для современной веб разработки. Разрабатывая приложения на базе AJAX, мы можем контролировать объем данных, загружаемых с сервера.

Настоящие примеры AJAX

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

Во-первых, подумайте, как работают Facebook и Twitter. Когда вы прокручиваете вниз, новый контент появляется благодаря AJAX. Во-вторых, когда вы голосуете за ответ или вопрос на StackOverflow, так же вызывается AJAX. Наконец, как только вы что-то ищете в Google или Youtube, выполняется несколько запросов AJAX.

Кроме того, если мы хотим, мы можем контролировать запросы. Например, в консоли Chrome мы делаем это, щелкая правой кнопкой мыши и проверяя параметр Log XMLHttpRequests.

Выполнение запросов

Как упоминалось выше, для настройки запроса AJAX мы используем API XMLHttpRequest. Кроме того, jQuery, самая популярная библиотека JavaScript, предлагает несколько функций и методов, связанных с Ajax.

В этой серии мы рассмотрим различные примеры, которые используют простой JavaScript и jQuery для отправки запроса на сервер.

Манипулирование ответами

Когда мы извлекаем данные с веб-сервера, они могут быть в разных форматах. XML, JSON, JSONP, обычный текст и HTML являются возможными форматами данных.

XML

XML (eXtensible Markup Language) - один из самых популярных форматов для обмена данными между приложениями. Подобно HTML, XML использует теги для определения его структуры. Однако обратите внимание, что XML не содержит никаких предопределенных тегов, на самом деле мы настроили XML-документ, указав наши собственные теги. Пример его структуры показан ниже:

      <person>
          <name>Mike</name>
          <surname>Mathew</surname>
          <nationality>Australian</nationality>
          <languages>
              <language>English</language>
              <language>Spanish</language>
              <language>French</language>
              <language>Russian</language>
          </languages>
      </person>

Есть много онлайн-редакторов, которые вы можете использовать для создания XML-документов. Это мой любимый редактор:

XMLGrid.net.

На основе этого редактора наш пример будет выглядеть следующим образом:

JSON

JSON (JavaScript Object Notation) - еще один популярный формат обмена данными. Используя JSON, вышеупомянутая структура XML будет выглядеть так:

      {
        "name"        : "Mike",
        "surname"     : "Mathew",
        "nationality" : "Australian",
        "languages"    :	["English", "Spanish", "French", "Russian"]
      }

Опять же, вы можете найти множество онлайновых редакторов JSON в Интернете. Вот редакторы, которые мне нравятся:

На основе инструмента JSON Editor Online предыдущий пример выглядит так:

Ограничения запросов AJAX

Прежде чем мы начнем использовать AJAX, важно понять его ограничения. В частности, мы упомянем две общие проблемы.

Во-первых, рассмотрим следующую ошибку, которая появляется в консоли Chrome:

Эта ошибка возникает, когда наш запрос указывает на локальный файл. Здесь мы попытались получить доступ к данным, хранящимся в локальном файле (то есть Demo.json), а не на сервере. Чтобы преодолеть эту проблему, мы можем установить локальный сервер (например, настроить XAMPP в качестве локальной среды разработки) и сохранить в нем целевой файл.

Во-вторых, посмотрите следующее сообщение об ошибке:

Это происходит, когда мы запрашиваем данные, расположенные в другом домене относительно нашей страницы (называемые ограничениями политики для тех же источников). Здесь, например, данные хранятся на локальном сервере, а страница хранится на сервере Codepen. К счастью, есть решения этого ограничения.

Одним из решений является использование механизма CORS (Cross-Origin Resource Sharing), предложенного W3C. Обратите внимание, что этот механизм требует внесения некоторых изменений в конфигурационные файлы нашего сервера. Например, на этой странице описывается, как мы можем настроить веб-сервер Apache.

Другой вариант - использовать технику JSONP (JSON with Padding).

Заключение

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

Дальнейшее чтение

Если вы хотите больше узнать о AJAX и Codepen, обязательно ознакомьтесь со следующими ресурсами: