Современные языки программировния
Ajax
1.Возник 18 февраля 2005 года( первое упоминание в статье Джесси Джеймса Гарретта "Новый подход к веб-приложениям" ) 2.Создал: Джесси Джеймс Гарретт. 3. Особености:
1. Использование технологии динамического обращения к серверу "на лету", без перезагрузки всей страницы полностью,например:
- с использованием XMLHttpRequest (основной метод);
- через динамическое создание дочерних фреймов;
- через динамическое создание тега <script>.
2. Использование DHTML для динамического изменения содержания страницы.
Преимущества :
- Экономия трафика
Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что часто вместо загрузки всей страницы достаточно загрузить только небольшую изменившуюся часть.
- Уменьшение нагрузки на сервер.
AJAX позволяет несколько снизить нагрузку на сервер. К примеру, в Gmail, когда вы отмечаете прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту.
- Ускорение реакции интерфейса
Поскольку нужно загрузить только изменившуюся часть, то пользователь видит результат своих действий быстрее.
Недостатки:
- Интеграция со стандартными инструментами браузера
Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка "Назад" предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты которые могут решить эту проблему.
Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры. - Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XHttpRequest)
Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта. - Старые методы учёта статистики сайтов становятся неактуальными.
Многие сервисы статистики ведут учёт просмотров новых страниц сайта, для сайтов страницы которых широко используют AJAX, такая статистика теряет актуальность.
Что такое Ajax
Ajax - не технология. На самом деле это несколько технологий преуспевающих каждая в своей области, собранных в новое сильное направление. Ajax объединяет:
- стандартизованное представление с использованием XHTML и CSS;
- динамическое отображение и взаимодействие при помощи Document Object Model;
- обмен и управление данными через XML и XSLT;
- асинхронные получение данных с использованием XMLHttpRequest;
- и JavaScript, связывающий всё это воедино.
Классическая модель веб-приложения действует следующим образом: большинство действий пользователя отправляют обратно на сервер HTTP-запрос. Сервер производит необходимую обработку - получает данные, обрабатывает числа, взаимодействует с различными унаследованными системами и затем выдаёт HTML страницу клиенту. Эта модель заимствована из первоначального применения веба как гипертекстовой среды, но те кто читали книгу знают, то что делает веб подходящим для гипертекста не обязательно делают его хорошим для программных приложений.
Как работает AJAX.
Если вы когда-либо пользовались веб-клиентом Gmail или Google Maps, то замечали возможность проверки правописания и прокрутки по всему изображению, соответственно, без обновления страниц. AJAX — это технология, которая обрабатывает операции в JavaScript и асинхронно запускает на стороне сервера операции, предоставляющие желаемый результат.
В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari. Opera в свое время отличилась нестабильностью с точки зрения реализации XMLHttpRequest.
AJAX обеспечивает динамичность и асинхронность web-разработок при отсутствии необходимости обновления страниц. AJAX позволяет делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные.
5.AJAX в действии. Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.
На основе этого строится портлет, предоставляющий не только доступ к списку недавних сообщений, но также обеспечивающий предварительный просмотр самих сообщений -всех из главной страницы без необходимости их обновления.
Чтобы получить доступ к содержимому сообщения, нужен серверный компонент, предоставляющий доступ к сообщениям. В нашем примере есть простой сервлет в качестве имитатора, который показывает сообщения через точку с запятой в следующей последовательности: от кого, тема, дата и тело сообщения::
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
if ("1".equals(req.getParameter("message_id"))) {
resp.getWriter().println( "John Doe,Greetings,10 10-2005, Hi.I am doing good" ) ;
} else if ("2".equals(req.getParameter("message_id"))) {
resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Document is complete." );
} else if ("3".equals(req.getParameter("message_id"))) {
resp.getWriter().println("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
...
} else {
resp.getWriter().println( ",NA ,NA ,NA ,Nothing to display" );
} //end else
} //end service
Пример: Вызов AJAX. Обратите внимание на то, что для различных браузеров требуются разные методы реализации для объекта XMLHttpRequest:
Код:
function getHTTPRequestObject() {
var xmlHttpRequest;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (exception1) {
try {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (exception2) {
xmlHttpRequest = false;
}
}
@else
xmlhttpRequest = false;
@end @*/
if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined') {
try {
xmlHttpRequest = new XMLHttpRequest();
} catch (exception) {
xmlHttpRequest = false;
}
}
return xmlHttpRequest;
}
var httpRequester = getHTTPRequestObject(); /* Когда страница
загрузилась, создаем xml http объект */
В данном коде используются аннотации Internet Explorer для реализации объекта AJAX. Другие браузеры, выполняющие данный сценарий, будут просто игнорировать разделы с аннотациями к функции getHTTPRequestObject(). Помните о том, что ваш браузер должен поддерживать JavaScript v1.5 и более поздние версии.
6.Источники материала и полезные ссылкиВикипедияhttp://ru.wikipedia.org/wiki/Ajax Основы работы с Ajax : http://designformasters.info/posts/start-with-ajax
Модель Ajax : http://www.codenet.ru/webmast/js/ajax/
Перевод статьи "Новый подход к веб-приложениям" : http://ajax-development.narod.ru/ajax-article.html
Викиучебника : http://ru.wikibooks.org/wiki/AJAX Ajax: Новый подход к веб-приложениям : http://www.codenet.ru/webmast/js/ajax/AJAX-New.php Programmer's Klondike http://www.proklondike.com/
