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

Ukrainian (українська мова) translation by Andy Yur (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, обов'язково ознайомтеся з наступними ресурсами: