Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

24 усталені практики при реалізації AJAX

by
Read Time:14 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Двічі на місяць ми переглядаємо деякі улюблені пости наших користувачів з усіх опублікованих на Nettuts+.

Реалізація технології AJAX (* Asynchronous JavaScript And XML – асинхронний JavaScript + XML. Тут і надалі примітка перекладача) може принести вам як успіх, так і провал. Виконайте її належним чином, і користувачі вашого додатка будуть захоплюватися забезпечуваною нею гладкістю досвіду взаємодії користувача, тоді як у випадку, якщо ви напартачите з нею, то отримаєте доброго прочухана. Нижче наведено 24 поради з реалізації технології AJAX у вашому веб-застосуванні.


1. Зрозумійте, про що йде мова

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

Нижче наведено список обов'язкових для вивчення статей, щоб увести вас у курс справи:


2. Застосовуйте для відповідного сценарію (* опис певного набору послідовних взаємодій між користувачем та системою для досягнення певної мети)

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

Прикладом відповідного сценарію могли би бути випадки, коли ви маєте велику кількість даних на стороні сервера і хочете оновити UI (* user interface – користувальницький інтерфейс) у тому випадку, коли користувачеві потрібен доступ до них або ж коли ви хочете емулювати (* імітувати функції іншого об'єкта) відповідний десктопний додаток та обробляти все асинхронно. Надзвичайно хибний сценарій – коли кожна сторінка статичного сайту завантажується за допомогою AJAX тільки через те, що ви вмієте нею користуватися. Будьте пильними у цьому питанні.


3. Навчіться реалізовувати її самостійно (* без допомоги бібліотек)

Перед тим як взятися за написання коду (* за допомогою бібліотек), розберіться, як реалізувати  AJAX самостійно. Бібліотеки можуть зекономити вам багато часу, потрібного для створення незалежного від браузера коду, проте якщо код перестає працювати, то вам може дуже стати в пригоді знання того, як застосовувати AJAX без допомоги бібліотек.

Я дуже рекомендую вам посібники Jeffrey з реалізації запитів  AJAX за допомогою нативного коду JavaScript тут і тут.


4. Скористайтеся бібліотекою

Тільки-но ви навчились реалізовувати функціональні можливості AJAX за допомогою нативного коду JS, прийшов час вам перейти до використання бібліотеки JavaScript, що надає надійну підтримку AJAX. Підійде будь-яка з головних бібліотек на зразок jQuery, Prototype або MooTools.

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

Нижче наведено деякі з наших улюблених, що містять типові для AJAX функціональні можливості:


5. Добре засвойте бібліотеку

Одразу після того як розібралися з виконанням запитів AJAX за допомогою вибраної вами бібліотеки, настав час рушити далі та майстерно оволодіти нею. Можливо це звучить надмірно, проте є велика різниця між цими двома етапами.

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

Ось вам добірка деяких ресурсів для вивчення:


6. Надайте користувачам зворотний зв'язок

Tutorial ImageTutorial ImageTutorial Image

Одна з головних причин, через яку люди не хотіли використовувати AJAX у минулому, – те, що вони загалом-то не могли повідомити про те, коли додаток оновлює свої дані. Ця вимога є невід'ємним компонентом користувальницького досвіду, потреба виконання якої ще більш доречна при використанні AJAX.

Отже пам'ятаєте, що навіть при виконанні самої незначної дії потрібно надавати користувачам зворотний зв'язок, повідомляючи їх про те, що їх дію сприйнято. Користувач натиснув кнопку? Дайте йому знати про це!


7. Використовуйте відповідні події та обробники

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

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

При роботі з jQuery ви би скористалися обробниками подій success та error. Також є обробники інших подій на зразок complete та beforeSend, якими варто користатися у відповідних випадках.

.


8. Виберіть відповідний формат для певного завдання

Те, що XML присутня в абревіатурі, зовсім не означає, що ви зобов'язані передавати дані по мережі тільки у цьому форматі. Ви запросто можете вибирати будь-який формат, що вам до вподоби. JSON? Жодних проблем. XML? Само собою зрозуміло. HTML? Аякже. Простий текст? Безсумнівно.

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


9. Вивчайте всі доступні вам джерела з цієї теми

Незважаючи на те що AJAX відносно стара технологія, вона як і раніше нестабільна. Кожний день додаються надзвичайні нові можливості, а також часто виходять книги, у яких дається вичерпне пояснення цієї технології. Продовжуйте читати як блоги (на зразок цього), так і книги, щоб залишатися в курсі останніх досягнень в області AJAX.

Ось список найбільш відвідуваних мною блогів та/або найбільш читаних книг:


10. Постійно експериментуйте

Прочитання гори книг та статей – це чудово, проте для засвоєння матеріалу потрібно буде засучити рукава та писати якийсь власний код. Повірте, ви набагато глибше та швидше засвоїте тему, якщо після прочитання невеликого фрагменту будете писати якийсь відповідний код для більш ґрунтовного розуміння розглядуваної теми, а не завдяки постійному читанню без написання будь-якого коду.


11. Використовуйте Firebug

Tutorial ImageTutorial ImageTutorial Image

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

Нижче наведено ще деякі рекомендовані ресурси:


12. Пам'ятайте про користувачів, що використовують старі браузери

Якщо тільки ваш додаток не є чимось подібним до Google Maps, завжди є сенс надати користувачам його запасний варіант, завдяки чому користувачі як і раніше зможуть його використовувати (* важко уявити альтернативний варіант Google Maps). Показовим прикладом могли би бути численні веб-додатки, у яких взаємодії всіх їх користувачів опосередковуються AJAX у випадку, якщо їх браузери мають відповідні можливості, і які використовують запасний варіант у вигляді звичайної HTML-версії інакше.


13. Можливість додавання закладки (* посилання на адресу переглянутої сторінки, що зберігається для прямого звернення до неї у наступних сеансах роботи)

У стандартного користувача є звичка робити закладки, і ви обов'язково повинені враховувати цю особливість при створенні додатка. При виконанні запитів за допомогою AJAX вміст адресного рядка не оновлюється, тобто якщо користувач хоче додати до закладок сторінку, вміст якої було завантажено динамічно за допомогою AJAX, він/вона додасть туди початкову сторінку, а не оновлену. Це значний недолік.

На щастя, є декілька способів його подолання. Нижче перераховано вибрані мною статі, які допоможуть вам у цьому:


14. Використовуйте відповідні анімаційні ефекти

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

Ви можете дізнатися про те, як використовувати jQuery для створення елегантних підтримуваних головними браузерами анімацій тут.


15. Додайте можливість використання кнопки повернення на попередню сторінку

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

Нижче перераховано статі, які повинні допомогти вам у цьому питанні:


16. Вносіть зміни до DOM розумно

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

В останньому випадку ми отримаємо гіршу продуктивність, оскільки збільшується кількість змін, які потрібно внести.

Таким чином, для порції HTML на зразок наступної:

замість цього:

робіть так:

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


17. Коментуйте свій код

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

Ви зовсім не зобов'язані коментувати кожний крихітний фрагмент вашого коду; достатньо всього-на-всього прокоментувати важливі моменти.

Це занадто!

Цей варіант набагато краще, оскільки значна частина коду говорить сама за себе.


18. Приймайте зважене рішення при виборі типу запиту

Строго кажучи, це порада, що дається в цілому при створенні додатка, а не конкретно при реалізації AJAX, проте зверніть особливу увагу на тип виконуваного вами запиту: GET або POST. Об'єкт XMLHttpRequest надає вам можливість виконання обох, проте вибір за вами.

Як повинно бути зрозуміло з назв, запит за методом GET використовується для отримання даних з ресурсу, тоді як запит за методом POST призначається для відправлення даних для оброблення. При використанні запиту AJAX за методом GET, як і при роботі зі звичайним GET-запитом, вам потрібно буде передавати дані, потрібні для виконання запиту, у якості частини самої URL-адреси вручну, на відміну від використання запиту за методом POST, при якому дані відправляються автоматично. Також зверніть увагу на те, що запити за методом GET гешуються автоматично, у той час як запити за методом POST – ні.


19. Використовуйте відповідну IDE (* інтегроване середовище розроблення)

Tutorial ImageTutorial ImageTutorial Image

Коли мова заходить про використання JavaScript, користуйтеся доступними благами та не обмежуйтеся використанням тільки звичайного блокнота. Рівень вашою продуктивності різко підвищиться, якщо ви будете використовувати відповідну IDE, особливо ту, в якій є підтримка потрібної вам бібліотеки JavaScript.

Для прихильників PC:

Для моїх франтуючих побратимів:


20. Приєднуйтеся до товариства

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

Як говорить Jeff, тільки тоді ви розумієте щось, коли обучили цьому когось ще.


21. Налагодьте використовувані вами часи відгуку (* час, потрібний комп'ютеру для відповіді на запит)

Під часом відгуку я маю на увазі тільки один момент: час, за який у відповідь на дії користувача виконується запит AJAX. Уявіть, що ви набираєте у полі для вводу тексту, у якому використовується AJAX для отримання запропонувань можливих варіантів від сервера. Часом відгуку був би час між натисненням клавіши та виконанням AJAX-запиту. Якщо цей відрізок замалий, то буде виконуватися безліч запитів для кожної букви фрази, яку потрібно знайти. Якщо цей відрізок завеликий, то користувач буде байдики бити, гадаючи, що ж він зробив не так.

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


22. Використовуйте індикатор стану

Tutorial ImageTutorial ImageTutorial Image

Це додаток до вищезазначеної поради, проте не менш важливий. Користувачі, що звикли до принципів роботи десктопних застосувань або звичайних веб-додатків, будуть збиті з пантелику при роботі з веб-застосуваннями, у яких використовується AJAX. Хоча наявність оповіщення користувачів про внесену зміну – це чудово, вам також потрібно впевнитися у тому, що вони спочатку оповіщені про те, що запит було ініційовано.

Для цього і потрібні індикатори стану. Це ті GIF-зображення з елементами, що обертаються або коливаються, які ви бачите у додатках. За своєю функцією вони подібні курсору у вигляді піскового  годинника, що використовується у десктопних операційних системах.

Ось надзвичайний невеликий інструмент, що дозволяє створювати потрібний вам індикатор.


23. Пам'ятайте про надзвичайні можливості, надавані JSONP

Часто при створенні мешапу (* інтернет-додаток, що поєднує дані з декількох інтерактивних джерел) вам може знадобитися доступ до даних, отримуваних з інших сайтів за допомогою запитів AJAX. Це суперечить крос-доменним обмеженням, що накладаються більшістю браузерів. У цьому випадку замість того щоб користуватися екзотичними рішенням на зразок маскування або використання проксі (*  програма кешування відповідей на запити клієнтських частин застосувань, які посилають в Інтернет або в WWW, що працює на прикладному рівні. Копії отриманих веб-сторінок, файли тощо зберігають якийсь час на сервері, і після одержання наступних аналогічних запитів ргоху-сервер сам висилає наявні копії, щоб скоротити час відгуку й обсяг мережного трафіку) ви могли би просто використовувати JSON-P (* JSON with Padding, или JSON-P – JSON; надає спосіб для запиту  даних з сервера, що знаходиться на іншому домені – операцію, яку заборонено у типових браузерах через політику обмеження домену).

JSON-P власне дозволяє нам обійти ці обмеження та отримати дані зі сторонніх доменів. Нижче наведено список статей, що допоможуть вам увійти в курс справи:


24. Вільно запитуйте

Не соромтеся запитувати. Кожний із нас колись був повним «чайником» і починав з опитування інших користувачів. Є велика кількість міст, де ви можете отримати відповіді, включаючи розділ з коментарями Nettuts+. Ніколи не бійтеся запитувати. Просто спробуйте бути трохи ввічливими! Це завжди допомагає.


От і все, чуваки.

Достатньо. Двадцять чотири поради, про які вам варто пам'ятати при реалізації можливостей, надаваних AJAX, на вашому сайті або веб-додатку. Сподіваюсь, що цей посібник був для вас корисним та цікавим. Я буду періодично перевіряти розділ з коментарями, так що приєднуйтеся до обговорюваної теми, якщо ви маєте якісь контр-аргументи або інші погляди з обговорюваної теми.

Є питання? Хочете побажати щось приємне? Маєте якісь критичні зауваження? Перейдіть до розділу з коментарями та залиште мені коментар. Вдалого вам програмування!


Напишіть посібник для Plus

Чи знали ви, що можете отримати до $600 за написання посібника і/або скрінкасту (* цифровий файл, що містить послідовність зображень з екрана монітора (screen output), як правило з текстовими та аудіо-підказками) для нас? Нам потрібні вичерпні та грамотно написані посібники з HTML,CSS,PHP та JavaScript. Якщо ви маєте відповідні вміння, то зв'яжіться з Jeffrey за адресою nettuts@tutsplus.com.

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

Write a PLUS tutorial
  • Підпишіться на нас на Twitter або на the Nettuts+ RSS Feed, щоб бути в курсі про найкращі посібники з веб-розробки.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.