Программирование AJAX-сайтов с использованием JsHttpRequest
Пример использования JsHttpRequest
Ключевые возможности JsHttpRequest
Работа JsHttpRequest как PHP-модуля для Prototype
Традиционно World Wide Web организуется как взаимосвязанный набор HTML-страниц, перемещение между которыми осуществляется посредством гиперссылок. Щелкнув по такой ссылке, пользователь открывает в своем браузере ту или иную HTML-страницу, а о старой «забывает». При этом страницы чаще всего являются не статическими (раз и навсегда сохраненными на сервере), а динамическими, то есть каждый раз строятся заново (по запросу пользователя) на основе информации, хранящейся в базе данных сайта.
Однако в последние несколько лет такой способ организации сайтов начал расширяться с помощью технологии AJAX, предоставляющей пользователю больше гибкости и удобства.
AJAX (Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это технология загрузки данных с сервера, при использовании которой страница, открытая в браузере, не заменяется на новую целиком. Вместо этого обновляется только определенный блок на странице. Самое главное в AJAX — именно отсутствие перехода, что делает web-сайт очень похожим на оконное GUI-приложение.
|
В настоящее время строгого стандарта создания AJAX-приложений не существует, а вместо этого применяются различные библиотеки и средства, облегчающие работу программиста.
В этой статье мы рассмотрим популярную в России библиотеку JsHttpRequest, разработанную автором данной статьи. Ключевые особенности этой библиотеки: поддержка PHP, простота использования, «прозрачная» работа с русскоязычными (и другими) кодировками, возможность закачивать файлы на сервер методом AJAX, а также отличная кроссбраузерность (работает даже в очень старых браузерах).
Примечание 1
Домашняя страница библиотеки — http://dklab.ru/lib/JsHttpRequest. Там же вы сможете прочитать полную документацию, а также скачать примеры использования библиотеки.
Компоненты AJAX-приложения
Любое приложение, построенное по технологии AJAX, состоит из двух взаимосвязанных между собой частей: клиентской и серверной.
Клиентская часть системы (назовем ее frontend’ом) — некоторый код на языке программирования JavaScript, выполняемый непосредственно в браузере пользователя. Его задача — послать запрос на сервер, дождаться от него ответа, а затем принять данные, обработать их и отобразить в заранее отведенной для этого области без перезагрузки всей страницы.
Серверная часть системы (backend-приложения) — это скрипт, который запускается на сервере по запросу клиентской части. Он выполняет всю основную работу по генерации данных, которые будут в дальнейшем показаны пользователю. Здесь мы рассматриваем только PHP-сценарии, поскольку они штатно поддерживаются в JsHttpRequest.
Таким образом, чтобы разрабатывать AJAX-приложения, необходимо знать как минимум два языка программирования: серверный (PHP) и клиентский (JavaScript).
Пример использования JsHttpRequest
Проиллюстрируем простоту использования JsHttpRequest. Для этого рассмотрим пример AJAX-приложения, вычисляющего значение MD5 (криптографическая хэш-функция) от введенной пользователем строки или закачанного им файла. Вычисление происходит на сервере (функция md5() встроена в PHP, но ее нет в JavaScript), а результат отображается в специальном блоке на странице, открытой в браузере. Для загрузки используется технология AJAX.
Примечание 2
Функция MD5 возвращает 32-значный идентификатор, различающийся для разных сколь угодно длинных данных. Следовательно, на практике почти невозможно подобрать две разные величины, для которых MD5 вернет одинаковое значение.
См. код клиентской и серверной части приложения. Листинги программ также находятся на CD: клиентская часть в файле md5_frontend.html, а серверная — в файле md5_backend.php.
Ключевые возможности JsHttpRequest
Функциональность, предоставляемая библиотекой:
- «прозрачная» работа с русскоязычными кодировками (как в PHP, так и в JavaScript). Язык JavaScript является полностью Unicode-ориентированным, в то время как PHP-скрипты, как правило, пишут с использованием национальных кодировок (например, windows-1251). Преобразование данных из Unicode в windows-1251 и обратно при «ручном» AJAX-программировании очень однообразно и чревато ошибками (в этом может убедиться всякий, кто имеет опыт создания AJAX-приложений без применения библиотек). К счастью, JsHttpRequest берет всю эту работу на себя. Вы можете писать скрипты так, как привыкли к этому раньше, обо всех перекодировках позаботится библиотека;
- закачка файлов (upload) из браузера на сервер без перезагрузки страницы. Принято считать, что при помощи AJAX невозможно закачивать файлы на сервер. Такое мнение возникло потому, что компонент XMLHttpRequest, встроенный во многие браузеры, действительно, не поддерживает закачку файлов. Тем не менее обходной способ все же существует, и именно он реализуется в JsHttpRequest. Для библиотеки файл представляет собой обычные данные, поэтому она без проблем передает их на сервер;
- полная поддержка отладочных возможностей PHP. Если в скрипте на серверной стороне происходит ошибка (включая фатальную, например вызов неопределенной функции), клиентская часть имеет возможность корректно ее обработать и вывести диагностику. Помимо данных ответа, ей передается выходной поток скрипта, содержащий текст ошибки PHP. Собственно, в приведенном выше примере мы продемонстрировали это при помощи инструкции echo, но вместо echo могло быть все что угодно, начиная от Notice и заканчивая фатальной ошибкой PHP (например, «вызов неопределенной функции») или даже ошибкой нехватки памяти (превышение значения, заданного директивой memory_limit файла php.ini). Таким образом, отладка AJAX-приложений из сложного и неприятного занятия превращается в нечто обыденное;
- кроссбраузерность. Библиотека работает в IE5.0+, Mozilla 1.7+, Firefox 1.0+, Opera 7.20+, Safari (здесь «+» означает «в этой и более новых версиях»). Кроме того, код может работать без поддержки ActiveX и XMLHttpRequest (однако если эти возможности включены в браузер, то они автоматически задействуются);
- передача многомерных структур данных запроса и ответа сервера. Приведенный выше пример AJAX-приложения показывает, что JsHttpRequest может передавать данные на сервер в виде произвольного объекта JavaScript (в нашем случае это был объект { str: “строка”, upl: “элемент закачки” }, см. второй параметр метода query()). Этот объект автоматически трансформируется в привычный PHP-разработчику массив $_REQUEST (автоматически происходят все необходимые преобразования кодировок). И наоборот, PHP-часть приложения передает произвольный массив PHP из серверной части в клиентскую (он сохраняется в глобальной переменной $_RESULT либо в свойстве $JsHttpRequest->RESULT — кому как удобнее). Этот массив можно получить в виде JavaScript-объекта в обработчике результата (в нашем примере это параметр с именем result). Таким образом, JsHttpRequest берет на себя всю работу по преобразованию PHP-массивов в JavaScript-объекты и обратно. Более того, эти массивы и объекты могут иметь произвольную степень вложенности: например, можно создать в PHP массив $_RESULT = array(‘first’ => array(‘second’ => 123)) и получить к его элементу 123 доступ из JavaScript в виде result.first.second;
|
Примечание 3
Итак, работа со структурами данных происходит «родными» средствами языков. Пользователю библиотеки не нужно ничего знать об XML, традиционно используемом в AJAX-программировании.
- поддержка сессий PHP стандартными средствами. При применении JsHttpRequest вы можете работать с сессиями PHP (массив $_SESSION) привычным образом, никаких дополнительных знаний не требуется.
Работа JsHttpRequest как PHP-модуля для Prototype
Отдельного рассмотрения заслуживает тот факт, что JsHttpRequest может использоваться в качестве PHP-части AJAX-сайта, применяющего библиотеку Prototype.
Примечание
Prototype (http://prototypejs.org) — это популярное средство для упрощения разработки сложных JavaScript-приложений, включающее поддержку AJAX и другие возможности. Вы наверняка о нем слышали, если активно работали с JavaScript.
Итак, после подключения небольшого модуля совместимости (файл JsHttpRequest-prototype.js в дистрибутиве библиотеки) вы можете работать с Prototype так, как привыкли. Но при этом вы пишете PHP-составляющую приложения с использованием JsHttpRequest, а потому получаете в свое распоряжение всю функциональность этой библиотеки (кроссбраузерность, закачка файлов, работа с русскими кодировками, обмен многомерными структурами данных и т.д.). Небольшой пример JavaScript-кода, в котором JsHttpRequest и Prototype работают совместно, приведен в листинге.
В качестве PHP-части можно использовать тот же самый скрипт, что был приведен в предыдущем примере.
|
Заключение
В этой статье мы кратко рассмотрели библиотеку JsHttpRequest, серьезно упрощающую работу по созданию сложных AJAX-сайтов. Она имеет целый ряд ключевых особенностей, отсутствующих в аналогичных продуктах. Дистрибутив библиотеки можно взять на прилагаемом к журналу CD или скачать по адресу: http://dklab.ru/lib/JsHttpRequest/demo.zip.
 |
|
