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

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

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

Информируйте пользователя

Сначала нам нужно добавить сообщения об ошибках, о которых не может сообщить браузер. О каких ошибках мы должны сообщить пользователю? Для начала это ошибки соединения. Если запрос не удался, мы сможем получить код ошибки с помощью XMLHttpRequest и вывести соответствующее сообщение. Здесь приведен отрывок функции, которая обрабатывает событие onreadystatechange, объекта request класса XMLHttpRequest.

if (request.readyState == 4){// 4(complete) запрос выполнен

if (request.status == 200){

// HTTP OK, продолжаем нормальную обработку Ajax

//...

}else{

// что-то пошло не так, сообщаем об ошибке

error("HTTP " + request.status +

". Произошла ошибка: " + request.statusText);

}

}

Очень важно, чтобы цикл связи Ajax не прерывался. Серверный скрипт должен возвращать корректный XML документ. Если серверный скрипт завершится аварийно, сообщение об ошибке будет утеряно и приложение упадет

Если скрипты отключены

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

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

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

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

Мы можем пойти дальше и проверить поддерживает ли браузер объект XMLHttpRequest. Вместо использования явного вызова 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, форма будет подтверждена, и пользователь сможет продолжить работу обычным образом.

Рассмотрим пример:

//Создаем новый объект-запрос JavaScript:

var req = new ActiveXObject("Microsoft.XMLHTTP"); //(для IE)

var req = new XMLHttpRequest(); // (Для всего остального)

Часто выбор класса для объекта req оформляется в виде функции

//пишем функцию, использующую этот объект

var req;

function loadXMLDoc(url) {

// branch for native XMLHttpRequest object

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null); }

// branch for IE/Windows ActiveX version

else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET", url, true); //открыть запрос

req.send();//послать запрос

}

}

}

//В теле HTML файла пишем скрипт:

function checkName(input, response)

{

if (response!= ''){

// Response mode

message = document.getElementById('nameCheckFailed');

if (response == '1'){

message.className = 'error';

}else{

message.className = 'hidden';

}

}else{

// Input mode

url = 'http://localhost/xml/checkUserName.php?q=' \\

+ input;

loadXMLDoc(url);

}

}

В данном примере в файле localhost/xml/checkUserName.php обрабатываются данные, полученные из командной строки в в переменной q. А результат сохраняется в XML структуре, которая хранится в этом же файле. Так можно получить из БД и обработать данные, которые необходимо обновить.