О Ajax.

[medgimet]

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

[medgimet]

Как написать 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

[lak_b]

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

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

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

[medgimet]

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

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

[medgimet]

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

[medgimet]

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

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

[medgimet]

Консорциум 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

[medgimet]

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

[medgimet]

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

(c)opennet.ru

[medgimet]

Книги по 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

[medgimet]

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

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

Google Web Toolkit (Beta)

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

[Al-x]

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

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

[medgimet]

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

[medgimet]

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

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

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

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

[medgimet]

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/

[medgimet]

ИТ-гиганты продвигают 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 на вики

[medgimet]

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

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

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

[medgimet]

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

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



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

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

[medgimet]

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

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

[andrei solovjev]

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