Tutorial de XML

XML INÍCIO Introdução ao XML XML Como usar Árvore XML Sintaxe XML Elementos XML Atributos XML Namespaces XML Exibição XML XML HttpRequest Analisador de XML XML DOM XML XPath XML XSLT XML XQuery XML XLink Validador de XML XML DTD Esquema XML Servidor XML Exemplos XML Teste de XML Certificado XML

XML AJAX

Introdução AJAX AJAX XML Http Solicitação AJAX Resposta AJAX Arquivo XML AJAX PHP AJAX ASP AJAX Banco de dados AJAX Aplicativos AJAX Exemplos AJAX

XML DOM

Introdução ao DOM Nós DOM Acesso ao DOM Informações do nó DOM Lista de nós DOM Travessia do DOM Navegação DOM Valores de obtenção do DOM Nós de alteração do DOM Remoção de nós do DOM Substituir nós DOM DOM Criar nós DOM Adicionar nós Nós clones DOM Exemplos de DOM

Tutorial XPath

Introdução ao XPath Nós XPath Sintaxe XPath Eixos XPath Operadores XPath Exemplos de XPath

Tutorial XSLT

Introdução ao XSLT Idiomas XSL Transformação XSLT XSLT <modelo> XSLT <valor-de> XSLT <para-cada> XSLT <classificar> XSLT <if> XSLT <escolha> Aplicar XSLT XSLT no cliente XSLT no servidor XSLT Editar XML Exemplos de XSLT

Tutorial XQuery

Introdução ao XQuery Exemplo de XQuery XQuery FLWOR XQuery HTML Termos de XQuery Sintaxe XQuery Adicionar XQuery Seleção de XQuery Funções XQuery

XML DTD

Introdução DTD Blocos de construção de DTD Elementos DTD Atributos DTD Elementos DTD vs Attr Entidades DTD Exemplos de DTD

Esquema XSD

Introdução ao XSD XSD Como fazer XSD <esquema> Elementos XSD Atributos XSD Restrições XSD

Complexo XSD

Elementos XSD XSD vazio Apenas elementos XSD Somente texto XSD XSD Misto Indicadores XSD XSD <qualquer> XSD <qualquer atributo> Substituição XSD Exemplo de XSD

Dados XSD

Cadeia XSD Data XSD XSD Numérico XSD Misc Referência XSD

Serviços da Web

Serviços XML XML WSDL XML SOAP XML RDF XML RSS

Referências

Tipos de nós DOM Nó DOM Lista de nós DOM DOM NamedNodeMap Documento DOM Elemento DOM Atributo DOM Texto DOM DOM CDATA Comentário DOM DOM XMLHttpRequest Analisador de DOM Elementos XSLT Funções XSLT/XPath

Aplicativos XML


Este capítulo demonstra alguns aplicativos HTML usando XML, HTTP, DOM e JavaScript.


O documento XML usado

Neste capítulo usaremos o arquivo XML chamado "cd_catalog.xml" .


Exibir dados XML em uma tabela HTML

Este exemplo percorre cada elemento <CD> e exibe os valores dos elementos <ARTIST> e <TITLE> em uma tabela HTML:

Exemplo

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

<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  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>

Para obter mais informações sobre como usar JavaScript e XML DOM, acesse DOM Intro.



Exibir o primeiro CD em um elemento div HTML

Este exemplo usa uma função para exibir o primeiro elemento CD em um elemento HTML com id="showCD":

Exemplo

displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this, 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;
}

Navegue entre os CDs

Para navegar entre os CDs, no exemplo acima, adicione uma função next() e previous():

Exemplo

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);
  }
}

Mostrar informações do álbum ao clicar em um CD

O último exemplo mostra como você pode exibir as informações do álbum quando o usuário clica em um CD:

Exemplo

function displayCD(i) {
    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;
}