Меню

Контакты

+ 996 312 46 07 70
(прямой)
+ 996 555 55 03 11
Мы рады вашему звонку!

Авторизация




Статьи
Создание Ajax-приложения
Создание 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;
}

 

 

Новости антивируса Dr. Web


Наши партнёры