Показано с 1 по 2 из 2

Тема: AJAX. Программирование AJAX-сайтов с использованием JsHttpRequest

  1. #1
    Активный пользователь Аватар для Sandro
    Регистрация
    14.06.2008
    Сообщений
    2,811

    AJAX. Программирование AJAX-сайтов с использованием JsHttpRequest

    AJAX

    AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

    По-английски AJAX произносится как эй-джэкс, по-русски довольно распространено аякс.

    Технология

    AJAX — это не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:
    использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например:
    с использованием XMLHttpRequest (основной метод);
    через динамическое создание дочерних фреймов;
    через динамическое создание тега <script>.
    использование DHTML для динамического изменения содержания страницы;

    В качестве формата передачи данных обычно используются JSON или XML.

    История

    Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям». Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

    Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенным компанией Microsoft в 1998 году, или с использованием HTML элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

    AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

    Преимущества

    Экономия трафика
    Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что часто вместо загрузки всей страницы достаточно загрузить только небольшую изменившуюся часть.
    Уменьшение нагрузки на сервер
    AJAX позволяет несколько снизить нагрузку на сервер. К примеру, в Gmail, когда вы отмечаете прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту.
    Ускорение реакции интерфейса
    Поскольку нужно загрузить только изменившуюся часть, то пользователь видит результат своих действий быстрее.

    Недостатки

    Интеграция со стандартными инструментами браузера
    Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад» предоставляющая пользователям возможность вернуться к просмотренным ранее страницам.
    Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры.
    Динамически загружаемое содержимое недоступно поисковикам
    Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.
    Старые методы учёта статистики сайтов становятся неактуальными
    Многие сервисы статистики ведут учёт просмотров новых страниц сайта, для сайтов страницы которых широко используют AJAX, такая статистика теряет актуальность.

    Альтернативы

    Flash стек технологий в виде ActionScript 3, Flex, Flash Remoting составляет технологическую основу так называемых RIA (Rich Internet Applications) активно продвигаемых Macromedia (теперь часть Adobe). RIA являются главными конкурентами Ajax.

    Ссылки по теме:
    Перевод статьи «Новый подход к веб-приложениям» http://ajax-development.narod.ru/ajax-article.html
    Модель Ajax http://www.codenet.ru/webmast/js/ajax/
    Основы работы с Ajax http://designformasters.info/posts/start-with-ajax

    Материал взят из Википедии http://ru.wikipedia.org/wiki/Ajax
    Don't read the warnings, go straight and start to fly.

  2. #2
    Активный пользователь Аватар для Sandro
    Регистрация
    14.06.2008
    Сообщений
    2,811

    Re: AJAX. Программирование AJAX-сайтов с использованием JsHttpRequest

    Программирование AJAX-сайтов с использованием JsHttpRequest

    Традиционно World Wide Web организуется как взаимосвязанный набор HTML-страниц, перемещение между которыми осуществляется посредством гиперссылок. Щелкнув по такой ссылке, пользователь открывает в своем браузере ту или иную HTML-страницу, а о старой «забывает». При этом страницы чаще всего являются не статическими (раз и навсегда сохраненными на сервере), а динамическими, то есть каждый раз строятся заново (по запросу пользователя) на основе информации, хранящейся в базе данных сайта.

    Однако в последние несколько лет такой способ организации сайтов начал расширяться с помощью технологии AJAX, предоставляющей пользователю больше гибкости и удобства.

    AJAX (Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это технология загрузки данных с сервера, при использовании которой страница, открытая в браузере, не заменяется на новую целиком. Вместо этого обновляется только определенный блок на странице. Самое главное в AJAX — именно отсутствие перехода, что делает web-сайт очень похожим на оконное GUI-приложение.

    [img width=429 height=480]http://compress.ru/Archive/CP/2007/10/7/_1.gif[/img]

    В настоящее время строгого стандарта создания 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-сайтов. Она имеет целый ряд ключевых особенностей, отсутствующих в аналогичных продуктах. Дистрибутив библиотеки можно скачать по адресу: http://dklab.ru/lib/JsHttpRequest/demo.zip.

    Источник: http://compress.ru/article.aspx?id=18176&iid=842
    Don't read the warnings, go straight and start to fly.

Похожие темы

  1. ПРОГРАММИРОВАНИЕ МИКРОКОНТРОЛЛЕРОВ
    от КРУГ в разделе Языки программирования
    Ответов: 9
    Последнее сообщение: 18.04.2011, 17:06
  2. AJAX
    от BoyStav в разделе Общие
    Ответов: 7
    Последнее сообщение: 26.09.2008, 12:24
  3. Ответов: 4
    Последнее сообщение: 17.09.2008, 19:44
  4. java программирование
    от Tassadar в разделе Работа
    Ответов: 3
    Последнее сообщение: 13.06.2007, 14:00

Рекомендуем

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •  

SEO by vBSEO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94