Использование dom

Итак, принципиально задача решена: загружены новые данные, без прерывания работы пользователя с текущей страницей. Полученные данные нужно включить в состав документа, уже отображающегося на экране. Для этого надо воспользоваться структурой объектов DOM. От свойства responseText лучше отказаться, так как его применение потребует дополнительного синтаксического разбора. Гораздо полезнее свойство responseXML, в котором информация изначально представляется в совместимом с DOM виде. В структуре текущего документа необходимо выбрать узел, в состав которого следует включить возвращенные данные, и вызвать метод replaceChild(), заменив старое поддерево новым, прочитанным из responseXML объекта XMLHttpRequest. Осталось задать внешний вид полученных данных посредством каскадных таблиц стилей.

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

Проблема с кешированием в Microsoft Internet Explorer

Internet Explorer кеширует GET-запросы. Одним из решений является использование метода POST, который никогда не кешируется; однако он предназначен для других операций. Другим решением является использование метода запроса GET, включающего уникальную строку запроса с каждым вызовом, как показано на примере ниже.

req.open("GET", "xmlprovider.php?hash=" + Math.random());

Следует помнить, что такой способ сильно забивает кеш. Лучше воспользоваться установкой заголовка Expires на прошедшую дату в вашем скрипте, который генерирует содержимое XML. В PHP это будет так:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// disable IE caching

header("Last-Modified: " . gmdate( "D, d M Y H:i:s") . " GMT");

header("Cache-Control: no-cache, must-revalidate");

header("Pragma: no-cache");

В сервлетах Java это будет так:

response.setHeader("Pragma", "no-cache");

response.setHeader("Cache-Control", "must-revalidate");

response.setHeader("Cache-Control", "no-cache");

response.setHeader("Cache-Control", "no-store");

response.setDateHeader("Expires", 0);

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

req.open("GET", "xmlprovider.php");

req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

req.send(null);

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

При создании клиентских скриптов нельзя забывать о пользователях, у которых скрипты отключены. В случае использования Ajax это сделать довольно просто с помощью использования «захвата» ссылки или формы.

<form action="traditional_action.php" method="post"

onsubmit="perform_ajax_action(); return false;">

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

Вместо использования явного вызова return false в обработчике onsubmit, мы можем проверить есть ли необходимые для Ajax объекты, в вызываемой функции, и выполнить код Ajax если он поддерживается или передать управление форме если нет. Проверим, существует ли функция createAjaxRequest создающая соответствующий браузеру объект XMLHttpRequest.

var request; // our request object

function perform_ajax_action(){

if (!request = createAjaxRequest()){

// попытка использовать Ajax не удалась,

//подтверждаем форму

return true;

}

// нормальная обработка с помощью Ajax

//...

return false; // не подтверждать форму

}

В коде формы мы перепишем обработчик, чтобы использовать традиционный способ при первых признаках проблем.

<form action="traditional_action.php" method="post"

onsubmit="return perform_ajax_action();">

Если все пройдет хорошо, будет выполнен код Ajax, а подтверждение формы пропущено. При наличии проблем с поддержкой Ajax, форма будет подтверждена, и пользователь сможет продолжить работу обычным образом.