Создание Ajax-приложения

Первым шагом надо создать XML-файл с данными. Назовем этот файл data.xml.

data.xml

<?xml version="1.0" encoding="utf-8" ?>
<root>
<data>
  Это некоторые данные, которые хранятся в XML-файле
  и были получены JavaScript-ом.
</data>
</root>

Теперь создадим простенькую Web-страничку, содержащую данные для примера. Это страница с JavaScript-ом, и пользователи будут запрашивать ее для того, чтобы увидеть технологию Ajax в действии. Назовем этот файл ajax.html.

ajax.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"?>
</head>
<body>
<h1>Разработка Web-приложений с помощью технологии Ajax</h1>
<p>Эта страница демонстрирует использование Ajax-технологии
(Асинхронных Javascript и XML) для обновления содержания страницы
посредством чтения удаленного файла динамически - без перезагрузки
страницы. Обратите внимание эта операция невозможна при отключенном
JavaScript-е.
</p>
<p id="xmlData">Это данные по умолчанию.
<a href="data.xml" title="Обзор данных XML файла."
	onclick="ajaxRead('data.xml');return false">
Обзор XML данных</a>
</body>
</html>

Обратите внимание: для пользователей с отключенным JavaScript вставлена ссылка к файлу data.xml. Для пользователей с включенным JavaScript-ом будет вызвана функция ajaxRead.

Теперь напишем скрипт, который и будет получать данные из файла XML. Его надо будет вставить в нашу Web-страницу в области head.

<script type="text/javascript">
<!--
function ajaxRead(file){
var xmlObj = null;

Далее идет обязательная часть скрипта - проверка доступности методов. Все браузеры описывают объект по-своему. При наличии window.XMLHttpRequest (для Mozilla, Netscape 7 и Safari 1.2) создаем экземпляр объекта XMLHttpRequest. Если этот метод недоступен, проверяем наличие window.ActiveXObject (для Internet Explorer 5+) и создаем экземпляр объекта ActiveXObject. Если браузер не предоставляет ни одну из проверяемых возможностей, то заканчиваем функцию и возвращаемся.

if(window.XMLHttpRequest){
	xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
	xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
	return;
}

При каждом изменении состояния объекта XMLHttpRequest происходит событие onreadystatechange. Если состояние изменяется мы используем конструкцию

xmlObj.onreadystatechange = function(){ : }.

С помощью if убеждаемся, что данные доступны, затем запускаем функцию обновления. Она имеет два параметра: ID элемента в Web-странице (обновляемый элемент в текущей Web-странице) и данные для заполнения этого элемента. Обновляться будет тег p, имеющий атрибут id="xmlData". С помощью свойства responseXML объявляем, что это XML-файл. xmlObj.responseXML является объектом DOM. Этот объект можно интерпретировать как объект document удаленного XML-файла. Другими словами, xmlObj.responseXML - это объект document, если бы запускали скрипт в самом файле data.xml. Через метод getElementsByTagName ищем данные по имени тега. В данном случае это первый тег с именем data. Конструкция

 xmlObj.responseXML.getElementsByTagName('data')[0]

выделяет только узел. Чтобы выделить содержимое узла используется свойство firstChild.data.

xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
	updateObj('xmlData',
	xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
     // updateObj('xmlData', xmlObj.responseText ); // если не XML документ
}
}

Методом open открываем соединение с сервером с указанием типа передачи данных GET, URL файла данных (в нашем случае переменная file, которая была отослана как параметр функции ajaxRead - data.xml) и асинхронности (по умолчанию).

xmlObj.open ('GET', file);

В последней строке просто отсылаем пустую строку на сервер. Иначе состояние объекта XMLHttpRequest никогда не станет равным 4, то есть не будет "завершено", и страничку нельзя будет обновить. Для POST-запроса отправили бы данные.

xmlObj.send ('');
}

Функция обновления updateObj с помощью getElementById ищет узел по указанному ID и заменяет его содержимое. Ее первый параметр obj - ID обновляемого объекта; второй параметр data - новые данные, которые должны быть помещены в обновляемый объект obj.

function updateObj(obj, data){
document.getElementById(obj). innerHTML = "<b>"+data+"</b>"; }
//-></script>

Пример использования для разных браузеров:

function loadHTML(sURL)
{
  var request=null;

  // пытаемся создать объект для MSXML 2 и старше
  if(!request) try {
    request=new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e){}

  // не вышло... попробуем для MSXML 1
  if(!request) try {
    request=new ActiveXObject('Microsoft.XMLHTTP');
  } catch (e){}

  // не вышло... попробуем для Mozilla
  if(!request) try {
    request=new XMLHttpRequest();
  } catch (e){}

  if(!request)
    // ничего не получилось...
    return "";

  // делаем запрос
  request.open('GET', sURL, false);
  request.send(null);

  // возвращаем текст
  return request.responseText;
}

Получение части данных

У объекта XMLHTTPRequest есть состояние readyState=3, при котором ответ находится в процессе загрузки, и уже полученная часть может быть прочитана в responseText. У большинства браузеров(кроме IE, который изобрел свой объект XDomainRequest) состояние interactive можно использовать для передачи сообщений с сервера не закрывая соединение.

Для IE от версии 8 испольуйте XDomainRequest вместо new ActiveXObject('MSXML2.XMLHTTP'), но этот класс работает несколько иначе, чем XmlHTTPRequest.

Следующая лекция