Разработка веб файлового менеджера с использованием технологии 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 (DocumentObject Model), с помощью которых обрабатываются данные, доступные пользователю,в результате чего представление их изменяется. Здесь же производится обработкаперемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей,или CSS (Cascading Style Sheets), обеспечивают согласованный внешний видэлементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest(или подобные механизмы) используется для асинхронного взаимодействия ссервером, обработки запросов пользователя и загрузки в процессе работынеобходимых данных. Три из этих четырех технологий — CSS, DOM и JavaScript —составляют DHTML (Dynamic HTML). Следует заметить, что средства DHTML,появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.DHTML позволяет создавать на базе Web-страниц интерфейсы с достаточно большимиинтерактивными возможностями, но любые изменения внешнего вида страницы реализуютсялишь путем повторной загрузки всего документа. Набор действий, которые можновыполнить без обращения к серверу, весьма ограничен. Средства DHTML интенсивноиспользуются в Ajax, но благодаря асинхронным запросам можно получитьрезультаты, которые невозможно получить с помощью обычных Web-страниц.
Таблица 2.1. Базовыетехнологии AjaxJavaScript Это язык сценариев общего назначения, предназначенный для включения кода в 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, AppleSafari и Konqueror (который ориентирован на выполнение в среде Unix KDE). Ксожалению, конкретные реализации этих технологий в разных браузерах различаютсярядом важных деталей, более того, различия встречаются даже в разных версияходного продукта. Правда, за последние пять лет положение дел несколькоулучшилось, и разработаны способы, позволяющие справиться с несовместимостью браузеров.
В составе каждойсовременной операционной системы имеется браузер. Таким образом, подавляющеебольшинство настольных и портативных компьютеров уже готово для запускаAjax-приложений. Разработчики программ на базе Java или .NET могут лишь мечтатьоб этом. Браузеры для КПК и мобильных телефонов обычно имеют усеченный наборвозможностей и не поддерживают полный набор Ajax-технологий. Следует заметить,что если бы средства поддержки Ajax и имелись в наличии, все равно размерыэкрана и особенности ввода данных создавали бы существенные проблемы при работес Ajax-приложениями. На сегодняшний день инфраструктура Ajax ориентирована лишьна настольные и портативные компьютеры.
 

Файловыйвеб менеджер на основе технологии Ajax
 
Основные возможности
Данный файловый вебменеджер предназначен для работы с файлами по сети, используя стандартныепрограммы для просмотра интернет страниц, например Explorer или Firefox.
К основным возможностямпрограммы относится:
-          просмотр;
-          редактирование;
-          копирование;
-          переименование;
-          перенос;
-          созданиекаталога;
-          создание файла;
-          удаление.
Принцип реализациипрограммного кода
Файловый веб менеджернаписанный на Ajax работает на стороне сервера, что требует наличия для егоработы, сервер работающий с Php скриптами. Данная программа является кроссплатформенной, что позволяет использовать её как на NT платформах, так и наUnix системах.
Основным языкомпрограммирования для написания данного менеджера, является Php.
Функция реализациипросмотра файлов

functioncopy_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=preg_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);»;returnfalse;}
if (($text=@file_get_contents($name))===false) echo«EditAnswer(1,$saved);»;
else
echo«text=\»".mysql_escape_string($text)."\";EditAnswer(0,$saved);";
}
doEdit();
?>
Функцияреализующая копирование

functioncopy_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);»; // выполняемкопирование и возвращаем в качестве результата вызов
elseecho «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);»;
elseecho «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);//если просмотриваемый элемент — файл, удаляем его
elseif (!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);»;
elseecho «DeleteAnswer(0)»;
?>

Заключение
Я считаю что выполнил основное назначение работы.В ходепроделанной работы я получили представление о технологии Ajax, наглядно продемонстрировал еёвозможности и преимущества по сравнению с другими технологиями.
При проектировании своего веб менеджера, я изучил возможностисерверных программ поддерживающих работу с Php скриптами, возможности языка программирования Php и Java скриптов.