você pode fazer uma requisição AJAX
para ler o XML
, uma vez que o mesmo seja carregado, você pode navegar pelo mesmo de forma semelhante ao que você navega pelos elementos DOM
da sua pagina, usando getElementById
, getElementsByTagName
, etc.
abaixo segue um exemplo de como ler um XML com alguns livros, uma vez que
// copiando os dados da tag `book` para o objeto `Book`
var Book = function (node) {
var that = this;
this.id = node.id;
[].forEach.call(node.childNodes, function (child, indice) {
if (child.nodeType == 1) {
that[child.nodeName] = child.textContent;
}
});
}
// criando um link para um XML.
var xml = document.getElementById("xml").innerHTML;
var url = URL.createObjectURL(new Blob([xml], { type: "application/xml" }));
var tbody = document.querySelector("tbody");
// lendo um XML por AJAX.
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url, true)
httpRequest.addEventListener("readystatechange", function () {
if (httpRequest.readyState == 4) {
var catalog = httpRequest.responseXML.getElementsByTagName("catalog")[0];
var books = catalog.getElementsByTagName("book");
[].forEach.call(books, function (node, indice) {
var book = new Book(node);
var linha = document.createElement("tr");
for (var indice = 0; indice < 6; indice++) {
var celula = document.createElement("td");
linha.appendChild(celula);
}
linha.dataset.id = book.id;
linha.children[0].textContent = book.author;
linha.children[1].textContent = book.title;
linha.children[2].textContent = book.genre;
linha.children[3].textContent = book.price;
linha.children[4].textContent = book.publish_date;
linha.children[5].textContent = book.description;
tbody.appendChild(linha);
});
}
});
httpRequest.send();
tr td {
white-space: nowrap;
}
tr td:nthchild(5) {
text-overflow: ellipsis;
}
<table>
<thead>
<tr>
<th>Author</th>
<th>Title</th>
<th>Genre</th>
<th>Prince</th>
<th>Publish Date</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<template id="xml">
<?xml version="1.0"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
<description>An in-depth look at creating applications
with XML.</description>
</book>
<book id="bk102">
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
</book>
<book id="bk103">
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
<description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
</book>
<book id="bk104">
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
</book>
<book id="bk105">
<author>Corets, Eva</author>
<title>The Sundered Grail</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
<description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
</book>
<book id="bk106">
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
<description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
</book>
<book id="bk107">
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
</book>
<book id="bk108">
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>
</book>
<book id="bk109">
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
<description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
</book>
<book id="bk110">
<author>O'Brien, Tim</author>
<title>Microsoft .NET: The Programming Bible</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
<description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
</book>
<book id="bk111">
<author>O'Brien, Tim</author>
<title>MSXML3: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
<description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
<description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
</book>
</catalog>
</template>
No exemplo acima utilizei um blob para criar um link para um XML em memoria, em um sistema final, isto não é necessario, afinal você já deve ter o XML hospedado na sua Maquina.
Em todo caso, esta abordagem pode ser util, caso precise ler um XML hospedado na maquina do Usuario, para tal o usuario irá precisar fazer o upload do arquivo, então você poderá ler o mesmo.
// copiando os dados da tag `book` para o objeto `Book`
var Book = function (node) {
var that = this;
this.id = node.id;
[].forEach.call(node.childNodes, function (child, indice) {
if (child.nodeType == 1) {
that[child.nodeName] = child.textContent;
}
});
}
// criando um link para um XML.
var tbody = document.querySelector("tbody");
var fileUpload = document.getElementById("fileUpload");
fileUpload.addEventListener("change", function (event) {
var file = fileUpload.files[0];
if (file.type.indexOf("xml") == -1)
return;
var url = URL.createObjectURL(file);
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url, true)
httpRequest.addEventListener("readystatechange", function () {
if (httpRequest.readyState == 4) {
var catalog = httpRequest.responseXML.getElementsByTagName("catalog")[0];
var books = catalog.getElementsByTagName("book");
[].forEach.call(books, function (node, indice) {
var book = new Book(node);
var linha = document.createElement("tr");
for (var indice = 0; indice < 6; indice++) {
var celula = document.createElement("td");
linha.appendChild(celula);
}
linha.dataset.id = book.id;
linha.children[0].textContent = book.author;
linha.children[1].textContent = book.title;
linha.children[2].textContent = book.genre;
linha.children[3].textContent = book.price;
linha.children[4].textContent = book.publish_date;
linha.children[5].textContent = book.description;
tbody.appendChild(linha);
});
}
});
httpRequest.send();
});
tr td {
white-space: nowrap;
}
tr td:nthchild(5) {
text-overflow: ellipsis;
}
<input id="fileUpload" type="file" />
<table>
<thead>
<tr>
<th>Author</th>
<th>Title</th>
<th>Genre</th>
<th>Prince</th>
<th>Publish Date</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Uma forma mais simples de obter o mesmo resultado, é utilizar um FileReader
no lugar de combinar o URL.createObjectURL(file)
com XMLHttpRequest
, mas ao utilizar o XMLHttpRequest
, você pode usar a mesma base de codigo, para ler arquivos *.xml
locais e remotos. Em todo caso segue um exemplo usando o FileReader
.
var file = fileUpload.files[0];
var leitor = new FileReader();
leitor.addEventListener("load", function() {
var xmlDocument = new DOMParser().parseFromString(this.result, "text/xml");
var catalog = xmlDocument.getElementsByTagName("catalog")[0];
//restante do codigo aqui.
});
reader.readAsText(file );