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

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

В первом уроке мы рассмотрим основы AJAX. Узнаем что такое AJAX, его работу и ограничения. Давайте приступим!

Для изучения этих уроков, вы должны знать основные Front-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.
  • Запрос отправляется на сервер. Также вместе с запросом могут быть переданы различные данные. Запрос может указывать на статичный файл (например example.json) который хранится на сервере. Также можно выполнить какой-либо динамичный скрипт (например functions.php), который связывается с базой данных (или другой системой) для извлечения данных.
  • База данных отправляет обратный запрос в виде статьи, на сервер. Затем сервер, отправляет её в браузер клиента.
  • JavaScript анализирует ответ и обновляет определенные части DOM (структуру страницы).

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

Реальные примеры AJAX

AJAX присутствует на многих страницах. Для примера, давайте посмотрим на несколько популярных сайтов, в которых присутствует поддержка AJAX.

Для начала посмотрим на работу Facebook и Twitter. При прокрутке страницы, новый контент будет автоматически подгружен при помощи AJAX. Когда вы оцениваете ответ на вопрос в Stack Overflow, AJAX автоматически меняет его состояние. Когда вы что-то ищите в Google или YouTube, вы посылаете несколько AJAX запросов.

Создание запроса

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

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

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

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

XML

XML (eXtensible Markup Language) является одним из наиболее популярных форматов для обмена данными между приложениями. Подобно HTML, XML использует теги для определения структуры. Тем не менее, у 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 документов.

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

JSON

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

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

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

Пример JSON разметки в редакторе:

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

Прежде чем мы перейдем к практике AJAX, важно разобрать его ограничения.

Первое ограничение. Рассмотрим следующее сообщение об ошибке в консоли Crhrome:

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

Второе ограничение:

Эта ошибка возникает, когда мы запрашиваем данные, которые находятся на другом домене. В этом примере, наши данные хранятся на локальном сервере, в то время как запрос идет на сервер Codepen.

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

В следующем уроке мы перейдем к практическим примерам.

Перевод статьи An Introduction to AJAX for Front-End Designers

Тэги: XMLJSONajax

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.