Создание Ajax-приложения
Первым шагом надо создать XML-файл с данными. Назовем этот файл data.xml.
data.xml
<?xml version="1.0" encoding="windows-1251" ?> <root> <data> Это некоторые данные, которые хранятся в XML-файле и были получены JavaScript-ом. </data> </root>
Теперь создадим простенькую веб-страничку, содержащую данные для примера. Это страница с JavaScript-ом, и пользователи будут запрашивать ее для того, чтобы увидеть технологию Ajax в действии. Назовем этот файл ajax. Html.
ajax.html
<html> <meta HTTP-equiv="Content-Type" content="text/html;charset=windows-1251"?> </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. Его надо будет вставить в нашу веб-страницу в области 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. Конструкция
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-запроса отправили бы данные.
Функция обновления 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;
}
|