turenko/blog

Итак, AJAX - асинхронный javascript и xml. Это не язык программирования и не среда разработки.
AJAX - подход к построению интерактивных пользовательских веб-приложений.
Страница не перезагружается каждый раз. Догружаются нужные данные.
используется DHTML для динамического изменения содержания страницы.
Используется технология динамического обращения к серверу "на лету" (варианты - XMLHttpRequest, динамическое создание дочерних фреймов, динамическое создание тэга script).
Примеры интерфейсов ajax - gmail, google maps, google suggest.

Классическая модель динамического веб-приложения:
- загрузка пользователем страницы, осуществление действия с каким-либо элементом страницы;
- формирование и отправка браузером запроса на сервер;
- загрузка новой страницы, сгенерированной сервером.

Модель AJAX
- загрузка пользователем страницы, осуществление действия с каким-либо элементом страницы;
- скрипт (движок ajax) определяет, какие конкретно данные нужно запросить с сервера для обновления;
- формирование и отправка браузером запроса на сервер;
- сервер возвращает необходимый фрагмент документа (например, HTML-код);
- скрипт (javascript) вносит изменения в необходимый фрагмент документа при помощи полученного кода.

Часто сервер передаёт не готовый HTML-код, а только данные; а HTML-элементы создаются исходя из этих данных, с использованием методов модификации DOM. При этом в качестве формата передачи данных обычно используются XML или JSON (javascript object notation).

Для упрощения жизни, существует ряд библиотек для работы с AJAX, в том числе в связке AJAX+PHP.
Например, xajax, sajax. Остановимся на библиотеке xajax.

Внимание, в примерах используется кодировка UTF-8. Блокнот в Windows 2000/XP её нормально читает. Также можно пользоваться EditPlus или другим редактором, поддерживающим UTF-8.

Примеры:

001.php

регистрация функции testFunction(), которая обновляет текущее время в div1.innerHTML
установка периодического вызова этой функции (каждую секунду) - window.setInterval()

в заголовке файла подключаются функции xajax:

require ('xajax/xajax.inc.php');
$xajax = new xajax();
$xajax->registerFunction("testFunction");
$xajax->processRequests();

в функциях обработчиках готовится объект ответа:

$objResponse = new xajaxResponse();
$objResponse->addAssign("div1", "innerHTML", $text);
return $objResponse;

внутри секции head HTML-кода нужно вставить генерацию необходимого Javascript-кода для xajax:

printJavascript('xajax/'); ?>

в Javascript функция testFunction() вызывается как xajax_testFunction()

002.php

регистрация функции getList1() и getList2().
getList1() считывает из файла 002region.txt список регионов и в div1.innerHTML вставляет список регионов (поле).
getList2() вызывается при изменении выбора региона, считывает из файла 002city.txt список городов по коду выбранного региона и в div2.innerHTML вставляет список городов текущего региона (поле).
при загрузке (onload) вызывается функция init(), которая вызывает функцию xajax_getList1(), чтобы при открытии страницы заполнился список регионов.

003.php

регистрация функции getList3()
getList3() помещает в div3.innerHTML таблицу со списком адресов людей из файла 003people.txt

004.php

регистрация функций getList1(), getList2() из примера 002
регистрация функции getList3() из примера 003
регистрация функции processForm1()
processForm1() обрабатывает переданный ей массив значений из формы для добавления пользователя
выдает предупреждения, если не введены имя, город или e-mail
выдает сообщение при успешном добавлении записи
чистит введенные из формы данные от ненужных символов
добавляет запись в файл 003people.txt
выдает скрипт, вызывающий функцию getList3() - для обновления списка людей с адресами

при создании ответа сервера используются:
$objResponse->addAlert("...");
$objResponse->addScript("xajax_getList3();");

005.php

регистрация функции updateNews()
функция updateNews() читает из файла 005.txt новости по 1 на строку, выводит их в newsBlock.innerHTML.
через Javascript задает новое значение переменной newsIndex
$objResponse->addAssign("newsBlock", "innerHTML", $text);
$objResponse->addScript("newsIndex = $idx;");

Примеры тут: 20070217.zip.
Рекомендую использовать домашний вебсервер вроде WOS или Денвер.