AJAX короткий лікнеп в HTTP-запити без оновлення сторінки - DataLife Engine (DLE)
Розділи сайту
Інформація
Авторизація на сайті
Реєстрація на сайті
AJAX: короткий лікнеп у HTTP-запитах без оновлення сторінки
цією посадою ми відкриваємо офіційний блог CMS DataLife Engine. У вільні від роботи над новою версією вашої улюбленої CMS годинник ми будемо публікувати тут матеріали про індустрію веб-розробки, хороші та погані тренди, мануали, керівництва та лайфхаки по DLE і бог ще знає що
У своєму першому пості ми хотіли б поговорити про таку чудову технологію, як AJAX. Ви, напевно, помічали це слово на нашій «коробці»? Давайте розберемося що це таке і навіщо він потрібен.
Що собою представляв Інтернет у вже далеких 90-х? Набір статичних HTML сторінок. Завданням веб-сайту було просте інформування відвідувача без будь-якої комунікації.
Поступово сайти ставали все більш інтерактивними. З'явилися форми і дані користувача стали оброблятися найпростішими CGI-скриптами.
Якщо вам слово «протокол HTTP» оповите мороком містицизму, то поспішимо якнайшвидше його розвіяти. HTTP є лише набір текстової інформації, оформленої за певними правилами.
Та частина HTTP-запиту, яка до двох переносів рядка "\n \n" називається заголовком-запиту, а та, що потім – тілом.
Дані користувача в HTTP-запиті передаються двома способами:
- у заголовку запиту (метод GET)
- у тілі запиту, тобто після двох переносів рядка \n \n (метод POST)
У цьому прикладі браузер повідомляє сервер, що користувача звуть Іван. Найімовірніше ці дані було введено з форми. Подібнийзапит формує ваш браузер щоразу, коли ви натискаєте на кнопку відправити у формі.
Як бачимо, різниця між GET і POST негаразд велика. До вже відомих заголовків додався «Content-length», що повідомляє розмір запитів, що надсилаються в тілі, в байтах.
Поштовхом до розвитку інтерактивності Інтернету стала поява в середині 90-х витонченої мови PHP, на плечі якої було покладено обов'язок обробки даних і генерації HTML сторінок. Взаємодія користувача та сайту будувалася за схемою:
- Користувач вводить дані у форму
- Браузер відправляє HTTP-запит
- Сервер передає дані PHP
- PHP робить обробку даних, генерує оновлену сторінку і передає їх серверу
- Сервер відправляє сторінку браузеру в HTTP-відповіді
- Браузер обробляє отриману інформацію та виводить користувачу оновлену сторінку
Для потреб Інтернету епохи «Web 1» цього було цілком достатньо. Проте Інтернет розвивався. І чим більше людей у нього приходило, чим більше спільнот та сервісів ставало, тим більшої інтерактивності вимагали користувачі.
Паралельно з розвитком серверної мови PHP тихо і непомітно йшов розвиток іншого вкрай корисного інструменту - JavaScript. На відміну від PHP, код JavaScript (JS) виконується повністю на стороні клієнта, в браузері. Сервер пересилає JS-код «як є». Спочатку JS використовувався лише як кумедний веб-помічник, покликаний зробити сторінки трохи більш живими, додати віконців, що спливають, рухливих.елементів тощо. І JS успішно справлявся з цим завданням, перебудовуючи HTML сторінку «на льоту». Варто відзначити, що сьогодні JavaScript проник і на сервер, у формі гучної платформи node.js, що останніми роками, але це вже зовсім інша історія.
Якоїсь миті, веб-розробники поставили цілком логічне питання: а навіщо, власне, щоразу неодмінно оновлювати ВРЮ сторінку. Адже це по-перше створює додаткове навантаження на сервер, якому доводиться заново виконати весь скрипт генерації сторінки, а по-друге, робить спілкування користувача з сервісом значно повільнішим, і по-третє змушує користувача завантажувати більше інформації, з'їдаючи частину інтернет-каналу.
Комплекс технологій, що забезпечують взаємодію користувача з сервісом без перезавантаження сторінки та отримав назву AJAX (Asynchronous javascript and XML). Заради справедливості, слід зазначити, що AJAX – це скоріше ідеологія взаємодії, аніж якась конкретна технологія. З технічного погляду можливі різні варіанти його реалізації.
Отже, на заміну наведеної вище «класичної» схеми приходить AJAX:
- У відповідь на HTTP-запит користувача сервер надсилає йому згенеровану засобами PHP (або іншої мови) HTML-сторінку
- За необхідності (підвантаження новин, відправлення даних з форми) браузер користувача надсилає HTTP-запит у фоновому режимі, не перезавантажуючи сторінку
- Обробник на сервері отримує дані, обробляє їх та відправляє потрібну інформацію назад клієнту
- Браузер отримує відповідь на свій запит і javascript «на льоту» перебудовує HTML-сторінку (наприклад, додаючи новини, що тільки що надійшли)
Такий підхід уможливлює створення по-справжньому інтерактивних та «живих» сторінок.
Підсумуємо все вищесказане. Завдяки грамотному використанню AJAX можна досягти таких цілей:
AJAX – добро чи…
Зрозуміло, у всякої технології є свої плюси та мінуси. Зокрема, завжди знайдуться люди, які експлуатуватимуть технологію, що сподобалася, ну вже занадто часто, до місця і не до місця. В результаті, в мережі можна виявити сайти, які буквально безперервно бомбардують свої сервери HTTP-запитами, постійно щось оновлюють, підвантажують. Заради інтересу, можете переглянути список з'єднань при 10-20 відкритих вкладках у браузері (якщо ви використовуєте windows – введіть у командному рядку «netstat – a»). Ми побачимо, що на якихось портах постійно відкриваються і зникають з'єднання. Браузер клієнта в 2016 році справді живе дуже насиченим життям, весь час щось відправляє, приймає, шарудить, перебудовує, підвантажує картинки. Перекладання процесу формування сторінки на клієнта, у поєднанні з повсюдним використанням адаптивного дизайну, призводить до того, що браузер починає їсти надто багато ресурсів (насамперед оперативної пам'яті та інтернет-з'єднання). Та й серверу вже доводиться не солодко від великої кількості запитів. А це не є добре.
Тому ми вважаємо, що використовувати AJAX потрібно з розумом, там, де це дійсно необхідно. Впроваджуючи нові фічі ми постійно пам'ятаємо питання «а яке навантаження ця дія дасть на сервер? А на клієнта? Тільки так, розгойдуючись від думки про клієнта до думки про сервер можна досягти ідеального балансупродуктивності та інтерактивності.