Абревіатура AJAX (Asynchronous Javascript And XML) звучить громіздко, але вона описує просту концепцію: оновлення частин веб-сторінки без перезавантаження всієї сторінки повністю.
Раніше, якщо вам були потрібні нові дані, доводилося чекати. Ви натискали на посилання. Екран завмирав. Сторінка ставала білою. Потім все завантажувалося заново.
AJAX змінив це правило. Він дозволив браузерам спілкуватися із серверами у фоновому режимі. Ви могли ввести пошуковий запит та миттєво побачити результати. Жодного перезавантаження. Жодного білого екрану. Лише дані.
Це був новим винаходом. Це було поєднання наявних інструментів, використаних новим способом.
Основні технології асинхронного веб-дизайну
AJAX – це не одна технологія. Це – робочий процес. Він спирається на координацію стандартних веб-технологій.
В основі лежить об’єкт XMLHttpRequest. Це вбудована функція JavaScript. Вона дозволяє клієнтським скриптам ініціювати запити HTTP (наприклад, GET або POST) до сервера. Браузер надсилає запит і не чекає на відповідь, перш ніж продовжувати малювання сторінки. Це і є асинхронна частина.
Коли сервер відповідає, JavaScript отримує дані. Він аналізує їх. Він оновлює модель документа (DOM). Користувач бачить зміни, жодного разу не залишивши сторінку.
«AJAX виділяється архітектурою, в якій клієнтський код керує отриманням даних, їх інтерпретацією та адаптацією відображення у реальному часі, без загального перезавантаження чи втрати інтерактивності.»
Довгий час ці дані надходили у форматі XML. Звідси й назва. XML надмірний. Він важкий.
Пізніше змінився JSON (JavaScript Object Notation). JSON легше. Його простіше обробляти JavaScript. Сучасні фреймворки, такі як jQuery та API fetch, зробили управління цими запитами ще простіше. Але основний принцип залишається незмінним: розділити інтерфейс користувача і комунікацію з сервером.
Чому сумісність із браузерами раніше мала значення
На початку доби це було складно.
Не всі браузери підтримували XMLHttpRequest. Або вони реалізовували його по-різному.
Internet Explorer 5 і вище згодом наздогнав конкурентів. За ним пішов Mozilla Firefox. Safari та Chrome приєдналися до цього процесу пізніше. Сьогодні кожен сучасний браузер підтримує ці функції нативно.
Це зближення дозволило розробникам створювати складні взаємодії, які працювали скрізь. Раніше доводилося писати «милиці», щоб змусити код працювати у Firefox, але не в IE. Або навпаки.
Сьогодні фокус змістився на логіку, а не на хакі сумісності.
Реальні програми, що визначають користувальницький досвід
Ви використовували AJAX тисячі разів. Ймовірно, ви навіть не думаєте про це.
Візьмемо Gmail. Коли ви відкриваєте поштову скриньку, ви не перезавантажуєте сторінку, щоб прочитати новий лист. Клієнтська частина завантажує останні повідомлення у фоновому режимі. Ви можете перетягувати, видаляти чи архівувати листи. Сторінка залишається на місці. Дані оновлюються.
Windows Live Hotmail зробив щось подібне ще ранніми днями. Google Maps використовує цю технологію постійно. Ви переміщаєте картку. Браузер запитує нові фрагменти картки. Вони з’являються миттєво. Ви не чекаєте на повне завантаження сторінки.
LiveSearch – класичний приклад. Коли ви вводите ключові слова, пошукова система запитує сервер. Результати випадають у списку. Ви натискаєте на один із них. Сторінка прокручується до результату. Все це відбувається через дзвінки AJAX.
Сфер застосування безліч.
- Динамічні секції коментарів
- форми з автозбереженням
- Біржові тикери у реальному часі
- Нескінченна стрічка новин
Ці функції створюють відчуття «односторінкової програми» (SPA). Сайт поводиться більше як настільний додаток. Він чуйний. Він здається живим.
Зсув у бік односторінкових додатків (SPA)
AJAX проклав шлях SPA.
На традиційному сайті кожен клік означає завантаження нової сторінки. Браузер відкидає старий DOM та будує новий.
У SPA початкова сторінка завантажується один раз. JavaScript обробляє всю навігацію. Він динамічно змінює контент. URL-адреса може змінитися, але сторінка не перезавантажується.
Це вимагає складнішого клієнтського коду. Потрібно керувати станом. Потрібно обробляти маршрутизацію. Але користувальницький досвід перевершує традиційний.
Соціальні мережі покладаються цього. Коли ви публікуєте оновлення статусу, стрічка оновлюється. Завантажується ваше фото профілю. З’являються сповіщення. Жоден із цих процесів не потребує повного перезавантаження.
Спадщина асинхронного обміну даними
Абревіатура AJAX трохи застаріла. Розробники рідко використовують цей термін сьогодні. Ми просто називаємо це “веб-розробкою”.
Але ж технологія живе. XMLHttpRequest значною мірою замінений API fetch. JSON став стандартним форматом даних.
Вплив технології неможливо заперечити. Вона підвищила очікування користувачів. Тепер ми очікуємо на миттєвий зворотний зв’язок. Ми очікуємо на плавні переходи. Ми очікуємо, що веб-програми будуть відчуватися як нативне програмне забезпечення.
Якщо сайт перезавантажується щоразу, коли ви натискаєте кнопку, він здається зламаним. Він здається застарілим.
AJAX довів, що веб може бути більшим, ніж просто статичні документи. Він може стати платформою для складних, інтерактивних програм.
Еволюція цьому не зупинилася. Фреймворки, такі як React, Angular та Vue, побудували свої рішення на цих основах. Вони автоматизують оновлення DOM. Вони керують станом.
Але основна ідея залишається незмінною.
Спілкуйтеся із сервером у фоновому режимі. Оновлення екрана. Рухайте користувача далі.
Ми все ще удосконалюємо цей підхід. Нескінченна прокручування. Спільна робота у реальному часі. Попередній перегляд у реальному часі. Можливості залишаються значною мірою невикористаними.
Що буде далі? Ймовірно, менше кліків. Більше потокової передачі. Більше миттєвості.
Сторінка лишається. Дані рухаються.
AJAX – це не магія. Це компроміс.
Ви отримуєте швидкість. Ви отримаєте плавні інтерфейси. Але ви також отримуєте головний біль.
Найбільша проблема полягає не в коді. Це безпека. А саме – Політика однакового походження (Same Origin Policy, SOP). За промовчанням браузери блокують запити AJAX. Вони взаємодіють лише з доменом, на якому знаходиться користувач. Це запобігає крадіжці даних із сайту вашого банку шкідливим скриптом з evil.com. Це твердий бар’єр.
Але розробникам треба було пробити цю стіну.
На сцену виходить CORS (Cross-Origin Resource Sharing). Це механізм, що дозволяє різним доменам взаємодіяти один з одним. Ви налаштовуєте його на сервері. Якщо ви зробите це неправильно, ви надасте дані ризику. Якщо зробите правильно, ви забезпечите роботу сучасних розподілених програм. Планка висока. Конфігурація має бути суворою.
Потім йде питання історії браузера.
Коли ви оновлюєте сторінку без перезавантаження, URL-адреса не змінюється. Або змінюється, але користувач цього не помічає. Натисніть “Назад”. Нічого немає. Або що гірше, сторінка перезавантажується і втрачає весь стан. Це порушує ментальну модель користувача.
Це потрібно виправити.
Очевидно керуйте стеком історії. Використовуйте HTML5 History API. Додайте стан. Слухайте події popstate. Це втомлює. Це потрібно. До цього люди використовували хешбенги (#! ). Це працювало. Але це було негарно.
Доступність (accessibility) – ще одна пастка.
Динамічний контент не завжди повідомляє програми читання з екрану. Якщо ви замінюєте текст через AJAX, допоміжні технології можуть цього не помітити. Вам необхідно оновлювати атрибути ARIA. Вам потрібно викликати події. В іншому випадку, ви створюєте сайт, який працює тільки для користувачів миші.
Ландшафт змінюється.
fetch витісняє сирі запити XHR. Він використовує проміси. Він чистіший. Він сучасніший. WebSockets додають двонаправлений зв’язок у реальному часі. Вам більше не потрібно опитувати сервер. Ви отримуєте оновлення у режимі push.
Але AJAX залишається фундаментом.
Він запровадив цей патерн. Асинхронний. Модульний. Неблокуючий.
Хмарні технології пішли вперед. Мобільні пристрої захопили ринок. Прогресивні веб-застосунки (PWA) вимагали можливості роботи офлайн і високої швидкості. Усі вони спираються ці базові принципи.
Чи мертвий AJAX? Ні.
Він просто став шаром, що лежить в основі нових інструментів. Машинне відділення.
Розробники, як і раніше, оптимізують його. Вони, як і раніше, дбають про управління станом, який він змусив нас вирішити. Інновації у проектуванні інтерфейсів? Вони збудовані на цьому історичному фундаменті.
Ми постійно покращуємо користувальницький досвід. Мета залишається незмінною.
Швидко. Чуйно. Непомітно.
Але ставки зараз вищі. Безпека стала суворішою. Користувачі чекають на поведінку, схожу на нативну. І код має бути доступним для всіх.
Це незмінний баланс. Процес, який ви ніколи не завершуєте.
