Последние учебники веб-разработки
×

XML Руководство

XML ГЛАВНАЯ XML Введение XML Как использовать XML дерево XML Синтаксис XML элементы XML Атрибуты XML Пространства имен XML дисплей XML XSLT XML XPath XML XLink XML Оценщик XML DTD XML схема XML сервер XML Приложения XML Примеры XML викторина XML сертификат

XML DOM

DOM вступление DOM Вершины DOM XMLHttpRequest DOM Доступ к DOM Узел информация DOM Список узлов DOM Пересекая DOM навигационный DOM Получить значения DOM Change Вершины DOM Remove Вершины DOM Replace Вершины DOM Create Вершины DOM Add Вершины DOM Clone Вершины DOM Примеры

DOM Справка

DOM Типы узлов DOM Узел DOM NodeList DOM NamedNodeMap DOM Документ DOM Элемент DOM Атрибут DOM Текст DOM CDATA DOM Комментарий DOM XMLHttpRequest DOM синтаксический анализатор

XML DTD

DTD вступление DTD Строительные блоки DTD элементы DTD Атрибуты DTD Элементы против Attr DTD юридические лица DTD Примеры

XSD Schema

XSD вступление XSD Как XSD <schema> XSD элементы XSD Атрибуты XSD ограничения

XSD Сложный

XSD элементы XSD пустой XSD Элементы только XSD Только текст XSD смешанный XSD индикаторы XSD <any> XSD <anyAttribute> XSD подмена XSD пример

XSD Data

XSD строка XSD Дата XSD числовой XSD Разное XSD Справка

Web Сервисы

XML Сервисы XML WSDL XML SOAP XML RDF XML RSS

 

XML Приложения


В этой главе демонстрирует некоторые HTML-приложений с использованием XML, HTTP, DOM и JavaScript.


XML документ, используемый

В этой главе мы будем использовать файл XML под названием "cd_catalog.xml" .


Отображение XML-данных в HTML-таблице

Этот пример перебирает каждый <CD> элемента, а также отображать значений <ARTIST> и <TITLE> элементов в HTML таблице:

пример

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}
th, td {
  padding: 5px;
}
</style>
</head>
<body>

<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      myFunction(xmlhttp);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>
Попробуй сам "

Для получения дополнительной информации об использовании JavaScript и XML DOM, перейдите к DOM интро.


Дисплей Первый компакт-диск в сНу элемент HTML

Ths пример использует функцию для отображения первого элемента CD в HTML-элемент с идентификатором = "showCD":

пример

displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp, i);
        }
    };
    xmlhttp.open("GET", "cd_catalog.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " +
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
Попробуй сам "

Перемещения между компакт-дисков

Для перемещения между компакт - дисков, в приведенном выше примере, добавьте next() и previous() функции:

пример

function next() {
  // display the next CD, unless you are on the last CD
  if (i < x.length-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  // display the previous CD, unless you are on the first CD
  if (i > 0) {
  i--;
  displayCD(i);
  }
}
Попробуй сам "

Показать информацию об альбоме При нажатии на компакт-диске

Последний пример показывает, как можно показать информацию об альбоме, когда пользователь нажимает на компакт-диске:

Попробуйте сами .