AJAX: короткий лікнеп в HTTP-запити без оновлення сторінки

Дорогі друзі,

цим постом ми відкриваємо офіційний блог CMS DataLife Engine. У вільні від роботи над новою версією вашої улюбленої CMS години ми будемо публікувати тут матеріали про індустрії веб-розробки, хороших і поганих тренди, мануали, керівництва та лайфхаки на DLE і бог ще знає що

Цим блогом ми хочемо вирішити два завдання: створити живу неформальну майданчик для комунікації з командою CMS DataLife Engine з одного боку, і дати вам ще більше корисної інформації про DLE зокрема, і розробки в цілому. Ви можете, не соромлячись пропонувати цікаві теми для публікацій в коментарях. Висвітлимо, навчимо, розповімо. Також ви можете відвідати нашу офіційну сторінку в соціальній мережі Вконтакте, де ми також будемо публікувати багато різних і цікавих новин зі світу IT.

У своєму першому пості ми хотіли б поговорити про таку чудову технології AJAX. Ви напевно помічали це слово на нашій «коробці»? Давайте ж розберемося, що це таке і навіщо він потрібен.

Що таке AJAX?

Що з себе представляв Інтернет у вже далеких 90-х? Набір статичних HTML-сторінок. Завданням веб-сайту було просте інформування відвідувача, без будь-якої комунікації.

Поступово, сайти ставали все більш інтерактивними. З’явилися форми і користувальницькі дані стали оброблятися найпростішими CGI-скриптами.

Як це працювало? Користувач вводив дані в форму, натискав на кнопку і його браузер відправляв ці дані в HTTP-запиті до сервера (в більшості випадків в ролі сервера виступав Apache). Після отримання запиту Apache обробляв його і передавав дані користувача скриптів, які, зробивши з ними всі необхідні операції (наприклад, додавши інформацію в базу даних, або надіславши E-mail), віддавали оновлену сторінку Apache, який, у свою чергу, відправляв її користувачеві по HTTP.

Якщо для вас слово «протокол HTTP оповите мороком містицизму, то поспішимо як можна швидше його розвіяти. HTTP являє собою всього лише набір текстової інформації, оформленої за певними правилами.

Наприклад:
GET /lastnews HTTP/1.1
Host: dle-news.ru
User-Agent: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9b5) Gecko/2008050509 Firefox/3.0b5
Accept: text/html, text/plain, image/gif
\n\n
Та частина HTTP-запиту, яка до двох переносів рядка “\n \n” називається заголовком-запиту, а та, що після – тілом.

В даному прикладі браузер не передає ніяких даних, а просто запитує у dle-news.ru сторінку з новинами (lastnews). У заголовку User-Agent браузер повідомляє серверу про те, хто він такий, а в заголовку Accept – типи даних, які він розуміє. Іншими словами, браузер говорить серверу щось на кшталт: «Гей, сервер! Дай мені сторінку /lastnews, мене звуть Firefox і я вмію читати текст, HTML і картинки». В аналогічному відповіді сервер передає браузеру вміст сторінки або помилку «404» (сторінку не знайдено).

Користувальницькі дані в HTTP-запиті передаються двома способами:

  • в заголовку запиту (метод GET)
  • в тілі запиту, тобто після двох переносів рядка \n \n (метод POST)

Передача даних методом GET в заголовку виглядає наступним чином:
GET /somepage?name=ivan HTTP/1.1
У цьому прикладі браузер повідомляє серверу, що користувача звуть Іван. Найімовірніше, ці дані були введені з форми. Подібний запит формує ваш браузер кожен раз, коли ви натискаєте на кнопку відправити у формі.

Методом POST:
POST /somepage HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9b5) Gecko/2008050509 Firefox/3.0b5
Accept: text/html, text/plain, image/gif
Content-length: 9
\n\n
name=ivan
Як ми бачимо, різниця між 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 клієнт і сервер обмінюються необхідною інформацією, а генерація оновленої сторінки перекладається з сервера клієнта.

Такий підхід робить можливим створення по-справжньому інтерактивних та «живих» сторінок.

C AJAX ви стикаєтеся буквально кожен день. Ось, наприклад, пошукова рядок google зроблена з використанням AJAX. Ви ще навіть не встигли ввести свій запит до кінця, а google вже виводить вам підказки і довантажує результати без перезавантаження сторінки! Зверніть увагу, що адресний рядок браузера при введенні різних запитів постійно змінюється. А все тому, що кожен раз, як тільки ви вводите новий символ ваш браузер тут же посилає HTTP-запит на сервер.

Підсумуємо все вищесказане. Завдяки грамотному використанню AJAX можна досягти наступних цілей:

  • значне зниження навантаження на сервер (адже замість того, щоб виконувати весь скрипт генерації сторінки, достатньо виконати код обробника запиту)
  • підвищення інтерактивності сторінки
  • зниження навантаження на інтернет-з’єднання

Ми в DataLife Engine дуже любимо AJAX. Адже зниження навантаження на сервер – чи не найважливіший вектор розробки нашого продукту. З використанням AJAX, наприклад, реалізується надсилання коментарів до публікацій. Варто тільки натиснути на кнопку відправки…

…як ваш коментар тут же з’явиться на сторінці без всякої перезавантаження.

AJAX – добро чи…

Зрозуміло, у кожної технології є свої плюси і мінуси. Зокрема, завжди знайдуться люди, які будуть експлуатувати вподобану технологію ну аж надто часто, до місця і не до місця. В результаті, в мережі можна знайти сайти, які буквально безперервно бомблять свої сервера HTTP-запитами, весь час щось оновлюють, подгружают. Інтересу заради, можете подивитися список з’єднань при 10-20 відкритих вкладок в браузері (якщо ви використовуєте windows – введіть у командному рядку «netstat – a»). Ми побачимо, що на якихось портах то і справа відкриваються і зникають з’єднання. Браузер клієнта в 2016 році воістину живе дуже насиченим життям, весь час що відправляє, бере, шарудить, перебудовує, довантажує картинки. Перекладання процесу формування сторінки на клієнта, в поєднанні з повсюдним використанням адаптивного дизайну, призводить до того, що браузер починає їсти занадто багато ресурсів (в першу чергу оперативної пам’яті і інтернет-з’єднання). Та і сервера вже доводиться не солодко від великого числа запитів. А це не є добре.

Тому ми вважаємо, що використовувати AJAX потрібно з розумом, там де це дійсно необхідно. Впроваджуючи нові фічі ми постійно тримаємо в голові питання: «а яке навантаження це дія дасть на сервер? А на клієнта?». Тільки так, похитуючись від думки про клієнта до думки про сервер можна досягти ідеального балансу продуктивності та інтерактивності.
24