JavaScript-е

9 10 11 12 13 14 15

</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. Его надо будет вставить в нашу веб-страницу в области 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 элемента в веб-странице (обновляемый элемент в текущей веб-странице) и данные для заполнения этого элемента. Обновляться будет тег p, имеющий атрибут id="xmlData". С помощью свойства responseXML объявляем, что это XML-файл. xmlObj.responseXML является объектом DOM. Этот объект можно интерпретировать как объект document удаленного XML-файла. Другими словами, xmlObj.responseXML - это объект document, если бы запускали скрипт в самом файле data.xml. Через метод getElementsByTagName ищем данные по имени тега. В данном случае это первый тег с именем data. Конструкция