От автора: данная серия статей призвана познакомить front-end дизайнеров и начинающих разработчиков с технологией AJAX, основной front-end технологией. В первом уроке мы затронем основы AJAX, начнем узнавать различные детали данной технологии, узнаем, что это такое, как работает и какие есть ограничения.
Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.
Что такое AJAX?
AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.
С помощью AJAX клиент (браузер) общается с сервером и запрашивает у него данные. Полученный ответ обрабатывается, и в станицу вносятся изменения без полной ее перезагрузки. Разберем аббревиатуру AJAX:
«Асинхронный» означает, что когда клиент запрашивает данные с сервера, браузер не зависает, пока не получит ответ. Пользователь наоборот может перемещаться по страницам. Как только сервер вернул ответ, в фоновом режиме ответ начинает обрабатываться соответствующими функциями.
«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.
Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.
Как работает AJAX
Чтобы понять основной принцип работы, давайте взглянем на картинку ниже:
На картинке описан стандартный AJAX сценарий:
Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.
Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.
База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.
JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.
Помня это, вы поймете, почему AJAX настолько важная технология в современном интернете. Разрабатывая приложения под управлением AJAX мы можем контролировать большие объемы данных, загружаемых с сервера.
Живой пример на AJAX
AJAX сейчас уже повсюду. Чтобы убедить вас в этом мы коротко рассмотрим несколько популярных сайтов, которые вовсю используют данную технологию.
Сперва рассмотрим принципы работы Facebook* и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.
Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.
Как создать запрос
Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.
Управление запросами
Вытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.
XML
XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 пример сверху будет выглядеть так:
|
1 2 3 4 5 6 |
{ "name" : "Mike", "surname" : "Mathew", "nationality" : "Australian", "languages" : ["English", "Spanish", "French", "Russian"] } |
В сети также полно онлайн JSON редакторов. Мне нравятся два редактора: JSON Generator, JSON Editor Online
В JSN редакторе наш пример будет выглядеть так:
Ограничения в AJAX запросах
Перед тем, как начать использовать AJAX, необходимо узнать про ограничения. Мы рассмотрим только две проблемы.
Первая – ошибка в консоли Chrome:
Ошибка появляется, когда запрос ссылается на локальный файл. В этом примере мы хотели получить доступ к данным из локального файла (Demo.json), который хранится не на сервере. Для устранения данной проблемы можно установить локальный сервер и хранить файлы там. Вторая проблема:
Ошибка появляется, когда данные из запроса хранятся на другом домене относительно нашей страницы (ошибка известна как правило ограничения домена). В нашем примере данные хранятся на локальном сервере, а страница хранится на сервере Codepen. К счастью, данные ошибки устранимы.
Один из способов это CORS от W3C. Но данный механизм требует внести изменения в конфигурацию файлов на сервере. К примеру, на данной странице описано, как настроить Apache сервер. Другой способ это JSONP (JSON с набивкой).
Заключение
Данный обзор дал вам представление о том, что такое AJAX, где вы уже с ним могли сталкиваться, а также какие существуют потенциальные проблемы. Также мы рассмотрели самые популярные форматы обмена данными. В следующей статье мы рассмотрим работающий пример. Увидимся!
Автор: George Martsoukos
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
