XML - Parte 4

Lendo XML com
JavaScript
Prof. Aldo de Queiroz Jr
aldoqjr@yahoo.com.br

Lendo XML com Java Script
 O propósito deste roteiro é manipular os dados
de seu XML pra fazer um menu por exemplo, ou
uma tabela, ou uma lista, puxar RSS, etc.
 Um lembrete antes de iniciar: diferente das
linguagens server-side (php, asp, etc), por motivo
de segurança, o navegador não permite que
você carregue qualquer arquivo que esteja fora
de seu domínio, ou seja, nem adianta tentar
carregar XML's ou RSS's de outros sites.

Arquivo de exemplo 1
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>
Don't forget me this weekend!
</body>
</note>

Preparando o código
 Salve este arquivo com o nome “note.xml” na
mesma pasta do seu arquivo “.html”
 Os navegadores carregam um arquivo XML de
formas diferentes. O IE usa ActiveX. Para o
Firefox e Opera, iremos usar o XMLHttpRequest
(o mesmo que se usa em ajax).
 O código que irá retornar um Objeto XML para
os três navegadores citados vem a seguir...

Rotina para leitura do XML
<html>
...
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
</script>
...
</html>

Arquivo HTML completo
<!DOCTYPE html>
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span>
</div>
<script>
// COPIE AQUI O CÓDIGO JAVA SCRIPT DO SLIDE ANTERIOR
document.getElementById("to").innerHTML =
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML =
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML =
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

Exercício
 Crie uma página HTML com JavaScript
que leia o documento XML a seguir e
escreva o seu conteúdo em uma página
WEB.
 O documento deverá conter o nome,
email e a identificação da pessoa
(código), e quando disponível o apelido da
pessoa.

Arquivo para exercício
<?xml version="1.0" ?>
<pessoa>
<identificacao id="1">
<nome>Joao</nome>
<email>joao@mail.com</email>
</identificacao>
<identificacao id="2">
<nome apelido=“Ze">Jose Silva</nome>
<email>ze.silva@mail.com</email>
</identificacao>
</pessoa>

Lendo com Jquery (pesquisar)
 A jQuery é a biblioteca Java Script mais usada
em aplicações web atualmente. Ela foi
desenvolvida em 2006 por John Resig e é
suportada por uma comunidade de
desenvolvedores, além do time do projeto
jQuery.
 Ela foi construída para ser leve, poder ser usada
nos principais navegadores e ser compatível com
a especificação CSS3.

Mas sobre a JQuery
 Ela simplifica a maneira como
acessar os elementos DOM, tornando mais fácil
a navegação pelas páginas. A biblioteca possui
poderosos recursos Ajax, manipulação de
eventos e efeitos de animação,
permitindo um rápido desenvolvimento de
aplicações web.
 Além disso, a jQuery permite a criação de
plugins, o que possibilita aos desenvolvedores
criar recursos poderosos com base no núcleo
jQuery.

Aonde encontrar e usar?
 O site oficial da JQuery é http://jquery.com
 O download da última versão pode ser feito no
endereço: http://jquery.com/download
 Seu uso pode ser feito diretamente do site:
 http://code.jquery.com
 Exemplo:
<script src=“http://code.jquery.com/jquery-1.11.3.min.js”
type=“text/javascript”>
</script>

XML - Parte 4

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (13)

Semelhante a XML - Parte 4

Semelhante a XML - Parte 4 (20)

XML - Parte 4