Деградабельний AJAX. Частина 1. Теорія.

Одним з технічних впроваджень, що прийшли з web 2.0 і відділяють його від web 1.0 є AJAX. Зараз є безліч статей, що стосується розробки проектів з використанням AJAX. Та чимало фреймворків, що спрощують роботу з ним. Однак, завжди стороною обходять один момент – робота з AJAX потребує ввімкненого JavaScript. Хоча в 90-95% користувачів все так і є, однак бувають і виключаення. Або випадки коли в деяких альтернативних браузерах компоненти, необхідні для повноцінної роботи JavaScript, відсутні. Живий приклад – gmail, що некоректно працює в браузері konqueror. Не хотілось юи втрачати частку цільової аудиторі (ніхто ж не виключає такий випадок, коли ), оскільки нав’язати потенційному користувачу нічого не можна – вірогідно, він рушить далі в пошуках чогось з меншим функціоналом, однак таким, що не ставить свої вимоги.

Чи можливо з цим боротись?

Досить багато часу я витратив на пошук якого-небудь готового рішення, яке б дозволило уникнути проблеми з користувачами, що навмисно (чи не зовсім) вимикають JavaScript. І як це мене не здивувало, жодної ідеї, жодної реалізації так і не знайшлось. Лише декілька статей про те, що це нікому не потрібно чи то, що не коштує це тих витрат, які вимагає.

Залишилось вигадати щось самому .

Ну по-перше, виникло питання – яким чином можна перевірити, чи працює JavaScript? Логічно, що за допомогою самого скрипта – передаємо браузеру деякий код, який буде давати видимі для серверної частини результати і вже зрозуміло, що JavaScript ввімкнено. Після цього в мене і народилась основна концепція: сервер віддає клієнту код, пристосований для роботи без JavaScript, а клієнт за допомогою JavaScript перетворює цей самій код сторінки на такий, що він працює з AJAX. І звертається до серверної частини, орієнтованої на роботу з AJAX. Якщо ж у клієнта скрипт не виконається, то він отримає повний функціонал, що правда не в такій “чудовій упаковці”.

Тобто нічого неможливого тут нема і не розумію чому тема була не досить добре освітлена в інтернеті і немає вже готового фреймворка.

Вимоги

Однак при цьому для реалізації такого підходу необхідно окреслити вимоги.

1. Зазвичай робота AJAX полягає в довантаженні елементів сторінки, швидких переходах без оновлення всіх елементів, швидкій відправці форм, формуванні елементів управління близьких до встановлених у користувача програм. В основі є обробка кліків на посиланнях і завантаженні відповідних елементів та відправці форм.

2. Якомога менше додаткових елементів на сторінці. Звичайно ж, що проблему всі посилання, форми можна дублювати – одні для звичайної відправки, а інші для асинхронної.. Ну з точки зору здорового глузду це виглядає не дуже добре і користуватись такою системою буде не комфортно. Логічно де тільки можливо використовувати одні й тіж елементи для роботи в з ввімкненим і вимкненим JavaScript.

3. Мінімізація витрат для написання серверної частини. Зрозуміло, що у випадку, коли реалізація деградабельного аяксу буде вимагати витрат більших за гіпотетичний відсоток відвідувачів, яким це може стати в нагоді та змусить обрати саме цю систему, не є економічно вигідним – хіба, що Ви розробник і Вам за таку систему світить дуже добрий заробіток. Хоча і в такому випадку краще економити свій час і сили.

Як додаткові вимоги можна додати: можливіть блокуванння сторінки під час завантаження, попередження про довгий час завантаження. Останні вимоги є опціональними і як на мене дозволяють дуже сильно підняти юзабіліті сайту. Чому? Одна з проблем і переваг AJAX – асинхронність. Однак бувають випадки, коли сторінка має бути заблокована до отримання остаточних даних, з метою зменшення навантаження на сервер і запобігання виконанню зайвих дій. Наприклад, під час відправлення данних з форми на сервер. З асинхронності також виникає проблема неконтрольовантсті потоку даних браузером від сервера. Тобто, іноді буває складно визначити, чи закінчено передачу даних, чи цей проце ще триває, чи можливо взагалі виникла деяка помилка і краще буде перевантажити сторінку.

Анонс

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

Ну а поки що пропоную Вам поміркувати над написаним. Буду радий питанням та зауваженням, оскільки це дозволить зробити наступний матеріал краще та зрозуміліше.