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

0
1084

Данная серия статей нацелена на ознакомление frontend разработчиков с AJAX, весьма важной техникой во фронтенде.
В первой статье мы рассмотрим основы AJAX. Начнем изучать различные темы, связанные с AJAX а также узнаем, как это все работает. Давайте начнем!
На заметку: данная серия предполагает, что вы знакомы с такими frond-end технологиями, как 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 сценарий:

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

Теперь вы можете понять, почему AJAX важен для современных web.
При разработке мощных AJAX приложений, мы в состоянии контролировать объем данных, который загружается с сервера.

Живые примеры AJAX.

AJAX везде. Для демонстрации этого, давайте посмотрим на несколько популярных сайтов.
Взгляните на vk или facebook. Когда прокручиваете страницу до конца, новый контент появляется благодаря AJAX. Также AJAX выполняется, когда вы вбиваете запрос в поисковой строке Google или Youtube . Более того, если вы хотите, то можете отслеживать запросы. Например, в консоле Google Chrome это можно выполнить, нажав правой клавишей и выбрав опцию Log XMLHttpRequests.

Задание запросов.

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

Манипуляции ответами.

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

XML

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

Существует множество онлайн редакторов, которые вы можете использовать для построения XML документа. Мой любимый это XMLGrid.net.
В данном редакторе наш пример будет выглядеть следующим образом:
xml

JSON

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

Также вы можете найти множество онлайн редакторов, я вам посоветую следующие:
JSON Generator
JSON Editor Online
Основанный на JSON Editor Online, предыдущий пример будет выглядеть так:
json

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

Перед тем, как начать использовать AJAX, важно понимать ограничения. В частности, мы упомянем две общие проблемы.
Во-первых, давайте рассмотрим ошибку, которая появляется в консоли Chrome :
error_1
Эта ошибка имеет место, когда запрос указывает на локальный файл. Здесь мы попытались получить доступ к данным, хранящимся в локальном файле (т.е Demo.json), а не на сервере. Для решения этой проблемы, мы можем установить локальный сервер (например, установим XAMPP как локальную среду разработки) и сохраним там указанный файл.
Во-вторых, взгляните на следующую ошибку:
error_2
Это происходит, когда запрашиваются данные на другом домене относительно нашей страницы…
Для решения этой проблемы, W3C предлагает воспользоваться CORS (Cross-Origin Resource Sharing). Обратите внимание, что этот механизм требует, чтобы мы внесли изменения в конфигурацию файла нашего сервера. Для примера, эта страница описывает, как мы можем настроить Apache веб-сервер.
Другой вариант заключается в использовании техники JSONP (JSON с Padding).

Заключение

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя