Удосконалення Web-додатків за допомогою прихованого використання Flash Player
Отже, приступимо
Локальна пам'ять Flash
Багатьом Web-додатків необхідно зберігати дані про стан клієнта. Іноді це може бути просто ідентифікатор сеансу, який можна використовувати для отримання стану на сервері з пам'яті або бази даних. Однак багато Web-додатки свідомо уникають зберігання стану на сервері заради масштабованості. У цьому випадку стан має зберігатися на клієнтському комп'ютері. Крім того, часто бажано, щоб цей стан зберігалося після закінчення поточного сеансу роботи користувача.
Протягом багатьох років способом за замовчуванням для цього були cookies HTTP. Однак у цього способу є свої недоліки. Він важкий у використанні з точки зору розробника, тому що фізично це просто HTTP-заголовок. Ще важливіше, що це потенційний пробіл в системі безпеки. При кожному запиті cookies HTTP пересилаються туди і назад між клієнтом і сервером, так що будь-які викладені в них дані можна перехопити. Цей факт часто використовують для "крадіжки cookies" із застосуванням міжсайтового скриптинга / підроблення. Якщо зловмисники вкрадуть cookies, вони зможуть легко розкрити і використовувати відповідну обліковий запис.
Але найбільший недолік cookies HTTP - їх обмежений розмір. Різні браузери встановлюють різні обмеження на максимальний розмір cookies HTTP, виділений на домен. Специфікація HTTP встановлює межу в 4 Кб, і це все, на що можна розраховувати. Так що ж робити, якщо на клієнті потрібно зберігати більше 4 КБ? Якщо ви коли-небудь думали про те, що добре б написати алгоритм стиснення в стилі GZIP на Java ™ Script, то це ваш шанс. Або можна використовувати альтернативу, таку як Flash.
Локальні загальні об'єкти
Flash Player створює локальний простір для зберігання даних Flash-додатків. За замовчуванням воно обмежене 100 КБ на домен. Правильно: ви отримуєте в двадцять п'ять разів більше місця, ніж при використанні cookies HTTP. Є й деякі інші важливі відмінності. Дані Flash на стороні клієнта ніколи не передаються на сервер, так як не мають нічого спільного з HTTP. Звичайно, при бажанні можна взяти ці дані і відправити його їх сервер. Ніщо не заважає це зробити. Однак можна вибрати, які дані відправляти і як їх передавати. Якщо ці дані дійсно потрібні як на стороні клієнта, так і на стороні сервера, то доведеться трохи повозитися. Зате це, як правило, набагато безпечніше, бо треба явно "уявити" ці дані через мережу.
Flash API для зберігання та вилучення локальних даних називається SharedObject. В технології Flash є поняття загальних об'єктів SharedObject. які можуть бути віддаленими, тому ті, що зберігаються тільки в клієнті, часто називають локальними SharedObject. API дуже простий і дозволяє довільно зберігати та видавати складні об'єкти з використанням парадигми ключ-значення. У лістингу 1 показаний простий код для зберігання та вилучення SharedObjects.
Лістинг 1. Зберігання і витяг SharedObjects
Кожен екземпляр SharedObject має властивість даних, яке можна розглядати як хеш-таблицю для зберігання даних. Це те, що робить другий рядок функції saveLocal. Останній рядок зберігає об'єкт SharedObject на диску (flush). Ось і все, що необхідно зробити, щоб зберегти дані локально. Якщо ви інтенсивно користуєтеся SharedObjects і почали наближатися до межі в 100 Кб, то можете додати до цього детектори подій. Це дозволить реагувати на такі події, як "flush завершено" або "flush не вдався".
Як зробити його невидимим
Лістинг 3. Вкладення невидимого Flash
Інші способи локального зберігання
Я згадав, що Flash може бути привабливим способом зберігання даних на стороні клієнта в порівнянні з cookies HTTP. Однак існують інші Web-технології, які взяли ту ж парадигму, що і SharedObjects з Flash. Справді, протягом багатьох років різні браузери пропонують дуже схожі API. Однак ці API, як правило, відрізняється від одного браузера до іншого. Тому потрібно визначити браузер і використовувати відповідний API. Flash ж дає узгоджену альтернативу. Код, розроблений в цій статті, буде працювати практично на будь-якому браузері: Від Internet Explorer 6 і Firefox 2 аж до самої останньої версії цих браузерів. Однак нові версії теж забезпечують узгоджену альтернативу. Специфікація HTML 5 включає в себе API localStorage. Він реалізований в останній версії основних браузерів, включаючи IE 8 і Firefox 3.5. Так що якщо потрібно піклуватися тільки про ці браузерах, localStorage - хороша можливість. Якщо ж потрібно турбуватися і про старих браузерах (IE 6, IE 7 і т.п.), простіше вдатися до Flash. Тепер розглянемо ще одне місце, де Flash може відкрити нові можливості: междоменной Ajax.
междоменной Ajax
Ajax став всюдисущим інструментом Web-програмування, це невід'ємна частина будь-якого Web-додатки. Одне з основних обмежень Ajax - горезвісне правило одного і того ж джерела. Якщо Web-сторінка передається з сайту a.com, можна робити виклики Ajax (точніше, XMLHttpRequest) тільки до a.com. Не можна звернутися, наприклад, до b.com. Не важливо, що і a.com, і b.com належать вашої компанії; браузер теж не має значення. Однак до Flash-додатків це не відноситься.
Лістинг 4. Файл політики для домену пошуку Twitter
Це особливо цікавий файл політики. Він надає доступ до SWF з будь-якого домену (це зазначено Символи узагальнення "*"). Таким чином, будь-який Flash-додаток може викликати API пошуку Twitter. Такі файли політики - звичайне явище для великих Web-сайтів з публічними API. Однак деякі сайти використовують більш обмежувальні політики, які дозволяють доступ тільки з тих доменів, якими володіють або з якими підтримують партнерські відносини. За допомогою файлів політики ви отримуєте детальний контроль над тим, хто може звертатися до ваших серверів, а хто не може. Розглянемо, як можна поширити ці ж можливості на Ajax-додатки.
досягнення межддоменності
Лістинг 5. междоменной утиліта SWF
Функція sendRequest також має три необов'язкові параметри. ActionScript допускає додаткові параметри, але вони повинні мати значення за замовчуванням. Перший - це використовуваний метод HTTP, як правило, або GET. або POST. У цій статті я зробив методом за замовчуванням GET. але його можна легко замінити на POST. якщо цього вимагає віддалений сервер. Наступний додатковий параметр називається content. Це родовий об'єкт даних, який може містити будь-які пари ім'я-значення, які потрібно відправити на віддалений сервер. Його потрібно використовувати при передачі даних на віддалений сервер. Нарешті, останній необов'язковий параметр - інший родовий об'єкт даних для заголовків. Він служить для установки спеціальних HTTP-заголовків, переданих в рамках виклику на віддалений сервер.
Лістинг 6. Виклик Twitter Search
Альтернативи междоменной виклику
Протягом багатьох років Flash дозволяв робити міждоменні виклики, як і локально зберігати дані. Як і в разі локального зберігання, деякі Web-браузери пропонують власний спосіб, і робилися спроби стандартизації. Але вони не увінчалися таким же успіхом, як у випадку з локальним зберіганням. Хоча в даний час існує стандарт междоменной викликів Ajax, він не реалізований в IE 8. Замість цього, IE 8 пропонує власний спосіб робити міждоменні виклики Ajax. Ця нестандартна реалізація - новинка IE 8, і в старих версіях IE її немає. Знову ж, Flash надає модель, яка працює на всіх браузерах.
Приєднайтесь до групи Web-розробки на сайті "Мій DeveloperWorks"
Обговоріть теми і поділіться ресурсами по Web-розробці з іншими програмістами в групі Web-розробки "Мій developerWorks".
Ви - не член співтовариства "Мій DeveloperWorks"? Приєднуйтесь!
висновок
У цій статті пояснюється, як використовувати Flash для розширення можливостей Web-додатків. Тепер ви можете значно збільшити ємність локальної пам'яті, доступної для свого застосування. Це дозволяє кешувати великі обсяги даних на стороні клієнта. Ви навчилися також робити міждоменні Ajax-виклики з Web-додатків з використанням Flash. Це всього лише невелика частина тих можливостей, які надає Flash. Якщо ви знайдете щось ще, що допомогло вам, ви можете використовувати ті ж методи: Зробити Flash невидимим і вставляти його функції за допомогою ExternalInterface.