Розробка якісних додатків Ajax: Частина 2. Створення серверних шарів додатків Ajax

1. Серія контенту:
2. Цей контент є частиною серії: Розробка якісних додатків Ajax
3. Малюнок 1. Інтерфейс програми Hoverbox з попередньої статті
4. Додавання Ajax
5. Створення об'єкта-запиту
6. Лістингу 1. Створення об'єкта, що представляє собою запит
7. Необхідність в специфікації на серверну частину
8. Додатки Ajax виконуються в "пісочниці"
9. Додамо трохи PHP ...
10. Скрипт на PHP
11. Лістинг 2. Скрипт lookupImage.php
12. ... і трохи SQL
13. Малюнок 2. Структура таблиці бази даних для нашого застосування
14. Труднощі з експортом полів типу Blob
15. Додавання тестових даних
16. Зробити запит
17. проектування функції
18. Детальніше про HTML і CSS для показу зображень
19. Малюнок 3. збільшення відображення, що перекриває частину іншого фотографії
20. Малюнок 4. Поява діалогового вікна у відповідь на наведення курсору миші
21. Отримання інформації про зображення при натисканні на кнопку миші
22. Визначення імені обраного зображення
23. Малюнок 5. Тепер в діалоговому вікні виводиться значення атрибута src тега img
24. Видалення шляху з імені файлу зображення
25. Малюнок 6. Висновок імені зображення у відповідь на його вибір в галереї. Те що треба!
26. Необхідність досвіду роботи з Ajax
27. Обробка відповіді від сервера
28. Малюнок 7. Тепер додаток видає інформацію про вибраний зображенню
29. Поділ відповіді сервера
30. Додавання ідентифікаторів на Web-сторінку
31. Звернення до потрібних елементів
32. заміна тексту
33. Остання перевірка
34. Малюнок 8. Остаточний варіант галереї зображень
35. Технології - це не головне в Ajax
36. Висновок
37. Ресурси для скачування

Розробка якісних додатків Ajax

Розробка серверної частини графічного додатку Ajax

Серія контенту:

Цей контент є частиною # з серії # статей: Розробка якісних додатків Ajax

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=Разработка+качественных+приложений+ajax

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Розробка якісних додатків Ajax

Слідкуйте за виходом нових статей цієї серії.

В першій статті серії ми створили візуально-насичений інтерфейс для Web-галереї фотографій, за основу якої було взято додаток Hoverbox Натана Сміта (Nathan Smith) (в розділі ресурси наведено посилання на оригінальний варіант Hoverbox). В процесі роботи над додатком ви дізналися про таких базових принципах проектування інтерфейсів, як звична для очей схема Z, узгодженість між різними об'єктами на сторінці, зменшення розміру шрифту зверху вниз і навіть різниця між шрифтами типу serif і sans-serif.

Таким чином, після прочитання першої частини у вас повинно було залишитися симпатичне, зручне у використанні додаток для перегляду галереї зображень. Його зовнішній вигляд повинен відповідати показаному на малюнку 1.

Малюнок 1. Інтерфейс програми Hoverbox з попередньої статті

У цій статті ми створимо необхідний серверний шар для нашого застосування. Для того щоб зв'язати з ним нашу галерею зображень, нам доведеться додати трохи коду Ajax.

Додавання Ajax

Як згадувалося раніше, робота з Ajax, як правило, відбувається за одним і тим же сценарієм, а саме: створення об'єкта XmlHttpRequest, виклик серверного додатка і обробка відповіді. Ваша програма може в майбутньому зазнаватиме змін, які можуть зачіпати запити, надіслані на сервер, але в цілому схема роботи залишається незмінною і складається з наступних кроків:

1. Створення нового об'єкта, що представляє собою запит (бажано так, щоб він працював незалежно від браузера).
2. Формування URL запиту і при необхідності даних, що пересилаються методом POST.
3. Завдання методу зворотного виклику, який буде виконаний при отриманні відповіді з сервера.
4. Зробити запит
5. Створення обробника, який виконує всі необхідні дії по обробці отриманих від сервера даних.

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

Створення об'єкта-запиту

В першу чергу нам знадобиться об'єкт, який представляє собою запит до сервера. В якості типу об'єкта буде служити одна з різновидів XmlHttpRequest. У лістингу 1 показаний не залежить від браузера спосіб створення даного об'єкта.

Лістингу 1. Створення об'єкта, що представляє собою запит

Збережемо даний фрагмент в файлі hoverbox-ajax.js, в який ми далі будемо поміщати весь код на JavaScript для нашого Web-додатки. Потім необхідно помістити посилання на даний файл всередину елемента head в HTML-коді сторінки.

Необхідність в специфікації на серверну частину

Тепер можна подумати про те, як викликати серверні скрипти для отримання інформації про кожну фотографії. Але що має передаватися цим скриптам в якості аргументів? В якому форматі вони будуть повертати дані? Давайте спробуємо максимально наблизити цю ситуацію до реальності, в якій у нас не завжди є повний контроль над серверної частиною програми. Бувають ситуації, коли серверний скрипт, який повертає дані, був написаний раніше, або ж ваші обов'язки обмежуються тільки створенням інтерфейсної частини Ajax-додатки. Зрештою, може, ви просто не знайомі з PHP, і цим займається хтось ще. У будь-якому випадку вам потрібно точно знати, якого роду вхідні параметри очікує скрипт і як передавати і отримувати від нього дані.

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

Додатки Ajax виконуються в "пісочниці"

Одним з механізмів по забезпеченню безпеки, вбудованої в об'єкт XmlHttpRequest, є "виконання в безпечному місці" або "пісочниці" (sandboxing). Це означає, що код на JavaScript, що виконується в деякому домені, наприклад, newInstance.com, може звертатися тільки до скриптів з того ж домена. Таким чином, якщо ваш скрипт виконується у вас на локальній машині, то він може викликати серверні скрипти, також запущені на вашій машині (швидше за все всередині Web-сервера, наприклад Apache або IIS).

У нашому випадку це буде означати, що JavaScript на вашій Web-сторінці не зможе звертатися до домену newInstance.com, тому що сторінка не размешена на моєму Web-сервері. Тому вам доведеться змінити все URL відповідним чином. Крім того, ви можете дещо спростити серверний скрипт, щоб він не звертався до бази даних, якщо вона не встановлена ​​на вашій машині (докладніше про це в наступних розділах).

• Скрипт може бути викликаний шляхом звернення по конкретному URL, в нашому випадку - http://www.newInstance.com/ajax/lookupImage.php.
• Скрипт приймає єдиний вхідний параметр - назва зображення, для якого запитується інформація. Дана назва не повинно включати ні шлях, ні розширення. Наприклад, для зображення img / photo07.jpg назвою буде рядок "photo7".
• Скрипт буде повертати наступні дані: ім'я зображення, заголовок, дату і опис. Інформація буде передаватися у вигляді одного рядка з роздільниками.

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

Додамо трохи PHP ...

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

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

Скрипт на PHP

Оскільки нас в основному цікавить клієнтська сторона, а також, відповідно до умови, що у нас є тільки специфікація, ми не будемо детально розглядати PHP-скрипт в лістингу 2. Ви можете розібратися в ньому, або повністю проігнорувати. Все, що необхідно - це переконатися, що він запущений на тому ж сервері, що і Web-сторінка, щоб ви могли звертатися до нього з JavaScript.

Лістинг 2. Скрипт lookupImage.php

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

... і трохи SQL

Додамо ще трохи реалізму, створивши базу даних SQL, в якій буде зберігатися інформація про кожному зображенні (правда це трохи ускладнить процес підготовки прикладів до запуску). На малюнку 2 показано вікно phpMyAdmin з описом використовуваної таблиці.

Малюнок 2. Структура таблиці бази даних для нашого застосування

Таблиця містить досить простий набір колонок:

1. name: Ім'я зображення, відповідне імені файлу, яке задається в атрибуті src елемента img. Далі ми будемо видаляти префікс img / - ім'я каталогу, в якому зберігаються зображення. Таким чином, ім'ям зображення, що зберігається в файлі img / image_01.jpg буде рядок "image_01.jpg."
2. title: Тема зображення, наприклад, "Sunrise Over the Bay" (схід над затокою). Цей рядок буде виводитися найбільшим шрифтом у верхній частині Web-сторінки, прямо над зображенням.
3. date: Дата, коли була зроблена фотографія (врахуйте, що вона може не збігатися з датою збереження зображення в базі даних).
4. description: Опис зображення, яке буде виводитися у вигляді основного текстового фрагмента.

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

Труднощі з експортом полів типу Blob

У базі даних нашого застосування використовуються поля типу Blob, які експортуються в нечитабельним довічним вигляді. Тому не дивуйтеся, виявивши дивно виглядають записи в файлах даних SQL.

Додавання тестових даних

Далі додамо в таблицю тестовий набір даних. До архіву з вихідним кодом до статті (див. Розділ Завантаження ) Включений SQL-скрипт, який створює таблицю і вставляє в неї 5 рядків з даними. Ви можете використовувати цей скрипт в ваших базах даних, тому так вручну вводити 20 описів різних зображень - це не найприємніший спосіб провести вечір. На даний момент тестовий набір даних включає 5 записів, але ви можете додати ще, описавши інші зображення в галереї.

Як тільки ви заповнили таблицю даними, можна приступати до зв'язування інтефейс (Web-форми) і серверної частини (бази даних) додатки.

Зробити запит

На даний момент у нас є об'єкт на Web-сторінці, що представляє собою запит (змінна request), а також скрипт на PHP і база даних, що містить всю необхідну інформацію. Далі необхідно створити функцію на JavaScript, яка буде надсилати запит серверному скрипту. Функція повинна викликати з Web-сторінки, що містить галерею зображень.

проектування функції

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

Помістимо її в той же файл, в якому створюється об'єкт запиту - hoverbox-ajax.js. Функція поки не робить нічого корисного, але можна перевірити, що вона викликається, не піклуючись поки про деталі роботи з Ajax і серверним скриптом. Таким чином, поки при виконанні фрагмента коду на JavaScript спочатку буде створюватися об'єкт запиту, а потім видаватися повідомлення в діалоговому вікні.

Детальніше про HTML і CSS для показу зображень

Тепер необхідно внести зміни в код HTML сторінки з зображеннями. Погляньте на те, як видається кожне зображення в галереї:

Фрагмент виглядає трохи заплутано, тому розіб'ємо його на складові. По-перше, існує тег a, що містить порожню посилання (як її значення використовується символ "#"). Це зроблено для того, щоб при наведенні курсору миші на зображення, спрацювало правило CSS. Далі присутній тег img, за допомогою якого зображення виводиться на сторінку (за замовчуванням використовується зменшений варіант). Нарешті, є ще один тег img з класом CSS "preview". Нижче наведено опис даного CSS-класу з файлу css / hoverbox.css:

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

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

Малюнок 3. збільшення відображення, що перекриває частину іншого фотографії

Виклик базового варіанту функції JavaScript

Нам необхідно, щоб при наведенні миші на зображення, викликалася наша JavaScript-функція. Для цього змінимо тег img наступним чином:

Відкоректуйте всі 20 тегів, перезавантажте сторінку і перевірте виклик функції. Що ви думаєте? Поведінка сторінки ілюструється на малюнку 4.

Малюнок 4. Поява діалогового вікна у відповідь на наведення курсору миші

Досить набридливу поведінку, ви не знаходите? Це все через функції alert, яка виводить діалогове вікно у відповідь на кожне наведення миші на зображення, так що вам постійно доводиться натискати на кнопку OK. До того ж довелося додавати обробник наведення курсору до всіх 20 тегам img на сторінці.

Але головна проблема полягає в зручності використання. Функція getImageDetails () буде викликати серверний скрипт у відповідь на кожне наведення миші! Іншими словами, якщо ви переміщаєте курсор миші до третього зображенню в другій колонці, то ініціюється кілька звернень до сервера - по одному на кожну фотографію, яку перетнув курсор. Це вкрай погано, тому що призводить до абсолютно непотрібним накладними витрати.

Отримання інформації про зображення при натисканні на кнопку миші

Кращим варіантом буде використовувати подія onClick, відповідне збільшеному зображенню (яка зазначена класом "preview"), щоб запит до сервера посилався тільки в момент натискання кнопки миші на фотографії. Однак для цього нам доведеться видалити обробник onmouseover і додати обробник onclick в більш ніж 20 містах в HTML. Тому має сенс зробити один крок назад і виправити цей недолік, враховуючи, що додатки Ajax є динамічними і не повинні залежати від необхідності внесення багатьох змін у HTML.

Нижче приведена проста функція на JavaScript, яка перебирає всі теги img на сторінці і знаходить ті з них, які відзначені спеціальним CSS-класом - "preview" (як і решті код на JavaScript, параметр знаходиться в файлі hoverbox-ajax.js). Далі в кожен з таких тегів вона додає обробник події onclick, що викликає метод getImageDetails. Все працює чудово.

Дану функцію можна виконати, помістивши її в обробник події onLoad елемента body нашої сторінки. Приклад наведено нижче.

Подібне додавання обробників програмним, а не за допомогою ручного редагування HTML, шляхом є досить характерним для Ajax. Головною перевагою є легкість внесення змін, так як вам більше не доведеться редагувати всі 20, а то і 40, елементів в HTML-коді сторінки.

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

Визначення імені обраного зображення

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

Щоб зрозуміти, як це працює, змініть метод getImageDetails () наступним чином:

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

Малюнок 5. Тепер в діалоговому вікні виводиться значення атрибута src тега img

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

Видалення шляху з імені файлу зображення

Тепер нам залишилося зробити всього лише крок перед тим, як викликати PHP-скрипт на сервері. Необхідно перетворити шлях до файлу в ім'я зображення, яке не містить назв каталогів і розширення. Наприклад, шлях "file: ///Users/bmclaugh/Documents/developerworks/ajax_2-backEnd/hoverbox/img/photo05.jpg" повинен перетворюватися в "photo05" перед викликом скрипта. Це звичайне завдання на JavaScript, в якій немає нічого специфічного для Ajax. Код перетворення наведено нижче.

Ця функція отримує на вхід шлях до файлу і повертає ім'я зображення. Залишилося внести відповідні зміни в метод getImageDetails ():

Збережіть і перезавантажте сторінку в браузері. Тепер вона поводиться саме так, як потрібно: обробник натискання на зображення готовий передати її ім'я серверному скрипту на PHP. Поведінка сторінки на даному етапі ілюструється на малюнку 6.

Малюнок 6. Висновок імені зображення у відповідь на його вибір в галереї. Те що треба!

Запит до сервера

Передача імені зображення скрипту на PHP є досить тривіальну завдання. Нижче наведено фрагмент Ajax-коду, що виконує запит до сервера.

Це та ж функція, що і раніше, але зазнала кілька змін. У ній використовується фіксований URL, до якого додається ім'я зображення, попередньо перетворене функцією escape з метою уникнення різних проблем з кодуванням. Далі функція встановлює обробник зворотного виклику, формує запит і відправляє його на сервер. Більше ніяких дій не потрібно, тому що про все інше подбали ті функції JavaScript, які ми створили в попередньому розділі.

Необхідність досвіду роботи з Ajax

У даній статті мається на увазі, читачі мають базовим уявленням і досвідом роботи з Ajax. В іншому випадку рекомендується звернутися до розділу ресурси , В якому наведено посилання на серію статей під назвою " jsp?search_by=Mastering+Ajax> освоєння Ajax ", Що описують основи цієї технології в простій і доступній формі. Після цього вам буде легше сприймати матеріал даної статті.

Обробка відповіді від сервера

Одним з найбільш складних аспектів роботи з додатками Ajax є те, що вони складаються з декількох частин - сторінки HTML, сторінки CSS, що визначає стилі і проста поведінка, на кшталт виведення збільшених версій зображень, клієнтського коду на JavaScript, серверного коду на PHP і так далі. Налагодження подібних додатків являє собою непросту задачу.

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

Не забувайте, що ім'я цієї функції має збігатися з ім'ям обробника зворотного виклику, заданого всередині методу getImageDetails ().

Перевірте, що дана функція викликається при отриманні відповіді від сервера (приклад показаний на малюнку 7). При цьому мається на увазі, що ви додали інформацію в базу даних MySQL або змінили PHP-скрипт таким чином, що він повертає деякий тестовий набір даних.

Малюнок 7. Тепер додаток видає інформацію про вибраний зображенню

Виглядає непогано! Ми отримали необхідні дані, залишилося тільки розбити їх на секції і вивести в потрібне місце в Web-формі.

Поділ відповіді сервера

Насамперед необхідно розділити дані, отримані від сервера, на складові частини, використовуючи функцію split () в JavaScript.

Функція split () приймає на вхід рядок і розділяє її на кілька частин, повертаючи результат у вигляді масиву. За допомогою цієї функції ми можемо витягти заголовок, дату і опис кожного зображення. Врахуйте, що масив індексується з нуля, тому в splitResponse [0] буде зберігатися ім'я зображення, яке раніше було передано сервера в якості параметра.

Додавання ідентифікаторів на Web-сторінку

До елементів Web-сторінки найлегше звертатися, використовуючи атрибут id. Тому додамо ідентифікатори в секцію сторінки, в яку буде виводитися інформація по кожному зображенню.

Звернення до потрібних елементів

Отримати доступ до потрібних елементів з метою зміни їх вмісту досить просто. Для цього досить викликати функцію getElementById () для кожного з них.

Все дуже просто. Далі, все що нам залишилося - це замінити текст цих елементів даними, отриманими від сервера.

заміна тексту

Заміна тексту в конкретному елементі на Web-сторінки - це одна з тих речей, яка повинна в теорії робитися легко, проте на практиці виявляється досить непростим. Складнощі виникають через те, що відповідно до об'єктною моделлю документа (DOM) текст елементів зберігається у вигляді дочірніх вузлів. Наприклад, текст елемента p представляється у вигляді текстового вузла, що є дочірнім по відношенню до p.

Таким чином, для завершення showImageDetails () нам знадобляться дві допоміжні функції для полегшення роботи з DOM. З їх допомогою можна спочатку очистити текст елемента, а потім вставити новий. Додамо обидві функції в файл hoverbox-ajax.js.

Ці функції ви можете включити в усі свої файли JavaScript або навіть помістити в файли типу dom-utils.js або text-utils.js, які будуть використовуватися у всіх додатках.

Тепер можна додати кілька завершальних штрихів до функції showImageDetails ().

Остання перевірка

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

Малюнок 8. Остаточний варіант галереї зображень

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

Технології - це не головне в Ajax

У цій міні-серії, що складається з двох статей, ми створили невелику, але дуже симпатичне додаток Ajax. При цьому основну увагу ми приділяли зовсім не викликам методів класу XmlHttpRequest, на зразок send () і setRequestHeader (). Насправді, головний секрет Ajax, який відкривається тільки найбільш досвідченим розробникам - це те, що його технологічні основи досить прості. Як правило, вистачає лише невеликого фрагмента коду на JavaScript, наприклад, нам навіть не знадобилися бібліотеки на зразок Dojo або Prototype, які ще спрощують життя розробникам. Якщо додати ще трохи DHTML або DOM - це буде вже вищий пілотаж. Це що стосується технологій.

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

Центр матеріалів по Ajax на сайті developerWorks
Зверніться до центру матеріалів по Ajax - єдиному зборам безкоштовних утиліт, коду та інформації про розробку додатків Ajax. На активно діючому jsp?forum=965&cat=11> форумі спільноти Ajax , Модерується експертом Джеком Херрингтон (Jack Herrington), ви зможете спілкуватися з колегами, можливо, знають рішення проблеми, над якою ви ламаєте голову в даний момент.

Таким чином, можна резюмувати, що головну роль в Ajax грає правильний дизайн та архітектура додатки, а не використовувані технології. Ви можете засвоїти основні принципи створення Ajax-додатків, читаючи інші серії на сайті developerWorks (такі як, наприклад, мою всеосяжну серію " jsp?search_by=Mastering+Ajax> освоєння Ajax "З 12 частин), але не забувайте, що основними складовими успіху все одно залишаться зручний інтерфейс, повноцінне тестування і ваше ясне мислення як розробника. Наведемо яскравий приклад: Google Maps практично не використовує асинхронну обробку запитів, а всі його ділянки, в яких використовується Ajax, відносно прості. Але при цьому були витрачено тисячі (якщо не мільйони) людино-годин на створення інтерфейсу, на продумування таких питань, як розміщення елементів на екрані, набір варіантів для вибору і як користувач буде всім цим керувати. Всі ці питання не мають прямого стосунку до Ajax, але їх роль в додатку не викликає сумнівів.

Висновок

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

Витративши досить часу на цей простий приклад, ви виробите непогане чуття на те, наскільки зручним, або наборот громіздким, є ту чи іншу програму. Мені не хочеться ображати розробників, тому я не буду наводити приклади існуючих громіздких сайтів, але ви з легкістю знайдете безліч таких. Задумайтесь, чому вони так виглядають? Які уроки можна витягти з цього? Продовжуйте вдосконалюватися, відповідаючи на подібні питання, і незабаром ви зможете самостійно створювати приголомшливі додатки Ajax.

Ресурси для скачування

Схожі теми

• Оригінал статті: " Solid Ajax applications, Part 2: Building Ajax back ends ", (Брет Маклафлін, developerWorks, січень 2007 р). (EN)
• Перша стаття в серії " Розробка якісних Ajax-додатків: частина 1: створення інтерфейсу "(Брет Маклафлін, developerWorks, жовтень 2007 року) допоможе вам стати на шлях самостійного створення дивовижних додатків Ajax ... (EN)
• Зверніться до документації по Hoverbox , На основі якого створені приклади до даної статті. (EN)
• подивіться online-демонстрацію Hoverbox - так виглядало додаток до наших змін. (EN)
• Спробуйте застосувати методи, про які розповідалося вище, спільно з Lightbox - більш досконалим JavaScript-інструментарієм. (EN)
• В центрі матеріалів по Ajax на сайті developerWorks ви можете знайти постійно поповнюється бібліотеку Ajax-вмісту, а також безлічі корисних ресурсів, які допоможуть вам почати створювати додатки Ajax прямо сьогодні.
• Постійно поповнюється зібрання матеріалів по Web 2.0 - популярній темі в колах розробників - можна знайти в розділі Web-розробки на сайті developerWorks.
• Прочитавши книгу " Швидкий штурм Ajax (Head Rush Ajax) "(Брет Маклафлін, O'Reilly Media, Inc.), ви швидко засвоїте принципи, про які розповідалося в цій статті (так званий підхід" Вперед з головою "). (EN)
• У книзі " Java ™ та XML, друге видання "(Брет Маклафлін, O'Reilly Media, Inc., 2001 г.) автор даної статті обговорює перетворення документів XHTML і XML. (EN)
• " JavaScript: Повне керівництво (The Definitive Guide) "(Девід Фленаган (David Flanagan), O'Reilly Media, Inc., 2001 г.): вивчіть докладну інструкцію про роботу з JavaScript і динамічними Web-сторінками. У наступному виданні будуть додані дві статті про Ajax. (EN)
• " В першу чергу HTML з CSS і XHTML (Head First HTML with CSS & XHTML) "(Елізабет і Ерік Фріман (Elizabeth and Eric Freeman), O'Reilly Media, Inc., 2005): дізнайтеся більше про стандартизованих HTML і XHTML, і про те, як застосовувати CSS в HTML. (EN)

Підпишіть мене на повідомлення до коментарів