IMHO.WS - О Ajax.

IMHO.WS (http://www.imho.ws/index.php)

- Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)

- - О Ajax. (http://www.imho.ws/showthread.php?t=100085)

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

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, обязательно в закладки всем интересующимя :claps:
Можно найти кучу online-примеров великолепного применения AJAX (см. Showcases), статьи по разработке и множество всего полезного.

:contract: http://ajaxian.com (english inside)

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

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

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

dlia novichkov rekomenduyu MooFX

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

Цитата:

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

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

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

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

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

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

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

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!
Оригинал

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

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

Цитата:

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

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

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

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

Ajax-словарь

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

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

"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

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

http://ajaxpatterns.org/

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

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

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

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

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

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

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

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

ajaxLoad icons

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

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

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

Опубликован черновой вариант стандарта на реализацию 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

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

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

http://ajaxamp.com/

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

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

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

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

Шахматы на AJAX
Интересный пример использование технологии AJAX: шахматы.
(c)linux.org.ru

Как написать AJAX-приложение

Автор: Виталий Акулов

Это два года назад AJAX был в диковинку (да и самого слова AJAX тогда ещё не выдумали). Теперь веб-приложения, страницы которых обновлялись на лету, в порядке вещей. Даже наоборот: без AJAX трудно представить себе некоторые сервисы.

Как работали обычные веб-приложения? Как правило, на событие (клик по ссылке или нажатие на кнопку) браузер реагировал отправкой запроса серверу. Когда с сервера приходил ответ, всё содержимое страницы полностью обновлялось.

Одна из проблем состояла в том, что при обновлении содержимого страницы веб-приложение переходит в новое состояние. Из информации о предыдущем состоянии сохраняются только данные, переданные в запросе. Чем более точная информация о прежнем состоянии системы требуется, тем больше данных необходимо пересылать в запросе.

Другим недостатком является необходимость пересылать повторяющиеся массивы данных клиенту после каждого события. Например, если пользователь ошибся при заполнении формы, то вместо короткого сообщения об ошибке приходится снова загружать и форму, и всю введённую ранее информации.

Современные браузеры, поддерживающие стандарты W3C DOM, позволяют вывести веб-приложение на новый уровень.

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

Веб-приложение получается распределенным, и часть логики находится на стороне клиента, а часть - на стороне сервера. Такие приложения и называют термином "AJAX Applications" (аббревиатура расшифровывается как Asynchronous Javascript And Xml Applications).

Объект XMLHTTPRequest

Для асинхронных запросов от клиента к серверу на стороне браузера служит специальный объект под названием XMLHTTPRequest.

Перечислим методы и свойства объекта, которые будут использованы далее:

LHTTPRequest.open("method", "URL", async, "uname", "pswd") – создает запрос к серверу.
method – тип запроса, например, GET
URL – URL запроса, например httр://localhost/file.xml
async – если True, то будет использоваться асинхронный запрос, то есть выполнение скрипта продолжится после отправки запроса. В противном случае скрипт будет ожидать ответа от сервера, заморозив UI.
uname, pswd – логин и пароль для простой веб-авторизации.
XMLHTTPRequest.send("content") – отправляет запрос на сервер. Значением content могут быть данные для POST-запроса или пустая строка.
XMLHTTPRequest.onreadystatechange – обработчик событий срабатывающий на каждое изменение состояния объекта. Состояния объекта могут быть следующими:
0 - до того как запрос отправлен (uninitialized)
1 - объект инициализирован (loading)
2 - получен ответ от сервера (loaded)
3 - соединение с сервером активно (interactive)
4 - объект завершил работу (complete)
XMLHTTPRequest.responseText – возвращает полученные от сервера данные в виде строки.
XMLHTTPRequest.responseXML – если ответ сервера пришел в виде правильного XML, возвращает XML DOM объект.
XMLHTTPRequest.status – возвращает статус HTTP-ответа в виде числа. Например, 404 если запрашиваемая страница не была найдена на сервере.

Рассмотрим применение объекта на примере простого AJAX-приложения.

Поле SELECT с поиском

Предположим у нас есть таблица, в которой порядка миллиона записей. Пользователю необходимо выбрать всего одну запись из таблицы (реализация отношения "один ко многим"). Выбор пользователя является всего лишь одним из этапов заполнения большой веб-формы.

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

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

Выбор записи будет реализован с помощью двух элементов веб-формы. Первый элемент - это текстовое поле, где пользователь вводит ключевое слово. Оно отсылается на сервер, а тот возвращает только те строки из таблицы, которые удовлетворяют условию поиска. Ответ сервера (в виде списка) помещается в поле SELECT, в котором пользователь и сделает окончательный выбор. Таким образом, при отправке всей формы на сервер попадет выбранное в поле SELECT значение в виде ID записи из большой таблицы.

В HTML выглядеть это может так:

PHP код:


		
			
<input type="text"

   onkeyup="lookup(this.value, 'id_select', 

   'http://localhost/cgi-bin/xmlhttp.cgi')" />

<select id="id_select" name="id_select">

<option selected="selected" value=""></option>

</select>

На любое событие KeyUp (отжатие кнопки) в текстовом поле вызывается функция lookup ('текст', 'id-selecta', 'url')

PHP код:


		
			
function lookup(text, select_id, url) {

        // Получаем объект XMLHTTPRequest

        if(!this.http){

            this.http = get_http();

            this.working = false;

        }

        // Запрос

        if (!this.working && this.http) {

            var http = this.http;

            // Если в текстовом поле менее трёх

            // символов – не делаем ничего

            if (text.length <3 ) return;

//добавляем закодированный текст

                //в URL запроса

            url = url + "?text="+encodeURIComponent(text);

      //создаём запрос

            this.http.open("GET", url, true);

            //прикрепляем к запросу функцию-обработчик

            //событий

            this.http.onreadystatechange = function() {

// 4 – данные готовы для обработки

                if (http.readyState == 4) {

                    fill(select_id, http.responseText);

                    this.working = false;

                  }else{

                     // данные в процессе получения, 

                     // можно повеселить пользователя

                     //сообщениями 

                     // ЖДИТЕ ОТВЕТА

                  }

            }

            this.working = true;

            this.http.send(null);

        }

        if(!this.http){

              alert('Ошибка при создании XMLHTTP объекта!')

        }

    }

Как видно, в начале мы получаем XMLHTTP-объект с помощью функции get_http(). Затем поисковый текст кодируется в стиле URL и формируется GET-запрос к серверу. URL запроса в данном случае будет выглядеть приблизительно так: httр://localhost/cgi-bin/xmlhttp.cgi?text=...

Скрипт на сервере, получив значение text, делает поиск в таблице и отсылает результат клиенту. В обработчике событий объекта XMLHTTP, когда данные от сервера получены и готовы к использованию, вызывается функция fill('select_id', 'data'), которая заполнит список SELECT полученными данными.

Функция get_http() – это кросс-браузерная реализация получения объекта XMLHTTP (в каждом браузере он получается по-своему). Её реализацию с комментариями вы можете легко найти в интернете, это, так сказать, пример из учебника.

PHP код:


		
			
function get_http(){

    var xmlhttp;

    /*@cc_on

    @if (@_jscript_version >= 5)

        try {

            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

        } catch (e) {

            try {

                xmlhttp = new 

                ActiveXObject("Microsoft.XMLHTTP");

            } catch (E) {

                xmlhttp = false;

            }

        }

    @else

        xmlhttp = false;

    @end @*/

    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

        try {

            xmlhttp = new XMLHttpRequest();

        } catch (e) {

            xmlhttp = false;

        }

    }

    return xmlhttp;

}

Функция fill() получает на вход значение параметра ID списка SELECT, который необходимо заполнить, и сами данные, полученные с сервера.

Для простоты предположим, что данные с сервера мы получаем в виде таблицы, поля которой разделены символом табуляции '\t', а строки - символом переноса строки '\n':

PHP код:


		
			
id1tname1n

id2tname2n

...

На основании содержимого этой таблицы мы будем заполнять поле SELECT элементами OPTION.

PHP код:


		
			
function fill (select_id, data){

    // поле SELECT в переменную в виде объекта

    var select = document.getElementById(select_id);

    // очищаем SELECT

    select.options.length = 0;

    // если данных нет – не делаем больше ничего

    if(data.length == 0) return;

    // в массиве arr – строки полученной таблицы

    var arr = data.split('\n');

    // для каждой строки

    for(var i in arr){

        // в массиве val – поля полученной таблицы

        val = arr[i].split('\t');

        // добавляем новый объект OPTION к нашему SELECT

        select.options[select.options.length]=

        new Option(val[1], val[0], false, false);

    }

}

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

Ya mail - новый интерфейс почты на яндексе

..пока что жуткий тормоз =) или это у меня так

подробности
http://www.ajaxplanet.ru/novaya-pochta-yandex/

в работе
http://webmail.yandex.ru/messages
(старые аккаунты, естественно, работают)

Решаем СУДОКУ-головоломки онлайн, используя AJAX-технологии...

По адресу http://www.bytecode.com.au/sudoku/so...=2fwbey2jwfd8x лежит онлайн-решалка известных японских головоломок "Судоку", сделанная с использованием AJAX-технологий. Там же можно найти и ссылку на страничку, где достаточно подробно описано как это работает.
(с)blogs.mail.ru/community/web2.0

Nokia надеется на AJAX для S60

Ли Эптинг (Lee Epting), вице-президент Forum Nokia в интервью изданию The Register сообщил, что компания весьма заинтересована в развитии и использовании технологий AJAX на смартфонах S60. Еще в ноябре 2005 года Nokia анонсировала для S60 новый браузер, базирующийся на известном проекте Safari, с поддержкой AJAX. И теперь компания рассчитывает, что разработчики будут создавать мобильные Web-приложения для ее смартфонов.

Напомним, что технология AJAX (Asynchronous JavaSript and XML) в настоящий момент широко используется для различных Интернет-проектов, к примеру, Google Maps. С помощью AJAX удается минимизировать трафик между браузером клиента и интернет-сервером. Это имеет особенное значение для мобильных устройств и GPRS-связи. Поэтому компания Nokia надеется, что разработчики для S60 обратят особенное внимание на эту перспективную технологию.

Пока о каких-либо специфических проектах на базе AJAX для S60 ничего не известно. Но, учитывая поддержку и пропаганду этой технологии, которую начинает Forum Nokia, они не заставят себя ждать.
(c)hpc.ru

"Rich Ajax slide shows with DHTML and XML" - пример использования Ajax для динамической подгрузки изображений;

"Kick-start your Java apps" - придание JSP-Eclipse аплетам большей интерактивности, через использование Ajax;
(c)opennet.ru

Консорциум W3C стандартизирует технологию AJAX

Консорциум World Wide Web (W3C) приступил к стандартизации технологии AJAX, набирающей все большую популярность среди веб-программистов.

Технология AJAX (Asynchronous JavaScript + XML - асинхронный JavaScript+XML) позволяет создавать интерактивные сайты, многие действия на которых (например, пометку элементов) можно выполнять без перезагрузки страницы. Иными словами, с AJAX-ресурсами можно взаимодействовать почти так же, как с обычными программами. AJAX, в частности, используется службами Gmail, MSN Virtual Earth и др.

На текущий момент технология AJAX не стандартизирована, в связи с чем большое количество построенных на ней сайтов корректно работают не во всех браузерах. Появление утвержденной консорциумом W3C спецификации позволит решить эту проблему, а также ускорит популяризацию технологии.

В настоящее время специалисты W3C заняты стандартизацией программного интерфейса XMLHttpRequest, являющегося важной составляющей AJAX. Именно XMLHttpRequest отвечает за пересылку XML-данных по протоколу HTTP между браузером и веб-сервером.
(c)compulenta.ru

Adobe намерена облегчить программирование на AJAX

Компания Adobe предложит бесплатный предварительный релиз пакета для программирования на AJAX - Spry. Пакет Spry будет поддерживать JavaScript-библиотеки, специально ориентированные на web-дизайнеров. В предварительной версии будут реализованы возможности внедрения XML в HTML-документы с использованием таких технологий, как HTML, Cascading Style Sheets и минимальным количеством JavaScript.

"Spry позволит программистам создавать web-страницы с использованием AJAX, не изучая новые языки и не изменяя модели программирования, - отметила в своем интервью Дженнифер Тейлор (Jennifer Taylor). - Он очень легкий и гибкий". Этот пакет может использоваться вместе с Dreamweaver или любым другим инструментом авторского создания мультимедиа-продуктов.

Согласно заявлению представителей Adobe, Spry стал результатом многочисленных исследований потребностей web-дизайнеров, в ходе которых компания обнаружила, что последние очень интересуются AJAX, но пакеты разработчиков ориентированы в большей степени на профессионалов и тяжелы в освоении новичками.
Adobe не считает, что ее технология Flash является конкурентом AJAX. "Мы рассматриваем их как инструменты для достижения похожих целей, но с различной функциональностью", - заявил Тодд Хэй (Todd Hay), один из руководителей компании. Пока неизвестно, когда выйдет финальная версия Spry - компания сперва хочет изучить реакцию потенциальных клиентов, с тем чтобы определиться, чего в их продукте не хватает и что следует еще доработать.
(с)techlabs.by

"60 More AJAX Tutorials" - ссылки на более чем 50 статей с различными примерами использования AJAX;

(c)opennet.ru

Книги по AJAX на английском

Книги собраны в одном архиве

Ajax hacks.chm
Apress.Foundations.of.Ajax.Oct.2005.pdf
For.Dummies.Ajax.For.Dummies.Feb.2006.pdf
Manning, Ajax in Action (2006) BBL BM OCR 7.0-2.6 LotB.pdf
OReilly.Ajax.Hacks.Tips.and.Tools.for.Creating.Responsive.Web.Sites.Ma r.2006.chm

_http://slil.ru/22759455 (за ссылку спасибо Al-x) :)

(c)medigo.ru

Фрэймворк от google.

Очередная бета от гугл! :)

Google Web Toolkit (Beta)

Пише на java затем компилим в JavaScript и HTML.
Вещь занятная, но нужная ли?

Цитата:

medgimet:
на скачку на медиго _http://www.medigo.ru/?newsid=1147600452
У кого есть возможность, перезалейте плиз!

_http://slil.ru/22759455
Если что, могу ещё куда-нибудь перезалить, ибо сборник достаточно прикольный:)

Oracle отдаст интерфейс AJAX сообществу открытого кода

Oracle пообещала передать свою технологию пользовательского интерфейса AJAX сообществу открытого кода. Представитель компании сделал это заявление на конференции JavaOne в Сан-Франциско 17 мая, в тот же день, когда Sun пообещала открыть код Java.

Oracle предоставит набор компонентов интерфейса AJAX в течение нескольких месяцев. Разработчики смогут использовать их на своих страницах для подключения к источникам данных, в частности, базам данных. Компания интегрировала AJAX с технологией JavaServer Faces, в результате чего появился интерфейс для работы с серверными приложениями без подгрузки дополнительного кода. «Java, открытый код и языки сценариев — ключевые элементы для разработки следующей волны веб-приложений», — сказал главный проектировщик промежуточного ПО и инструментов Oracle Тэд Фаррел (Ted Farrell).

Oracle также планирует поддержать сообщества разработчиков скриптов (сценариев) с открытым кодом — Groovy, Grails и другие, и новую спецификацию JSR-223, позволяющую использовать языки сценариев Groovy, PHP и Grails в серверных приложениях Java.

AJAX — Асинхронный JavaScript и XML — технология, позволяющая создавать веб-страницы с интерактивно обновляющимися компонентами, без необходимости перезагрузки всей страницы с сервера. Страницы на AJAX таким образом не отличаются от интерфейсов приложений, расположенных на локальном компьютере, и представляют собой основу для софтверных сервисов — удаленной работы с приложениями через веб-браузер.
(c)cnews.ru

Subsys_JsHttpRequest: подкачка данных без перезагрузки страницы (AJAX)

Старый добрый ДКлаб! Хорошая, добрая статья.

В данной статье описывается подход к Remote Scripting (AJAX), нацеленный на максимальную кроссбраузерность, а также приводится код библиотеки, реализующей данный функционал. Современная версия библиотеки (начиная с 3.x) называется Subsys_JsHttpRequest. Новая версия выгодно отличается от предыдущей (она называлась JSHttpRequest 2.x) автоматической поддержкой класса XMLHttpRequest, если он доступен в браузере. В случае, если XMLHttpRequest недоступен, библиотека задействует собственный метод загрузки данных, описанный ниже.

Приводить статью полностью не вижу смысла. Дальше чти здесь...

Xajax

xajax это open source библиотека классов PHP, которая позволяет вам легко создавать мощные, вебориентированные Ajax приложения использующие HTML, CSS, JavaScript, и PHP. Приложения, разработанные при помощи библиотеки xajax могут асинхронно вызывать расположенные на сервере PHP функции и обновлять содержание без перезагрузки страницы. Как работает xajax?

Библиотека xajax создает функции JavaScript, которые являются оболочкой для PHP функций, которые вы можете вызывать с сервера из вашего приложения. Когда вызывается функция JavaScript то эта функция, которая является оболочкой для функции PHP использует объект XMLHttpRequest для асинхронного соединения с объектом xajax на сервере, который вызывает соответствующую функцию PHP. После завершения этого действия, возвращается xajax XML ответ от вызванной PHP функции. Возращенный XML содержит инструкции и данные, которые будут проанализированы специальными функциями JavaScript-овой части xajax и использованы для обновления содержания вашего приложения.
(c)grossarium.com

Сат проекта

Материалы по теме

_http://doci.nnm.ru/ajax/11.04.2006/ajax_na_noname_3_golosuem_za_xajax/

_http://myjoomla.ru/content/category/6/27/53/

ИТ-гиганты продвигают Open Ajax

Группа крупных компаний, среди которых IBM, Mozilla, Google, Novell, BEA, Borland, анонсировала планы по продвижению технологии AJAX в сообществе открытого кода — инициативу Open Ajax.

AJAX — Асинхронный JavaScript и XML — язык, ставший популярным благодаря возможности обновления частей веб-страниц без обновления всего экрана, по мере поступления новой информации. Кроме вышеперечисленных компаний, в группу продвижения вошли Dojo Foundation, Eclipse Foundation, Laszlo Systems, Openwave Systems, Oracle, Red Hat, Yahoo, Zend и Zimbra.

Компании намерены продвигать возможности универсального применения Ajax на любом устройстве, в любом приложении, операционной системе и легкости встраивания в любое программное обеспечение. Для ускорения внедрения Ajax, IBM предложила организациям Eclipse и Mozilla программы для отладки и разработки приложений с Ajax. Предложенная Eclipse структура инструментов — первый подход, поддерживающий несколько инструментариев времени выполнения Ajax от Dojo, OpenRico и Zimbra. Zimbra разрабатывает приложения Ajax уже два года и готова представить инструментарий сообществу по общим лицензиям Apache и Mozilla. Другие участники инициативы подключатся в будущем. В работе также будет использован инструментарий Dojo Toolkit — библиотека открытого кода JavaScript.
(c)cnews.ru
Open_Ajax на вики

AJAX-скрипты и не только... Сайт с бесплатными скриптами
Сергей Сальников

Этот адрес _http://www.dhtmlgoodies.com/index.html пожалуй должны взять на заметку все разработчики AJAX и DHTML

Много примеров, все с описаниями и демо, все бесплатно и может быть загружено с сайта без каких-либо ограничений.
Чего еще надо для счастья? :)
(c)blogs.mail.ru/community/web2.0/

Червивый Аякс

AJAX, как, впрочем, и любая новая технология, дает вам новые возможности, но и представляет новые угрозы. Мы часто говорим, что современные веб-приложения всё больше похожи на традиционные программы, но при этом обычно забываем про минусы последних. Итак, простой и поучительный пример:

Эрик Паскарелло (Eric Pascarello), AJAX-гуру и один из авторов книги “Ajax в действии“, написал про уязвимость, обнаруженную в коде новой Yahoo!Mail beta. Кто-то умудрился создать кросс-сайт скрипт, который можно считать полноценным вирусом. Вирус носит имя Yamanner и дествовал на Yahoo!Mail beta. При получении “зараженного” письма автоматически исполнялся код, который рассылал копии письма на все адреса в доменах yahoo.com и yahoogroups.com, найденные в адресной книге, и загружал копию последней на сайт хакера.

Вирус описан в вирусной базе Symantec как JS.Yamanner@m. Так что всё “как у больших”, т.е. как у десктопных приложений.
(c)ajaxplanet.ru

Сверхдинамичные веб-интерфейсы

Very Dynamic Web Interfaces
автор: 2005.02.09 Drew McLellan
перевод: 2005.02.23 Александр Качанов

Одно из главных затруднений, с которым сталкиваются разработчики интерфейсов веб-приложений, состоит в том, что после того, как страница оказалась в браузере клиента, связь браузера с сервером заканчивается. Любое действие с элементом интерфейса требует повторного обращения к серверу с повторной загрузкой новой страницы. Из-за этого веб-приложение теряет свою элегантность и медленно работает. В данной статье я расскажу о том, как данную проблему можно решить с помощью JavaScript и объекта XMLHttpRequest.
_http://www.webmascon.com/topics/technologies/13a.asp

АJAX. Не повторяйте ошибок

AJAX (Asynchronous JavaScripting and XML) стремительно притягивает интерес веб-разработчиков к использованию определенного инструментария - конкретного набора технологий, с помощью которого (по мнению большинства) закладывается новый этап развития веб-приложений. Этот набор включает в себя (X)HTML, CSS, DOM, JavaScript, XML, XSLT, XMLHttpRequest и как альтернативу к XML/XSLT возможно использовать JSON и JSON-RPC.
_http://www.umade.ru/log/2005/06/73.html

Subsys_JsHttpRequest: достойная альтернатива AJAX:
http://dklab.ru/lib/Subsys_JsHttpRequest/