XML парсер и объект XMLHttpRequest

Все современные браузеры имеют встроенный XML парсер.

Этот XML парсер преобразует XML документ в объект XML DOM, которым затем можно манипулировать при помощи JavaScript.

XML парсер

XML DOM (Объектная модель документа) определяет свойства и методы для доступа и редактирования XML.

Но прежде, чем получить доступ к XML документу, его необходимо загрузить в объект XML DOM.

У всех современных браузеров есть встроенный XML парсер, который умеет преобразовывать текст в объект XML DOM.

Парсинг текстовой строки

Следующий пример парсит текстовую строку в объект XML DOM и извлекает информацию из него при помощи JavaScript:

Пример


<html>
<body>

<p id="demo"></p>

<script>
var text, parser, xmlDoc;

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

Объяснение примера

Определяется текстовая строка:


text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

Создается парсер XML DOM:


parser = new DOMParser();

Парсер создает новый объект XML DOM используя текстовую строку:


xmlDoc = parser.parseFromString(text,"text/xml");

Объект XMLHttpRequest

Объект XMLHttpRequest позволяет обмениваться данными в фоновом режиме.

Все современные браузеры имеют встроенный объект XMLHttpRequest для обмена данными с сервером.

Это настоящая сбывшаяся мечта разработчика, потому что вы можете:

  • Обновлять содержимое веб-страницы не перезагружая веб-страницу
  • Запрашивать данные с сервера, когда веб-страница уже загружена
  • Получать данные с сервера, когда веб-страница уже загружена
  • Посылать данные на сервер в фоновом режиме

Отправка объекта XMLHttpRequest

Стандартный код JavaScript для использования объекта XMLHttpRequest выглядит следующим образом:

Пример


var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Типичное действие, выполняемое, когда документ готов:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Объяснение примера

На первой строке примера создается объект XMLHttpRequest:


var xhttp = new XMLHttpRequest();

Свойство onreadystatechange определяет функцию, которая будет выполняться каждый раз, когда статус объекта XMLHttpRequest изменится:


xhttp.onreadystatechange = function()

Когда свойство readyState равно 4, и свойство status равно 200, ответ готов:


if (this.readyState == 4 && this.status == 200)

Свойство responseText возвращает ответ сервера в виде текстовой строки.

Эта текстовая строка может использоваться для изменения кода веб-страницы:


document.getElementById("demo").innerHTML = xhttp.responseText;
Более подробно об объекте XMLHttpRequest читайте в главе AJAX - Объект XMLHttpRequest нашего Учебника по Javascript.

Парсинг через объект XMLHttpRequest

У объекта XMLHttpRequest есть свой встроенный XML парсер.

Свойство responseText возвращает ответ сервера в виде строки.

Свойство responseXML возвращает ответ сервера в виде объекта XML DOM.

Если вы хотите использовать объект XML DOM, то вы можете использовать свойство responseXML.

Пример

Запрашиваем файл cd_catalog.xml и используем ответ как объект XML DOM;


var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       xmlDoc = xmlhttp.responseXML;
       txt = "";
       x = xmlDoc.getElementsByTagName("ARTIST");
       for (i = 0; i < x.length; i++) {
         txt += x[i].childNodes[0].nodeValue + "<br>";
       }
    }
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();

document.getElementById("demo").innerHTML = txt;

Доступ к данным на других доменах

Из-за соображения безопасности современные браузеры не допускают возможности обращаться к данным на других доменах.

Это означает, что веб-страница и XML файл, который она пытается загрузить, должны находиться на одном и том же сервере.