Федеральне агентство з освіти
ГОУ ВПО «Шадринский державний педагогічний інститут»
Кафедра програмування та мережевих технологій
Курсова робота
«Розробка веб файлового менеджера з використанням технології Ajax»
студента 389 групи
Аллахвердієва Фармана
керівник
Кирилов А. Г.
Шадринськ 2008
Зміст
Введення
Технологія Ajax.
Переваги Ajax
Системи, створені з використанням Ajax
Базові технології Ajax
Файловий веб менеджер на основі технології Ajax
Основні можливості
Принцип реалізації програмного коду
Висновок
Введення
Для реалізації свого веб менеджера я вирішив використовувати технологію Ajax як найбільш актуальну, і в даний час отримала найбільше поширення в клієнт серверних додатках, наприклад таких відомих веб ресурсах як Google Maps і Gmail
Перевага Ajax полягає в тому, що дана технологія дозволяє обробляти більш великий набір подій, що відповідають діям користувача. Стає можливим реалізувати перетягування об'єктів та інші складні функції інтерфейсу, у результаті чого Web - додаток стає схожим на звичайну прикладну програму, виконувану на настільній системі. З точки зору практичності ця свобода дій важлива не тому, що вона більше відповідає уявленням користувача про віртуальному світі, а тому, що дозволяє краще поєднувати взаємодія з користувачем і запити до сервера.
Технологія Ajax
Переваги Ajax
Браузер має справу з додатком, а не з вмістом для класичного додатки на базі Web-сторінок браузер являє собою лише низькорівневий термінал. Він не має інформації про те, який етап роботи виконується користувачем. На сервері містяться мінімальні відомості про це, які, по суті, зводяться до підтримки сеансу.
Якщо ви працюєте з Java або. NET, засоби підтримки сеансу на сервері доступні, подібно запитам відповідей і MIME-типами, за допомогою стандартного API.
Коли користувач реєструється або іншим способом ініціалізує сеанс, створюється кілька об'єктів на стороні сервера. Вони представляють, наприклад, "кошик" покупця або платіжну картку користувача. Одночасно браузер отримує вихідну сторінку. Вона доставляється у вигляді потоку HTML-даних, які являють собою поєднання стандартних елементів і даних, специфічних для конкретного користувача. При кожному зверненні до сервера браузер отримує чергову сторінку, що містить дані тих же типів, що в попередніх документах. Браузер справно прибирає з екрана старий документ і відображає новий. Інших дій від нього і не слід очікувати: це низькорівнева програма, яка робить тільки те, що було передбачено розробниками. Коли користувач активізує посилання, що відповідає закінченню сеансу, або закриває браузер, виконання програми завершується і сеанс руйнується. Інформація, яку користувач повинен побачити при наступній реєстрації, заноситься в довготривале сховище. У Ajax - додатку частина прикладної логіки переноситься на браузер.
Після реєстрації користувача клієнтське додаток доставляється браузеру. На багато дій користувача це додаток здатний реагувати самостійно. Якщо є в наявності можливостей бракує, воно передає запити серверу, не перериваючи послідовність дій користувача.
При реєстрації користувача браузеру надається більш складний документ, істотну частину якого становить код JavaScript. Цей документ залишається доступним користувачеві протягом всього сеансу; при цьому, залежно від дій користувача, він змінює свій зовнішній вигляд. Клієнтська програма знає, як реагувати на дані, що вводяться, і здатна вирішувати, обробляти їх самостійно, чи посилати запит серверу (який у свою чергу звернеться до бази даних або до іншого ресурсу) або зробити і те й інше.
Оскільки документ присутній на стороні клієнта протягом усього сеансу, він здатний зберігати інформацію про його стан. Наприклад, відомості про стан "кошики" покупця можуть зберігатися не на сервері, а в клієнтській програмі.
Як було сказано раніше, на кожному етапі роботи класичне Web - програма надає поєднання стандартних елементів і спеціальних даних. Коли користувач додає товар в "кошик", додаток у відповідь має лише змінити загальну ціну або, при наявності помилки, сообщітьо ній. Код, що відповідає за ці дії, становить незначну частину документа. У Ajax-додатку "кошик" може мати більш високим "інтелектом" і передавати серверу асинхронні запити. Шаблон, елементи навігації та інші компоненти сторінки вже присутні на стороні клієнта, тому сервер повинен передавати тільки дані, отримані в результаті обробки запиту.
Ajax-програма може досягти даної мети різними способами, наприклад, повернути фрагмент JavaScript-коду, потік, що містить звичайний текст або невеликий XML-документ. Достатньо зауважити, що дані в будь-якому з цих форматів будуть мати значно менший обсяг, ніж сторінка, яка повертається класичним Web-додатком.
Трафік при роботі Ajax-додатками, спочатку зростає так як при реєстрації користувача клієнтської програмі доставляється складний додаток. Подальшу взаємодію з сервером стає набагато більш ефективним.
Для перехідного програми, створеного на базі Web-сторінок, сумарний трафік може виявитися менше, ніж для Ajax-додатки. Однак у міру збільшення часу роботи користувача ситуація змінюється і Ajax додаток стає набагато більш економічніше за свого конкурента, виконаного в рамках класичного підходу.
У Web-браузері передбачені два основних механізми введення даних: гіпертекстові посилання і HTML-форми. Гіпертекстові посилання можуть бути сформовані на сервері і забезпечені параметрами CGI (Common Gateway Interface - інтерфейс загального шлюзу). Їх можна оформити як зображення і засобами CSS (Cascading Style Sheets - каскадні таблиці стилів) організувати зворотний зв'язок з користувачами, наприклад, забезпечити зміну зовнішнього вигляду при наведенні на них курсору миші. Хороший Web-дизайнер при бажанні доб'ється того, що посилання будуть виглядати як повноправні компоненти користувальницького інтерфейсу.
Форми можуть містити багато компонентів, типові для користувача інтерфейсу звичайних додатків, а саме: поля редагування, прапорці та перемикачі опцій, розкривні списки та ін Однак деякі з компонентів у складі форм не підтримуються. Так, наприклад, у формах не передбачені дерева і таблиці. Форми, як і гіпертекстові посилання, містять URL, які вказують на ресурси сервера. Гіпертекстові посилання й форми можуть також вказувати на функції JavaScript. У традиційних Web-документах часто можна зустріти JavaScript-сценарії, перевіряючі коректність заповнення форм. Вони стежать за незаповненими полями, значеннями, що виходять за межі допустимого діапазону, та іншими подібними помилками. Передача даних на сервер відбувається лише в тому випадку, якщо форма заповнена коректно. JavaScript-функції присутні на стороні клієнта протягом того ж часу, що і містить їх Web-сторінка.
При зверненні до чергової сторінці користувачеві доводиться на час перервати роботу. Попередній документ ще деякий час відображається на екрані; деякі браузери навіть дозволяють активізувати яку-небудь з видимих посилань, але результати передбачити неможливо. Швидше за все, користувач, що надійшов подібним чином, зруйнує інформацію про сеанс, підтримувану на сервері. Після отримання нової сторінки користувачеві надаються приблизно ті ж можливості вибору, які він мав до цього. Наприклад, додавання в "кошик" товару, скажімо, брюк, навряд чи приведе до переходу від категорії "чоловічий одяг" до категорії "жіночий одяг" або "дитячий одяг". Уявімо собі тепер, як веде себе "кошик" покупця, реалізована у складі Ajax-додатки. Оскільки Ajax дозволяє передавати дані в асинхронному режимі, користувач може додавати товар в "кошик" з тією ж швидкістю, з якою він клацає мишею. Якщо клієнтська частина програми виконана професійно, вона без зусиль впорається з цим завданням, і користувачеві не доведеться у своїй роботі враховувати специфіку взаємодії програми і сервера. Очевидно, що реальної "кошики" не існує, вона виконана у вигляді об'єкта підтримки сеансу на сервері. Проте користувач, який робить покупки, не повинен нічого знати про об'єкт сеансу. "Кошик" - це поняття, що дозволяє спрощено представити їх дії. Необхідність переходити від поняття "кошик" до об'єктів, що містяться в пам'яті комп'ютера, створює дискомфорт для користувача. Необхідність очікувати поновлення сторінки примушує повернутися з віртуального світу в реальний. Додаток, реалізоване засобами Ajax, вільно від цього недоліку. Купувати товари в мережевому магазині користувачам доводиться лише час від часу, однак в інших областях діяльності, наприклад, при вирішенні складних інженерних завдань, похвилинної переривання роботи, пов'язане з необхідністю очікувати появи чергової сторінки, неприпустимо.
Ще одна перевага Ajax полягає в тому, що дана технологія дозволяє обробляти більш великий набір подій, що відповідають діям користувача. Стає можливим реалізувати перетягування об'єктів та інші складні функції інтерфейсу, у результаті чого Web - додаток стає схожим на звичайну прикладну програму, виконувану на настільній системі. З точки зору практичності ця свобода дій важлива не тому, що вона більше відповідає уявленням користувача про віртуальному світі, а тому, що дозволяє краще поєднувати взаємодія з користувачем і запити до сервера.
Для того щоб звернутися до сервера в класичному Web-додатку, ми повинні натиснути на гіпертекстове посилання або активізувати елемент форми, а потім чекати результату. Це неминуче відволікає від основної роботи. Якщо ж звернення до сервера відбувається у відповідь на переміщення миші, перетягування об'єкта або натискання клавіші, сервер працює паралельно з користувачем. У даному прикладі додаток реагує на натиснення клавіш в міру того, як користувач вводить інформацію в поле. Клієнт взаємодіє з сервером, витягує і відображає найбільш ймовірні завершення фраз.
У класичних Web-додатках для реалізації додаткових можливостей в документи часто включають фрагменти JavaScript-коду. Сторінкова модель не дозволяє цим фрагментами присутнім на стороні клієнта довше самої сторінки, а це обмежує їх придатність. У результаті JavaScript придбав репутацію мови, придатного лише для виробів і не заслуговує уваги серйозних розробників.
Створення коду для Ajax-додатків істотно відрізняється від того, до чого встигли звикнути програмісти. Код, що доставляється клієнту на початку роботи з додатком, доступний до завершення сеансу, причому він неперервні і не уповільнює роботу користувача і не призводить до марному витрачанню пам'яті. Якщо розробник прагне вийти на ринок незалежних додатків, то він повинен враховувати, що його програма буде використовуватися по кілька годин поспіль. Для цього потрібен високопродуктивний код, що допускає супровід. При його створенні необхідна дисципліна програмування і розуміння завдання, як і при написанні серверних програм.
Обсяг коду, ймовірно, буде більшою, ніж у випадку класичного Web-додатки. У результаті більше значення отримує сама структура коду. Створення програми вже стає не під силу поодинці - цим повинен займатися колектив розробників. У процесі роботи необхідно забезпечити виділення підзадач, враховувати подальшу підтримку, одним словом, робота буде відбуватися за тим же сценарієм, що і створення звичайних програм для настільних систем.
Ajax вже використовується для створення реальних додатків, і переваги даного підходу видно на практиці.
За GMail пішли інші інтерактивні служби, наприклад, Google Suggest, пошуковий сервер якої автоматично пропонує завершення фрази, що вказується в складі запиту, і Google Maps - інтерактивна Швидка, карта, за допомогою якої визначається розташування ресурсу. Почали експерименти з даною технологією і інші компанії. Як приклад можна навести інтерактивну систему Flickr, яка в даний час є складовою частиною Yahoo!.
Згадані вище системи - лише перевірка можливостей нового підходу, вони представляють собою перехідні програми, застосовувані лише епізодично. За ними послідували незалежні Ajax-додатки.
Наявність додатків, створених на базі Ajax, свідчить про те, що новий підхід отримує визнання розробників. Якщо окремі програмісти іноді використовують нову технологію лише для того, щоб ознайомитися з нею, то такі компанії, як Google і Yahoo!, вдаються до неї тільки в тому випадку, якщо вона обіцяє виграш в конкурентній боротьбі.
Можна очікувати, що зі зростанням потреби у високоякісному прикладному інтерфейсі традиція використання Ajax отримає подальший розвиток. Цілком ймовірно, що протягом найближчих декількох років позиції Ajax-додатків на ринку будуть зміцнюватися.
Базові технології Ajax
Ajax - не одна конкретна технологія, скоріше це сукупність чотирьох технологій, які доповнюють один одного (табл.1).
Складні Ajax-додатки доставляються користувачам і як користувачі взаємодіють з ними за рахунок використання JavaScript-коду, який "об'єднує" додаток, визначає послідовність дій користувача та бізнес-логіку програми. Дії з інтерфейсом перетворюються в операції з елементами DOM (Document Object Model), за допомогою яких обробляються дані, доступні користувачеві, в результаті чого подання їх змінюється. Тут же проводиться обробка переміщень і клацань мишею, а також натисків клавіш. Каскадні таблиці стилів, або CSS (Cascading Style Sheets), забезпечують узгоджений зовнішній вигляд елементів програми, але спрощують звернення до DOM-об'єктів. Об'єкт XMLHttpRequest (або подібні механізми) використовується для асинхронного взаємодії з сервером, обробки запитів користувачів та завантаження в процесі роботи необхідних даних. Три з цих чотирьох технологій - CSS, DOM і JavaScript - складають DHTML (Dynamic HTML). Слід зауважити, що кошти DHTML, що з'явилися в 1997 році, подавали великі надії, але так і не виправдали їх. DHTML дозволяє створювати на базі Web-сторінок інтерфейси з досить великими інтерактивними можливостями, але будь-які зміни зовнішнього вигляду сторінки реалізуються лише шляхом повторної завантаження всього документа. Набір дій, які можна виконати без звертання до сервера, досить обмежений. Засоби DHTML інтенсивно використовуються в Ajax, але завдяки асинхронним запитам можна отримати результати, які неможливо отримати за допомогою звичайних Web-сторінок.
Таблиця 2.1. Базові технології Ajax
ГОУ ВПО «Шадринский державний педагогічний інститут»
Кафедра програмування та мережевих технологій
Курсова робота
«Розробка веб файлового менеджера з використанням технології Ajax»
студента 389 групи
Аллахвердієва Фармана
керівник
Кирилов А. Г.
Шадринськ 2008
Зміст
Введення
Технологія Ajax.
Переваги Ajax
Системи, створені з використанням Ajax
Базові технології Ajax
Файловий веб менеджер на основі технології Ajax
Основні можливості
Принцип реалізації програмного коду
Висновок
Введення
Для реалізації свого веб менеджера я вирішив використовувати технологію Ajax як найбільш актуальну, і в даний час отримала найбільше поширення в клієнт серверних додатках, наприклад таких відомих веб ресурсах як Google Maps і Gmail
Перевага Ajax полягає в тому, що дана технологія дозволяє обробляти більш великий набір подій, що відповідають діям користувача. Стає можливим реалізувати перетягування об'єктів та інші складні функції інтерфейсу, у результаті чого Web - додаток стає схожим на звичайну прикладну програму, виконувану на настільній системі. З точки зору практичності ця свобода дій важлива не тому, що вона більше відповідає уявленням користувача про віртуальному світі, а тому, що дозволяє краще поєднувати взаємодія з користувачем і запити до сервера.
Технологія Ajax
Переваги Ajax
Браузер має справу з додатком, а не з вмістом для класичного додатки на базі Web-сторінок браузер являє собою лише низькорівневий термінал. Він не має інформації про те, який етап роботи виконується користувачем. На сервері містяться мінімальні відомості про це, які, по суті, зводяться до підтримки сеансу.
Якщо ви працюєте з Java або. NET, засоби підтримки сеансу на сервері доступні, подібно запитам відповідей і MIME-типами, за допомогою стандартного API.
Коли користувач реєструється або іншим способом ініціалізує сеанс, створюється кілька об'єктів на стороні сервера. Вони представляють, наприклад, "кошик" покупця або платіжну картку користувача. Одночасно браузер отримує вихідну сторінку. Вона доставляється у вигляді потоку HTML-даних, які являють собою поєднання стандартних елементів і даних, специфічних для конкретного користувача. При кожному зверненні до сервера браузер отримує чергову сторінку, що містить дані тих же типів, що в попередніх документах. Браузер справно прибирає з екрана старий документ і відображає новий. Інших дій від нього і не слід очікувати: це низькорівнева програма, яка робить тільки те, що було передбачено розробниками. Коли користувач активізує посилання, що відповідає закінченню сеансу, або закриває браузер, виконання програми завершується і сеанс руйнується. Інформація, яку користувач повинен побачити при наступній реєстрації, заноситься в довготривале сховище. У Ajax - додатку частина прикладної логіки переноситься на браузер.
Після реєстрації користувача клієнтське додаток доставляється браузеру. На багато дій користувача це додаток здатний реагувати самостійно. Якщо є в наявності можливостей бракує, воно передає запити серверу, не перериваючи послідовність дій користувача.
При реєстрації користувача браузеру надається більш складний документ, істотну частину якого становить код JavaScript. Цей документ залишається доступним користувачеві протягом всього сеансу; при цьому, залежно від дій користувача, він змінює свій зовнішній вигляд. Клієнтська програма знає, як реагувати на дані, що вводяться, і здатна вирішувати, обробляти їх самостійно, чи посилати запит серверу (який у свою чергу звернеться до бази даних або до іншого ресурсу) або зробити і те й інше.
Оскільки документ присутній на стороні клієнта протягом усього сеансу, він здатний зберігати інформацію про його стан. Наприклад, відомості про стан "кошики" покупця можуть зберігатися не на сервері, а в клієнтській програмі.
Як було сказано раніше, на кожному етапі роботи класичне Web - програма надає поєднання стандартних елементів і спеціальних даних. Коли користувач додає товар в "кошик", додаток у відповідь має лише змінити загальну ціну або, при наявності помилки, сообщітьо ній. Код, що відповідає за ці дії, становить незначну частину документа. У Ajax-додатку "кошик" може мати більш високим "інтелектом" і передавати серверу асинхронні запити. Шаблон, елементи навігації та інші компоненти сторінки вже присутні на стороні клієнта, тому сервер повинен передавати тільки дані, отримані в результаті обробки запиту.
Ajax-програма може досягти даної мети різними способами, наприклад, повернути фрагмент JavaScript-коду, потік, що містить звичайний текст або невеликий XML-документ. Достатньо зауважити, що дані в будь-якому з цих форматів будуть мати значно менший обсяг, ніж сторінка, яка повертається класичним Web-додатком.
Трафік при роботі Ajax-додатками, спочатку зростає так як при реєстрації користувача клієнтської програмі доставляється складний додаток. Подальшу взаємодію з сервером стає набагато більш ефективним.
Для перехідного програми, створеного на базі Web-сторінок, сумарний трафік може виявитися менше, ніж для Ajax-додатки. Однак у міру збільшення часу роботи користувача ситуація змінюється і Ajax додаток стає набагато більш економічніше за свого конкурента, виконаного в рамках класичного підходу.
У Web-браузері передбачені два основних механізми введення даних: гіпертекстові посилання і HTML-форми. Гіпертекстові посилання можуть бути сформовані на сервері і забезпечені параметрами CGI (Common Gateway Interface - інтерфейс загального шлюзу). Їх можна оформити як зображення і засобами CSS (Cascading Style Sheets - каскадні таблиці стилів) організувати зворотний зв'язок з користувачами, наприклад, забезпечити зміну зовнішнього вигляду при наведенні на них курсору миші. Хороший Web-дизайнер при бажанні доб'ється того, що посилання будуть виглядати як повноправні компоненти користувальницького інтерфейсу.
Форми можуть містити багато компонентів, типові для користувача інтерфейсу звичайних додатків, а саме: поля редагування, прапорці та перемикачі опцій, розкривні списки та ін Однак деякі з компонентів у складі форм не підтримуються. Так, наприклад, у формах не передбачені дерева і таблиці. Форми, як і гіпертекстові посилання, містять URL, які вказують на ресурси сервера. Гіпертекстові посилання й форми можуть також вказувати на функції JavaScript. У традиційних Web-документах часто можна зустріти JavaScript-сценарії, перевіряючі коректність заповнення форм. Вони стежать за незаповненими полями, значеннями, що виходять за межі допустимого діапазону, та іншими подібними помилками. Передача даних на сервер відбувається лише в тому випадку, якщо форма заповнена коректно. JavaScript-функції присутні на стороні клієнта протягом того ж часу, що і містить їх Web-сторінка.
При зверненні до чергової сторінці користувачеві доводиться на час перервати роботу. Попередній документ ще деякий час відображається на екрані; деякі браузери навіть дозволяють активізувати яку-небудь з видимих посилань, але результати передбачити неможливо. Швидше за все, користувач, що надійшов подібним чином, зруйнує інформацію про сеанс, підтримувану на сервері. Після отримання нової сторінки користувачеві надаються приблизно ті ж можливості вибору, які він мав до цього. Наприклад, додавання в "кошик" товару, скажімо, брюк, навряд чи приведе до переходу від категорії "чоловічий одяг" до категорії "жіночий одяг" або "дитячий одяг". Уявімо собі тепер, як веде себе "кошик" покупця, реалізована у складі Ajax-додатки. Оскільки Ajax дозволяє передавати дані в асинхронному режимі, користувач може додавати товар в "кошик" з тією ж швидкістю, з якою він клацає мишею. Якщо клієнтська частина програми виконана професійно, вона без зусиль впорається з цим завданням, і користувачеві не доведеться у своїй роботі враховувати специфіку взаємодії програми і сервера. Очевидно, що реальної "кошики" не існує, вона виконана у вигляді об'єкта підтримки сеансу на сервері. Проте користувач, який робить покупки, не повинен нічого знати про об'єкт сеансу. "Кошик" - це поняття, що дозволяє спрощено представити їх дії. Необхідність переходити від поняття "кошик" до об'єктів, що містяться в пам'яті комп'ютера, створює дискомфорт для користувача. Необхідність очікувати поновлення сторінки примушує повернутися з віртуального світу в реальний. Додаток, реалізоване засобами Ajax, вільно від цього недоліку. Купувати товари в мережевому магазині користувачам доводиться лише час від часу, однак в інших областях діяльності, наприклад, при вирішенні складних інженерних завдань, похвилинної переривання роботи, пов'язане з необхідністю очікувати появи чергової сторінки, неприпустимо.
Ще одна перевага Ajax полягає в тому, що дана технологія дозволяє обробляти більш великий набір подій, що відповідають діям користувача. Стає можливим реалізувати перетягування об'єктів та інші складні функції інтерфейсу, у результаті чого Web - додаток стає схожим на звичайну прикладну програму, виконувану на настільній системі. З точки зору практичності ця свобода дій важлива не тому, що вона більше відповідає уявленням користувача про віртуальному світі, а тому, що дозволяє краще поєднувати взаємодія з користувачем і запити до сервера.
Для того щоб звернутися до сервера в класичному Web-додатку, ми повинні натиснути на гіпертекстове посилання або активізувати елемент форми, а потім чекати результату. Це неминуче відволікає від основної роботи. Якщо ж звернення до сервера відбувається у відповідь на переміщення миші, перетягування об'єкта або натискання клавіші, сервер працює паралельно з користувачем. У даному прикладі додаток реагує на натиснення клавіш в міру того, як користувач вводить інформацію в поле. Клієнт взаємодіє з сервером, витягує і відображає найбільш ймовірні завершення фраз.
У класичних Web-додатках для реалізації додаткових можливостей в документи часто включають фрагменти JavaScript-коду. Сторінкова модель не дозволяє цим фрагментами присутнім на стороні клієнта довше самої сторінки, а це обмежує їх придатність. У результаті JavaScript придбав репутацію мови, придатного лише для виробів і не заслуговує уваги серйозних розробників.
Створення коду для Ajax-додатків істотно відрізняється від того, до чого встигли звикнути програмісти. Код, що доставляється клієнту на початку роботи з додатком, доступний до завершення сеансу, причому він неперервні і не уповільнює роботу користувача і не призводить до марному витрачанню пам'яті. Якщо розробник прагне вийти на ринок незалежних додатків, то він повинен враховувати, що його програма буде використовуватися по кілька годин поспіль. Для цього потрібен високопродуктивний код, що допускає супровід. При його створенні необхідна дисципліна програмування і розуміння завдання, як і при написанні серверних програм.
Обсяг коду, ймовірно, буде більшою, ніж у випадку класичного Web-додатки. У результаті більше значення отримує сама структура коду. Створення програми вже стає не під силу поодинці - цим повинен займатися колектив розробників. У процесі роботи необхідно забезпечити виділення підзадач, враховувати подальшу підтримку, одним словом, робота буде відбуватися за тим же сценарієм, що і створення звичайних програм для настільних систем.
Ajax вже використовується для створення реальних додатків, і переваги даного підходу видно на практиці.
Системи, створені з використанням Ajax
Найбільший внесок у формування сучасного уявлення про Ajax - додатках внесла компанія Google. (Вона використовувала дану технологію ще до того, як та отримала ім'я Ajax.) Бета-версія служби GMail стала доступна на початку 2004 року. Ця служба привернула увагу користувачів не тільки розмірами наданого ним поштової скриньки, але і інтерфейсом, який дозволяв одночасно відкривати кілька повідомлень і автоматично оновлював список кореспонденції, навіть якщо користувач готував в цей час нове повідомлення. Це був суттєвий крок вперед в порівнянні зі звичайними поштовими системами, пропонованими більшістю провайдерів. Порівнюючи GMail з Web-інтерфейсами корпоративних поштових серверів, наприклад, Microsoft Outlook і Lotus Notes, неважко помітити, що GMail забезпечує більшість функцій, не вдаючись до допомоги великовагових і ненадійних елементів ActiveX або Java-аплетів. У результаті служба доступна не тільки для корпоративних користувачів, озброєних спеціально налаштованими машинами, але і для більшості звичайних систем.За GMail пішли інші інтерактивні служби, наприклад, Google Suggest, пошуковий сервер якої автоматично пропонує завершення фрази, що вказується в складі запиту, і Google Maps - інтерактивна Швидка, карта, за допомогою якої визначається розташування ресурсу. Почали експерименти з даною технологією і інші компанії. Як приклад можна навести інтерактивну систему Flickr, яка в даний час є складовою частиною Yahoo!.
Згадані вище системи - лише перевірка можливостей нового підходу, вони представляють собою перехідні програми, застосовувані лише епізодично. За ними послідували незалежні Ajax-додатки.
Наявність додатків, створених на базі Ajax, свідчить про те, що новий підхід отримує визнання розробників. Якщо окремі програмісти іноді використовують нову технологію лише для того, щоб ознайомитися з нею, то такі компанії, як Google і Yahoo!, вдаються до неї тільки в тому випадку, якщо вона обіцяє виграш в конкурентній боротьбі.
Можна очікувати, що зі зростанням потреби у високоякісному прикладному інтерфейсі традиція використання Ajax отримає подальший розвиток. Цілком ймовірно, що протягом найближчих декількох років позиції Ajax-додатків на ринку будуть зміцнюватися.
Базові технології Ajax
Ajax - не одна конкретна технологія, скоріше це сукупність чотирьох технологій, які доповнюють один одного (табл.1).
Складні Ajax-додатки доставляються користувачам і як користувачі взаємодіють з ними за рахунок використання JavaScript-коду, який "об'єднує" додаток, визначає послідовність дій користувача та бізнес-логіку програми. Дії з інтерфейсом перетворюються в операції з елементами DOM (Document Object Model), за допомогою яких обробляються дані, доступні користувачеві, в результаті чого подання їх змінюється. Тут же проводиться обробка переміщень і клацань мишею, а також натисків клавіш. Каскадні таблиці стилів, або CSS (Cascading Style Sheets), забезпечують узгоджений зовнішній вигляд елементів програми, але спрощують звернення до DOM-об'єктів. Об'єкт XMLHttpRequest (або подібні механізми) використовується для асинхронного взаємодії з сервером, обробки запитів користувачів та завантаження в процесі роботи необхідних даних. Три з цих чотирьох технологій - CSS, DOM і JavaScript - складають DHTML (Dynamic HTML). Слід зауважити, що кошти DHTML, що з'явилися в 1997 році, подавали великі надії, але так і не виправдали їх. DHTML дозволяє створювати на базі Web-сторінок інтерфейси з досить великими інтерактивними можливостями, але будь-які зміни зовнішнього вигляду сторінки реалізуються лише шляхом повторної завантаження всього документа. Набір дій, які можна виконати без звертання до сервера, досить обмежений. Засоби DHTML інтенсивно використовуються в Ajax, але завдяки асинхронним запитам можна отримати результати, які неможливо отримати за допомогою звичайних Web-сторінок.
Таблиця 2.1. Базові технології Ajax
| JavaScript | Це мова сценаріїв загального призначення, призначений для включення коду в Web-додаток. Інтерпретатор JavaScript у складі Web-браузера забезпечує взаємодію з вбудованими засобами браузера. Дана мова використовується для створення Ajax-додатків |
| CSS (Cascading Style Sheets) | CSS надає можливість визначати стилі елементів Web-сторінки. За допомогою цієї технології можна без праці забезпечити узгодженість зовнішнього вигляду компонентів додатка. У Ajax CSS використовується для зміни представлення інтерфейсу в процесі інтерактивної взаємодії |
| DOM (Document Object Model) | DOM становить структуру Web-сторінки у вигляді набору об'єктів, які можна обробляти засобами JavaScript. Це дає можливість змінювати зовнішній вигляд інтерфейсу Ajax-додатки в процесі роботи |
| Об'єкт XMLHttpRequest | Об'єкт XMLHttpRequest дозволяє програмісту отримувати дані з Web-сервера у фоновому режимі. Як правило, повертається інформація надається у форматі XML, але даний об'єкт дозволяє також працювати з будь-якими текстовими даними |
Дуже важливо, що кошти підтримки всіх розглянутих тут технологій вже присутні в більшості сучасних браузерів, включаючи Microsoft Internet Explorer, сімейство Mozilla / Gecko, Firefox, Mozilla Suite, Netscape Navigator, Camino, Opera, Apple Safari і Konqueror (який орієнтований на виконання в середовищі Unix KDE). На жаль, конкретні реалізації цих технологій в різних браузерах різняться рядом важливих деталей, більше того, розходження зустрічаються навіть у різних версіях одного продукту. Правда, за останні п'ять років стан справ дещо покращився, і розроблені способи, що дозволяють впоратися з несумісністю браузерів.
У складі кожної сучасної операційної системи є браузер. Таким чином, переважна більшість настільних і портативних комп'ютерів вже готове для запуску Ajax-додатків. Розробники програм на базі Java або. NET можуть лише мріяти про це. Браузери для КПК і мобільних телефонів зазвичай мають усічений набір можливостей і не підтримують повний набір Ajax-технологій. Слід зауважити, що якби кошти підтримки Ajax і були в наявності, все одно розміри екрану і особливості введення даних створювали б суттєві проблеми при роботі з Ajax-додатками. На сьогоднішній день інфраструктура Ajax орієнтована лише на настільні та портативні комп'ютери.
Файловий веб менеджер на основі технології Ajax
Основні можливості
Даний файловий веб менеджер призначений для роботи з файлами по мережі, використовуючи стандартні програми для перегляду інтернет сторінок, наприклад Explorer або Firefox.
До основних можливостей програми відноситься:
- Перегляд;
- Редагування;
- Копіювання;
- Перейменування;
- Перенесення;
- Створення каталогу;
- Створення файлу;
- Видалення.
Принцип реалізації програмного коду
Файловий веб менеджер написаний на Ajax працює на стороні сервера, що вимагає наявності для його роботи, сервер працює з Php скриптами. Дана програма є крос платформної, що дозволяє використовувати її як на NT платформах, так і на Unix системах.
Основною мовою програмування для написання даного менеджера, є Php.
Функція реалізації перегляду файлів
<?
function copy_dir ($ src, $ dst) / / копіювання каталогу з поддерікторіямі
{
if (! file_exists ($ src)) return false; / / якщо файлу не існує, виходить з функції
if (is_file ($ src)) return @ copy ($ src, $ dst); / / якщо файл виробляє його копіювання і фозвращает результат копіювання
$ Error = false;
if (! mkdir ($ dst)) $ error = true; / / створює потрібного каталог
$ Dh = @ opendir ($ src); / / відкриває каталог, який необхідно скопіювати
while (false! == ($ f = readdir ($ dh))) {/ / читає послеовательно содержівое каталогу
if ($ f =='.' | | $ f =='..') continue; / / перехрдіт на наступну ітерацію, якщо каталог. або ..
if (! copy_dir ($ src .'/'.$ f, $ dst .'/'.$ f)) $ error = true;
}
@ Closedir ($ dh);
return! $ error;
}
function TryCopy ($ src, $ dst, $ name)
{
return copy_dir ($ src, $ dst ."/".$ name);
}
function doView ()
{
global $ FS;
$ Fname = $ FS. $ _POST ["Data"] ["fname"];
if (! file_exists ($ fname)) {echo "ViewAnswer (2);"; return false;}
if (($ text = @ file_get_contents ($ fname ))=== false) echo "ViewAnswer (1);";
else {
$ Text = divg_replace ("/ \ "/"," \ \ \" ", $ text);
echo "text = \" ". mysql_escape_string ($ text)." \ "; ViewAnswer (0)";
}
}
doView ();
?>
Функція реалізації редагування і створення файлу
<?
function Save ($ name) / / збереження файлу
{
if (! ($ f = @ fopen ($ name, "w"))) return 1; / / спроба відкриття файлу для запису
fputs ($ f, $ _POST ["data"] ["text"]); / / запис в файл
fclose ($ f); / / закриття файлу
return 2;
}
function doEdit ()
{
global $ FS;
$ Saved = 0;
$ Name = $ FS. $ _POST ["Data"] ["name"];
if (@ $ _POST ["data"] ["save"]) $ saved = Save ($ name);
if (! file_exists ($ name)) {echo "EditAnswer (1, $ saved);"; return false;}
if (($ text = @ file_get_contents ($ name ))=== false) echo "EditAnswer (1, $ saved);";
else
echo "text = \" ". mysql_escape_string ($ text)." \ "; EditAnswer (0, $ saved);";
}
doEdit ();
?>
Функція реалізує копіювання
<?
function copy_dir ($ src, $ dst) / / копіювання каталогу
{
if (! file_exists ($ src)) return false; / / вихід із функції якщо копируемого файлу / каталогу не існує
if (is_file ($ src)) return @ copy ($ src, $ dst); / / якщо необхідно скопіювати файл, виробляємо копіювання і повертаємо результат копіювання (помилка чи ні)
$ Error = false;
if (! mkdir ($ dst)) return false; / / якщо не вдалося створити каталог виходимо їх функції
$ Dh = @ opendir ($ src); / / відкриваємо каталог для роботи
while (false! == ($ f = readdir ($ dh))) {/ / цикл виконується поки в каталозі не перебраний всі файли
if ($ f =='.' | | $ f =='..') continue; / / якщо файл / каталог -. або .. переходимо на наступну ітерацію
if (! copy_dir ($ src .'/'.$ f, $ dst .'/'.$ f)) $ error = true; / / викликаємо цю ж функцію, передавши ім'я копируемого файлу / каталогу й ім'я результуючого каталогу
}
@ Closedir ($ dh); / / закриваємо відкритий каталог
return! $ error;
}
function TryCopy ($ src, $ dst, $ name)
{
return copy_dir ($ src, $ dst ."/".$ name); / / викликаємо функцію копіювання
}
function doCopy ()
{
global $ FS;
$ Src = $ FS. $ _POST ["Data"] ["source"]; / / зчитуємо вихідне ім'я каталогу / файлу з даних, що прийшли з сервера
$ Dst = $ FS. $ _POST ["Data"] ["dst"]; / / зчитуємо каталог в який необхідно скопіювати
$ Name = $ _POST ["data"] ["name"]; / / зчитуємо нового ім'я джерела копіювання
if (! file_exists ($ dst)) {echo "CopyAnswer (3);"; return false;} / / перевіряємо існування каталогу в який необхідно скопіювати
if (! file_exists ($ src)) {echo "CopyAnswer (2);"; return false;} / / перевіряємо існування джерела копіювання
if (! TryCopy ($ src, $ dst, $ name)) echo "CopyAnswer (1);"; / / виконуємо копіювання і повертаємо в якості результату виклик
else echo "CopyAnswer (0)"; / / функції з визначені статусом завершення копіювання
}
doCopy ();
?>
Функція реалізує перенесення та перейменування.
<?
function TryRename ($ old, $ new)
{
return @ rename ($ old, $ new); / / переміменованіе каталогу / фалйа
}
function doRename ()
{
global $ FS;
$ Old = $ FS. $ _POST ["Data"] ["oldname"];
$ New = $ FS. $ _POST ["Data"] ["newname"];
if (! file_exists ($ old)) {echo "RenameAnswer (2);"; return false;}
if (! TryRename ($ old, $ new)) echo "RenameAnswer (1);";
else echo "RenameAnswer (0)";
}
doRename ();
?>
Функція реалізує створення каталогу
<?
function doCreate ()
{
global $ FS;
$ Src = $ FS. $ _POST ["Data"] ["dir"];
$ Name = $ _POST ["data"] ["name"];
if (! file_exists ($ src)) {echo "CreateDirAnswer (2);"; return false;} / / перевіряє існування файлу / каталогу з таким ж ім'ям
if (! @ mkdir ($ src ."/".$ name)) echo "CreateDirAnswer (1);"; / / створює каталог
else echo "CreateDirAnswer (0)";
}
doCreate ();
?>
Функція для видалення каталогу чи файлу
<?
function del_dir ($ path)
{
$ Dir = @ opendir ($ path); / / відкриття каталогу
while (($ fname = readdir ($ dir))) {/ / цикл, який здійснює проссмотр вмісту файлу
if (($ fname ==".") or ($ fname =="..")) continue; / / перехід на наступну ітерацію, якщо ім'я файлу / каталогу -. або ..
if (is_file ($ path ."/".$ fname)) @ unlink ($ path ."/".$ fname); / / якщо переглядати елемент - файл, видаляємо його
else if (! del_dir ($ path ."/".$ fname)) return false; / / якщо переглядати елемент - каталог, викликаємо цю ж функцію
}
return @ rmdir ($ path); / / видаляємо каталог і повертаємо результат видалення
}
function TryDelete ($ path)
{
if (is_dir ($ path)) return del_dir ($ path);
else return @ unlink ($ path);
}
global $ FS;
$ Path = $ FS. $ _POST ["Data"] ["delname"];
if (! file_exists ($ path)) echo "DeleteAnswer (2);";
if (! TryDelete ($ path)) echo "DeleteAnswer (1);";
else echo "DeleteAnswer (0)";
?>
Висновок
Я вважаю що виконав основне призначення работи.В ході проробленої роботи я отримали уявлення про технології Ajax, наочно продемонстрував її можливості і переваги в порівнянні з іншими технологіями.
При проектуванні свого веб менеджера, я вивчив можливості серверних програм підтримують роботу з Php скриптами, можливості мови програмування Php і Java скриптів.
У складі кожної сучасної операційної системи є браузер. Таким чином, переважна більшість настільних і портативних комп'ютерів вже готове для запуску Ajax-додатків. Розробники програм на базі Java або. NET можуть лише мріяти про це. Браузери для КПК і мобільних телефонів зазвичай мають усічений набір можливостей і не підтримують повний набір Ajax-технологій. Слід зауважити, що якби кошти підтримки Ajax і були в наявності, все одно розміри екрану і особливості введення даних створювали б суттєві проблеми при роботі з Ajax-додатками. На сьогоднішній день інфраструктура Ajax орієнтована лише на настільні та портативні комп'ютери.
Файловий веб менеджер на основі технології Ajax
Основні можливості
Даний файловий веб менеджер призначений для роботи з файлами по мережі, використовуючи стандартні програми для перегляду інтернет сторінок, наприклад Explorer або Firefox.
До основних можливостей програми відноситься:
- Перегляд;
- Редагування;
- Копіювання;
- Перейменування;
- Перенесення;
- Створення каталогу;
- Створення файлу;
- Видалення.
Принцип реалізації програмного коду
Файловий веб менеджер написаний на Ajax працює на стороні сервера, що вимагає наявності для його роботи, сервер працює з Php скриптами. Дана програма є крос платформної, що дозволяє використовувати її як на NT платформах, так і на Unix системах.
Основною мовою програмування для написання даного менеджера, є Php.
Функція реалізації перегляду файлів
<?
function copy_dir ($ src, $ dst) / / копіювання каталогу з поддерікторіямі
{
if (! file_exists ($ src)) return false; / / якщо файлу не існує, виходить з функції
if (is_file ($ src)) return @ copy ($ src, $ dst); / / якщо файл виробляє його копіювання і фозвращает результат копіювання
$ Error = false;
if (! mkdir ($ dst)) $ error = true; / / створює потрібного каталог
$ Dh = @ opendir ($ src); / / відкриває каталог, який необхідно скопіювати
while (false! == ($ f = readdir ($ dh))) {/ / читає послеовательно содержівое каталогу
if ($ f =='.' | | $ f =='..') continue; / / перехрдіт на наступну ітерацію, якщо каталог. або ..
if (! copy_dir ($ src .'/'.$ f, $ dst .'/'.$ f)) $ error = true;
}
@ Closedir ($ dh);
return! $ error;
}
function TryCopy ($ src, $ dst, $ name)
{
return copy_dir ($ src, $ dst ."/".$ name);
}
function doView ()
{
global $ FS;
$ Fname = $ FS. $ _POST ["Data"] ["fname"];
if (! file_exists ($ fname)) {echo "ViewAnswer (2);"; return false;}
if (($ text = @ file_get_contents ($ fname ))=== false) echo "ViewAnswer (1);";
else {
$ Text = divg_replace ("/ \ "/"," \ \ \" ", $ text);
echo "text = \" ". mysql_escape_string ($ text)." \ "; ViewAnswer (0)";
}
}
doView ();
?>
Функція реалізації редагування і створення файлу
<?
function Save ($ name) / / збереження файлу
{
if (! ($ f = @ fopen ($ name, "w"))) return 1; / / спроба відкриття файлу для запису
fputs ($ f, $ _POST ["data"] ["text"]); / / запис в файл
fclose ($ f); / / закриття файлу
return 2;
}
function doEdit ()
{
global $ FS;
$ Saved = 0;
$ Name = $ FS. $ _POST ["Data"] ["name"];
if (@ $ _POST ["data"] ["save"]) $ saved = Save ($ name);
if (! file_exists ($ name)) {echo "EditAnswer (1, $ saved);"; return false;}
if (($ text = @ file_get_contents ($ name ))=== false) echo "EditAnswer (1, $ saved);";
else
echo "text = \" ". mysql_escape_string ($ text)." \ "; EditAnswer (0, $ saved);";
}
doEdit ();
?>
Функція реалізує копіювання
<?
function copy_dir ($ src, $ dst) / / копіювання каталогу
{
if (! file_exists ($ src)) return false; / / вихід із функції якщо копируемого файлу / каталогу не існує
if (is_file ($ src)) return @ copy ($ src, $ dst); / / якщо необхідно скопіювати файл, виробляємо копіювання і повертаємо результат копіювання (помилка чи ні)
$ Error = false;
if (! mkdir ($ dst)) return false; / / якщо не вдалося створити каталог виходимо їх функції
$ Dh = @ opendir ($ src); / / відкриваємо каталог для роботи
while (false! == ($ f = readdir ($ dh))) {/ / цикл виконується поки в каталозі не перебраний всі файли
if ($ f =='.' | | $ f =='..') continue; / / якщо файл / каталог -. або .. переходимо на наступну ітерацію
if (! copy_dir ($ src .'/'.$ f, $ dst .'/'.$ f)) $ error = true; / / викликаємо цю ж функцію, передавши ім'я копируемого файлу / каталогу й ім'я результуючого каталогу
}
@ Closedir ($ dh); / / закриваємо відкритий каталог
return! $ error;
}
function TryCopy ($ src, $ dst, $ name)
{
return copy_dir ($ src, $ dst ."/".$ name); / / викликаємо функцію копіювання
}
function doCopy ()
{
global $ FS;
$ Src = $ FS. $ _POST ["Data"] ["source"]; / / зчитуємо вихідне ім'я каталогу / файлу з даних, що прийшли з сервера
$ Dst = $ FS. $ _POST ["Data"] ["dst"]; / / зчитуємо каталог в який необхідно скопіювати
$ Name = $ _POST ["data"] ["name"]; / / зчитуємо нового ім'я джерела копіювання
if (! file_exists ($ dst)) {echo "CopyAnswer (3);"; return false;} / / перевіряємо існування каталогу в який необхідно скопіювати
if (! file_exists ($ src)) {echo "CopyAnswer (2);"; return false;} / / перевіряємо існування джерела копіювання
if (! TryCopy ($ src, $ dst, $ name)) echo "CopyAnswer (1);"; / / виконуємо копіювання і повертаємо в якості результату виклик
else echo "CopyAnswer (0)"; / / функції з визначені статусом завершення копіювання
}
doCopy ();
?>
Функція реалізує перенесення та перейменування.
<?
function TryRename ($ old, $ new)
{
return @ rename ($ old, $ new); / / переміменованіе каталогу / фалйа
}
function doRename ()
{
global $ FS;
$ Old = $ FS. $ _POST ["Data"] ["oldname"];
$ New = $ FS. $ _POST ["Data"] ["newname"];
if (! file_exists ($ old)) {echo "RenameAnswer (2);"; return false;}
if (! TryRename ($ old, $ new)) echo "RenameAnswer (1);";
else echo "RenameAnswer (0)";
}
doRename ();
?>
Функція реалізує створення каталогу
<?
function doCreate ()
{
global $ FS;
$ Src = $ FS. $ _POST ["Data"] ["dir"];
$ Name = $ _POST ["data"] ["name"];
if (! file_exists ($ src)) {echo "CreateDirAnswer (2);"; return false;} / / перевіряє існування файлу / каталогу з таким ж ім'ям
if (! @ mkdir ($ src ."/".$ name)) echo "CreateDirAnswer (1);"; / / створює каталог
else echo "CreateDirAnswer (0)";
}
doCreate ();
?>
Функція для видалення каталогу чи файлу
<?
function del_dir ($ path)
{
$ Dir = @ opendir ($ path); / / відкриття каталогу
while (($ fname = readdir ($ dir))) {/ / цикл, який здійснює проссмотр вмісту файлу
if (($ fname ==".") or ($ fname =="..")) continue; / / перехід на наступну ітерацію, якщо ім'я файлу / каталогу -. або ..
if (is_file ($ path ."/".$ fname)) @ unlink ($ path ."/".$ fname); / / якщо переглядати елемент - файл, видаляємо його
else if (! del_dir ($ path ."/".$ fname)) return false; / / якщо переглядати елемент - каталог, викликаємо цю ж функцію
}
return @ rmdir ($ path); / / видаляємо каталог і повертаємо результат видалення
}
function TryDelete ($ path)
{
if (is_dir ($ path)) return del_dir ($ path);
else return @ unlink ($ path);
}
global $ FS;
$ Path = $ FS. $ _POST ["Data"] ["delname"];
if (! file_exists ($ path)) echo "DeleteAnswer (2);";
if (! TryDelete ($ path)) echo "DeleteAnswer (1);";
else echo "DeleteAnswer (0)";
?>
Висновок
Я вважаю що виконав основне призначення работи.В ході проробленої роботи я отримали уявлення про технології Ajax, наочно продемонстрував її можливості і переваги в порівнянні з іншими технологіями.
При проектуванні свого веб менеджера, я вивчив можливості серверних програм підтримують роботу з Php скриптами, можливості мови програмування Php і Java скриптів.