О Ajax.

[medgimet]

В этом топике постим все, что связано с этой технологией.

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

Об Ajax заговорили после появления в феврале 2005-го года статьи Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям». Ajax — не самостоятельная технология. Это идея.

Ajax подход к разработке пользовательских интерфейсов базируется на двух основных принципах.
Использование DHTML для динамичного изменения содержания страницы
Использование XMLHttpRequest для обращения к серверу «на лету», не перезагружая всю страницу полностью

Использование этих двух подходов позволяет создавать намного более удобные веб-интерфейсы пользователя на тех страницах сайтов, где необходимо активное взаимодействие с пользователем. Использование Ajax стало наиболее популярно после того как компания Google начала активно использовать его при создании своих сайтов, таких как Gmail, Google maps и Google suggest. Создание этих сайтов подтвердило эффективность использования данного подхода.

Ajax на Викки

[ЕЖ]

Не сочтите за релкаму, но хочу порекомендовать великолепный сайт об AJAX, обязательно в закладки всем интересующимя
Можно найти кучу online-примеров великолепного применения AJAX (см. Showcases), статьи по разработке и множество всего полезного.

http://ajaxian.com (english inside)

[medgimet]

Опубликован скрипт для сетевого мониторинга с применением технологии Ajax. За 5 минут можно создать динамически обновляющуюся web-страницу c картой сети. Скрипты написаны c помощью Python и JavaScript. Демонстрация возможностей доступна здесь (данные мониторинга статичны).
(c)opennet.ru

[shuron]

А можно прару примеров простейшего кода.
Ну чтобы в тему воти
особенно интересуют варианты котрые будут поддерживаться большинством броузеров.

[InsaneX]

spisok ajax bibliotek i framework'ov, odin iz samih polnih pomoemu: javascript-libraries-roundup

dlia novichkov rekomenduyu MooFX

[medgimet]

Хотите знать как будет выглядеть ваш сайт в броузере Сафари на Макинтоше?
http://snugtech.com/en/safaritest/

shuron:
А можно прару примеров простейшего кода.
Ну чтобы в тему воти
особенно интересуют варианты котрые будут поддерживаться большинством броузеров.

Читайте на Викки в шапке поста.
С XMLHttpRequest там же ознакомтесь.

[helldomain]

Mde. Smotriu na ajax, i ponimaju, chto chto-to ya upustil.

[medgimet]

Yahoo показывает, как она любит Веб 2.0

Yahoo опубликовала под свободными лицензиями целый ряд своих разработок: это библиотека UI и некоторые элементы дизайна.

Библиотека UI включает в себя целый набор утилит и управляющих элементов, написанных на DHTML/Ajax/Javascript, предназначенных для создания интерактивных веб-приложений, в том числе по технологии Ajax. Это очень серьезные и полезные вещи для всех разработчиков, которые работают в этой области.

Кроме того, компания Yahoo открыла специальный блог, где можно проконсультироваться с программистами Yahoo по поводу опубликованных исходников и по другим техническим вопросам.
(c)webplanet.ru

[medgimet]

AJA - AJAX без XML
Автор intenter по материалам blogs.mail.ru.

Для начала рассмотрим самый общий вариант использования AJAX. Итак, с помощью JavaScript делается асинхронный HTTP-запрос на сервер без перезагрузки всей страницы. Результатом выполнения запроса является XML-документ, который затем обрабатывается на клиенте средствами DOM с помощью все того же JavaScript. Сразу становится очевидной одна из проблем технологии: малый процент переиспользования кода. Смотрите сами: на другой странице сервер вернет совсем другие данные, имеющие свою структуру. Следовательно, код, который нужно написать на клиенте для обработки этих данных, будет зависеть от самих данных (в частности, от их структуры). Все это увеличивает стоимость разработки и создает проблемы при поддержке и кастомизации. Решается эта проблема путем создания более сложного обработчика на клиенте, что, в свою очередь, накладывает свои ограничения на структуру данных.

Если решается не очень сложная задача, то есть возможность избежать сложной обработки данных на клиенте. В ответ на запрос, сервер может передать не данные в XML, а уже готовое HTML-представление, которое затем просто вставляется в нужное место на странице. Конечно, с точки зрения архитектуры, это не блестящее решение, но, для простых задач вполне приемлемое. Далее будет рассматриваться пример такой простой задачи и ее решения. В этом примере сервер будет возвращать всего одну текстовую строку.

Пример: Угадай число

Я бы мог выбрать для примера какую-нибудь полезную задачу, но это очень неинтересно. Так что будем реализовывать простейшую игру "Угадай число". Для тех, кто не с этой планеты, напоминаю правила. Один из игроков загадывает число в пределах от 1 до 100. Второй пытается угадать это число, делая свои предположения. В ответ первый игрок сообщает об отношении задуманного и предполагаемого чисел: больше или меньше. В принципе, еще нужно считать количество попыток, за которые было угадано число, но мы этим заниматься не будем.

Протокол обмена данными в процессе игры будет очень простым. Клиент будет выполнять на сервер HTTP-запрос GET с параметрами. Возможные значения параметров и действия сервера приведены в таблице:

[IMG]http://img204.***************img204/8271/20ul.gif[/IMG]

Реализация

Те, кому не терпится посмотреть на результат, могут поиграть с сервером в описанную выше игру. Ну а те, кому нужны объяснения, пусть читают дальше.

На серверной части особо останавливаться не буду, так как ее реализация зависит от платформы web-приложения. Я ее реализовал в виде Java Servlet'а: GuessSerlvlet.java. Единственное, на чем стоит заострить внимание, это то, что серверная часть выводит данные в кодировке UTF-8. У меня возникали проблемы с получением данных на клиенте, если их кодировка отличалась. Не беспокойтесь, даже если ваша страница в другой кодировке (например, в windows-1251), ручная перекодировка из UTF-8 не понадобится.

Теперь переходим к клиентской части. Вот исходный код страницы в текстовом формате: guess.txt. Если вас смущают незнакомые теги (которые значимой роли не играют), то можете просто просмотреть исходный код работающего примера. Для начала посмотрим на статический HTML:

PHP код:

<html>
    ...
    <body onLoad="status();">
    ...
        <input id="txtNumber" type="text"/>
        <input type="button" value="Угадать!" onClick="guess();"/>
        <input type="button" value="Новая игра" onClick="newGame();"/>
    ...
        <div id="result"></div>
    ...
    </body>
</html> 


Здесь мы видим поле для ввода текста с id="txtNumber". Именно сюда пользователь будет вводить число. Еще имеются две кнопки, по нажатию на которые выполняются JavaScript-функции guess и newGame. Что они должны делать догадаться нетрудно. Также на странице имеется элемент "div", имеющий идентификатор "result". Именно сюда будет выводиться ответ сервера. Кроме того, сразу после загрузке страницы будет выполнена процедура status. Теперь переходим к клиентской логике.

Код на клиенте

Для реализации логики на клиенте используется JavaScript, что и не удивительно, т.к. приемлемой альтернативы нет. Начнем рассматривать код.

PHP код:

String.prototype.trim = function() {
    return this.replace(/^s+|s+$/g, "");
}; 


sUrl = "/servlet/examples/ajax/guess";
Здесь в класс String добавляется очень полезный метод trim. И определяется значение sUrl. Именно по этому адресу будем обращаться к серверной части нашего приложения. Теперь переходим к функциям, наличие которых обязательно в AJAX-приложении.

PHP код:

 //функция возвращает экземпляр класса XMLHttpRequest
    function getHTTPRequestObject() {
        var xmlHttpRequest;
        if (typeof ActiveXObject != 'undefined') {
            xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
        } else if (typeof XMLHttpRequest != 'undefined') {
            xmlHttpRequest = new XMLHttpRequest();
        } else {
            xmlHttpRequest = false;
        }
        return xmlHttpRequest;
    }

    var httpRequester = getHTTPRequestObject(); //Рабочий экземпляр класса XMLHttpRequest

    //выполняет асинхронный GET
    function makeAJAXCall(ajaxUrl){
        if (httpRequester) {
            httpRequester.open("GET", ajaxUrl, true);
            httpRequester.onreadystatechange = processResponse;
            httpRequester.send(null);
        }
    } 


Здесь все понятно и по комментариям. Функция getHTTPRequestObject возвращает экземпляр ключевого класса, который используется для асинхронного выполнения запросов. Процедура makeAJAXCall выполняет асинхронный (это определяется третьим параметром в методе open) запрос GET к заданному ajaxURL. Обратите внимание на установку значения свойства "onreadystatechange". Теперь при изменениях значения свойства readyState объекта httpRequester будет вызываться функция processResponse. Посмотрим на нее:

PHP код:

 var READY_STATE_COMPLETE=4;

    //CallBack-функция. Выводит полученные асинхронно данные или сообщение об ошибке
    function processResponse() {
        if (httpRequester.readyState == READY_STATE_COMPLETE) {
            if (httpRequester.status==200) {
                printToPage ("<font color=\"blue\">"+httpRequester.responseText+"</font>");
            } else {
                var message = "Problem retrieving data. requestStatus="+httpRequester.status+". Message="+httpRequester.statusText;
                printToPage ("<font color=\"red\">"+message+"</font>");
            }
        }
    }

    //Выводим переданный HTML в элемент с id="result"
    function printToPage(value){
        resultDiv = document.getElementById("result");
        resultDiv.innerHTML = value;
    } 


В процедуре processResponse первым делом проверятся значение readyState: ничего не делаем, пока запрос не завершен. Потом проверяется значение свойства status. Если оно равно 200 (HTTP OK), то все нормально, и полученные данные выводятся на страницу синим цветом. А если произошла ошибка, то соответствующее сообщение выводится красным. Непосредственно вывод на страницу осуществляет процедура printToPage. Она вставляет сообщение в "div" с идентификатором "result".

Теперь переходим к самой бизнес-логике Ее составляют три процедуры:

PHP код:

//Начинаем новую игру
    function newGame(){
        printToPage ("<font color=\"blue\">Начинается новая игра...</font>");
        makeAJAXCall(sUrl+"?action=new");
    }

    //выводим статус текущей
    function status(){
        makeAJAXCall(sUrl+"?action=status");
    }

    //попытка угадать число, задуманное сервером
    function guess(){
        var userNumberStr = document.getElementById("txtNumber").value.trim();
        ...
        printToPage ("<font color=\"blue\">Сервер думает...</font>");
        makeAJAXCall(sUrl+"?action=guess&number="+userNumberStr);
    } 


В процедуре guess я опустил код, который занимается проверкой корректности значения, которое ввел пользователь.

Вот и все. Была решена простенькая задачка без передачи данных от сервера в формате XML. Но ведь пользователь об этом не знает, так что смело можно написать на своем сайте: AJAX Powered!
Оригинал

[joker99]

medgimet
Не согласен. При несложной задаче, возвращаемый ХМЛ будет тоже простым и его трансформация в хмл тоже будет не сложной. Если же данных много, то создавать html на сервере очень не удобно и создаёт дополнительную нагруску.Гораздо проще передать ХМЛ в javascript и там созадть хтмл средставами DOM. В твоём примере трансформация хмл в хтмл рпсото переноситься с клиента на сервер, что вовсе не упрощает дело. Тебе всё равно придётся писать свой обработчик для каждой страницы, только он будет написан не на javascript а на серверном языке.

К тому же не надо забывать про такую полезную вещь как XSLT. Ето намного проще чем писать обработчики на javascript или чем нибудь другом.

[medgimet]

Сообщение от joker99

medgimet
Не согласен. При несложной задаче, возвращаемый ХМЛ будет тоже простым и его трансформация в хмл тоже будет не сложной. Если же данных много, то создавать html на сервере очень не удобно и создаёт дополнительную нагруску.Гораздо проще передать ХМЛ в javascript и там созадть хтмл средставами DOM. В твоём примере трансформация хмл в хтмл просто переносится с клиента на сервер, что вовсе не упрощает дело. Тебе всё равно придётся писать свой обработчик для каждой страницы, только он будет написан не на javascript а на серверном языке.

К тому же не надо забывать про такую полезную вещь как XSLT. Ето намного проще чем писать обработчики на javascript или чем нибудь другом.

Во-первых, извиняюсь, что не указал автора сразу, и ввел вас в некоторое заблуждение.
А во-вторых, именно эту статью я привел, как простой и хорошо документированный код, показывающий суть технологии о которой идет речь в этом топике.

[medgimet]

Ajax-словарь

Еще один пример, как можно использовать технологию Ajax - онлайновый словарь. Вводите слово, и ответ через некоторое время сам появляется на экране. Нажимать ничего не нужно. Кроме того, если перетащить в панель ссылок вашего браузера специальную кнопку, то воспользоваться словарем можно будет из любого места в сети. Просто выделяете непонятное слово или выражение и нажимаете на кнопку. Окно или вкладка с ответом появится незамедлительно.

Не сказал бы, что это лучший способ использования Ajax. Во-первых, ожидание, ничем визуально не подкрепленное, раздражает, во-вторых, ссылку на нужную словарную статью потом нигде не используешь.
(с)crosspost.ru/categories/7-Web-2.0

[medgimet]

"Getting Started with Ajax" - два примера использования XMLHttpRequest для динамической подгрузки данных на страницу, через InnerHTML и DOM;

"AJAX and Mozilla XUL with JavaServer Faces" - обзор использования Ajax технологии в Java библиотеке Weblets;

"AJAX Toolkit Framework" - открытый Ajax тулкит от IBM основанный на J2EE;

(с)opennet.ru

[medgimet]

Сергей Сальников
Вот это PATTERN! - попытка систематизации AJAX-материалов

http://ajaxpatterns.org/

Чудовищный (не побоюсь этого затертого слова) по размерам и степени проработки свод всякой-разной информации по AJAX, представленный (само собой) в виде вики с попытками классификации: ссылки, примеры, популярные страницы, средства разработки, демо-страницы и пр. пр. пр.

(c)blogs.mail.ru/community/web2.0

[medgimet]

Новый сегрегатор AJAX решений!
http://www.ajaxplanet.ru/

[medgimet]

Mail.Ru анонсирует интерфейса AJAX

Компания Mail.Ru анонсировала свои планы по созданию почтового интерфейса нового поколения, полностью построенного на технологиях AJAX (Asynchronous Javascript and XML).

По внешнему виду и функционалу новый интерфейс будет максимально приближен к популярным почтовым клиентам, таким как Outlook и The Bat. Этот шаг позволит миллионам пользователям получить более удобный инструмент работы со своей корреспонденцией.

В частности пользователь получит возможность на одной странице одновременно просматривать и список писем, и текст одного из них (функция "предварительный просмотр"). Все основные действия, такие как переход между письмами, поиск, написание и отправка письма будут осуществляться без перезагрузки страницы. Также будут реализованы функция drug-n-drop (перетаскивание объектов при помощи мыши) и контекстные меню, открывающиеся по клику правой кнопкой мыши на объекте или пункте меню.

На странице future.mail.ru размещена форма регистрации для желающих принять участие в тестировании нового продукта. Там же есть ссылки на скриншоты новой почты.

О технологиях AJAX

Термин AJAX (расшифровывается как Асинхронный JavaScript и XML) был введен в обращение в начале 2005-го года Джессом Джеймсом Гарреттом из консалтинговой компании Adaptive Path и с тех пор стал использоваться повсеместно. AJAX - это не какой-то конкретный продукт или технология, а обобщенное название несвязного набора методов, зачастую применяемых вместе.

Эти технологии были применены при создании таких инновационных проектов, как Google Maps, Flikr и др.

(с)R2B.RU

[medgimet]

AJAX и CMS - новые возможности и новые ограничения
Сергей Сальников

Статью о достоинствах и недостатках внедрения AJAX решений в CMS (системы управления контентом) можно найти по ссылке ниже


http://www.cmswatch.com/Feature/143-Direct-Web-Remoting


Статья большая и интересная. Она будет полезна администраторам сайтов, которые задумываются о перспективах внедрения AJAX-технологий для CMS своих сайтов.
(c)blogs.mail.ru/community/web2.0

[medgimet]

ajaxLoad icons

Yесколько дней назад повился не оечнь ориганальний , но все же полезный сервис
http://www.ajaxload.info/

все что он делает так это раскрашивает 1 анимационную иконку которая применяется для индикации загрузки...

чень полезная мелочь, для тех кто подбирает иконку под фон сайта....
(c)blogs.mail.ru/community/web2.0/

[medgimet]

Опубликован черновой вариант стандарта на реализацию XMLHttpRequest

Опубликована первая публично доступная черновая версия стандарта "The XMLHttpRequest Object", в которой описываются требования к реализации объекта XMLHttpRequest, на базе которого построена техника создания интерактивных web-приложений Ajax, основанная на идее динамической подгрузки данных на страницу.

Стандарт позволит Web-разработчиками, при использовании XMLHttpRequest, не оглядываться на особенности реализации данного объекта в различных web-браузерах.

В качестве дополнения привожу ссылки на две новые статьи по Ajax технологиям:

"Implementing Mutual Exclusion for AJAX" - организация mutex блокировок для синхронизации работы web-приложений использующих AJAX;

"AJAX: Is your application secure enough?" - статья про потенциальные проблемы безопасности AJAX приложений.
(с)opennet.ru

[medgimet]

AjaxAMP - слушаем музыку в сети через... Winamp

Появилась 3-я версия сетевого плеера AjaxAMP

http://ajaxamp.com/

Если кто не знает - это плеер по внешнему виду как две капли воды похожий на Winamp, но только ... в сети. Вот как это выглядит:

[IMG]http://img221.***************img221/6185/miniscreen4sh.jpg[/IMG]

Среди особенностей новой версии:

- стриминг (Streaming)
- поиск в медиа-библиотеке
- сортировка медиа-библиотеки по именам, размеру, дате...
(c)blogs.mail.ru/community/web2.0/