(aula 3) AJAX para Iniciantes – Recuperando dados XML com AJAX

Veja como recuperar valores de um documento XML externo via AJAX, isso é muito útil para ler Feeds RSS, APIs e criar páginas HTML dinâmicas (DHTML).

Este é um exemplo bem básico, apenas mostrando o esqueleto de como funciona essa transferência XML para HTML.

Este é um exemplo bem básico, apenas mostrando o esqueleto de como funciona essa transferência XML para HTML.

Veja como recuperar valores de um documento XML externo via AJAX, isso é muito útil para ler Feeds RSS, APIs e criar páginas HTML dinâmicas (DHTML).

Este é um exemplo bem básico, apenas mostrando o esqueleto de como funciona essa transferência XML para HTML.

A explicação do script ajax.js está disponível no post da primeira aula AJAX para Iniciantes – Instanciando XMLHttpRequest.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax - Aula 3</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function xmlBasicExample() {
	// instanciando o objeto XMLHttpRequest
	var ajax = new Ajax();
	var container = document.getElementById('container');
	
	ajax.open('GET', 'names.xml', true);
	ajax.onreadystatechange = function leituraRequisicao() {
		if (ajax.readyState < 4) {
			container.innerHTML = "Carregando...";
		} else {
			if (ajax.status == 200) {
				var xmldoc = ajax.responseXML;
   				var root = xmldoc.getElementsByTagName('file')&#91;0&#93;;
				
				var name = root.childNodes&#91;1&#93;.childNodes&#91;1&#93;.childNodes&#91;0&#93;.nodeValue;
				
				container.innerHTML = "O meu nome é " + name;
			} else {
				alert("Há um problema na requisição.");
			}
		}
	}
	ajax.send(null);
	return false;
}

window.onload = function() {
	xmlBasicExample();
}
</script>
</head>

<body>
<h1>Ajax - Aula 3</h1>
<div id="container"></div>
</body>
</html>

Veja este exemplo funcionando.

XML DOM: Uma Introdução

Todos sabem que hoje em dia as recomendações do consórcio W3C são quase que leis para nós desenvolvedores. Deixe de segui-la e você estará fazendo feio.

Todos sabem também que – pelo menos na internet – notícias, informações e dados tendem a ser compartilhados entre softwares e sites, blogs e blogs, redes sociais e redes sociais, portais e blogs, por ai vai, em forma de API ou não. Mas aqui, o mais importante é saber que existe um meio entre uma ponta e outra: o XML.

Saiba o que é o XML e o DOM.

Todos sabem que hoje em dia as recomendações do consórcio W3C são quase que leis para nós desenvolvedores. Deixe de segui-la e você estará fazendo feio.

Todos sabem também que – pelo menos na internet – notícias, informações e dados tendem a ser compartilhados entre softwares e sites, blogs e blogs, redes sociais e redes sociais, portais e blogs,  por ai vai, em forma de API ou não. Mas aqui, o mais importante é saber que existe um meio entre uma ponta e outra: o XML.

O que é  XML?

XMLO XML (eXtensible Markup Language) é algo bem simples, mas que pode ser utilizado em coisas simples à complexas. É uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais. É um subtipo de SGML e seu propósito principal é a facilidade de compartilhamento de informações através da Internet.

Suas principais características são:

  • Separação do conteúdo da formatação
  • Simplicidade e Legibilidade, tanto para humanos quanto para computadores
  • Possibilidade de criação de tags sem limitação
  • Criação de arquivos para validação de estrutura (Chamados DTDs)
  • Interligação de bancos de dados distintos
  • Concentração na estrutura da informação, e não na sua aparência

O XML é um formato para a criação de documentos com dados organizados de forma hierárquica, como se vê, frequentemente, em documentos de texto formatados, imagens vetoriais ou banco de dados.

Pela sua portabilidade, já que é um formato que não depende das plataformas de hardware ou de software, um banco de dados pode, através de uma aplicação, escrever em um arquivo XML, e um outro banco distinto pode ler então estes mesmos dados.

Um documento XML é criado de uma forma que seja de fácil interpretação do computador e também de humanos.

Veja como uma receita de bolo pode ser escrita utilizado o XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">
  <titulo>Pão simples</titulo>
  <ingredientes>
    <ingrediente quantidade="3" unidade="xícaras">Farinha</ingrediente>
    <ingrediente quantidade="7" unidade="gramas">Fermento</ingrediente>
    <ingrediente quantidade="1.5" unidade="xícaras" estado="morna">Água</ingrediente>
    <ingrediente quantidade="1" unidade="colheres de chá">Sal</ingrediente>
  </ingredientes>
  <instrucoes>
    <passo>Misture todos os ingredientes, e dissolva bem.</passo>
    <passo>Cubra com um pano e deixe por uma hora em um local morno.</passo>
    <passo>Misture novamente, coloque numa bandeja e asse num forno.</passo>
  </instrucoes>
</receita>

Para maiores informações: Wikipedia ou Google

O que é DOM ?

DOM (Document Object Model – Modelo de Objetos de Documentos) é uma especificação da W3C, independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura, conteúdo e estilo de um documento eletrônico. Ou seja, permitindo que o documento seja mais tarde processado e os resultados desse processamento sejam incorporados de volta no próprio documento. A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.

Para maiores informações: Wikipedia ou Google

O XML e o DOM

  • Um padrão de modelagem de objetos para XML
  • A interface de programação padrão para XML
  • Independente da linguagem e plataforma
  • Um padrão W3C

O XML DOM define o s objetos e propriedades de todos os elementos XML, e os métodos (interface) para acessá-los.

Em outras palavras: O XML DOM é um padrão para pegar, alterar, adicionar, ou deletar elementos XML.

Fonte: w3schools

As novas tags que vem no HTML 5

  • <article>: Define um artigo.
  • <aside>: Define algum conteúdo relacionado ao artigo.
  • <audio>: Define um streaming de áudio em um documento HTML
  • <canvas>: Define a criação de gráficos em uma página web
  • <command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
  • <datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
  • <datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
  • <datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
  • <details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
  • <embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
  • <eventsource>: Define um destino para eventos enviados por um servidor.
  • <figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
  • <footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
  • <header>: Define o cabeçalho de uma seção ou documento.
  • <mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
  • <meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
  • <nav>: Define uma seção de links de navegação.
  • <nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
  • <output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
  • <progress>: Define o progresso de uma tarefa de qualquer tipo.
  • <rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
  • <section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
  • <source>: Define recursos para elementos de mídia, como <audio> e <video>.
  • <time>: Define tempo ou data, ou ambos.
  • <video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.
  •  

    TAGS PARA CONSTRUIR O LAYOUT NO HTML 5

     

  • <nav>: Define o local do menu
  • <section>: Define uma sessão de conteúdo da página
  • <article>: Define o conteúdo (artigo, textos, postagens, etc)
  • <header>: Define o cabeçalho (topo) de algum elemento (body, section, nav, etc)
  • <footer>: Define o rodapé de algum elemento (body, section, nav, etc)
  • <aside>: Define o local da barra lateral (como um layout em 3 colunas)
  • Lembrando que nada é mágico e nem deve ser, tudo precisa e continua necessitando de estilização com CSS.

    No próximo artigo, irei mostrar alguns exemplos e formas de utilizar essas novas tags.

    Abraços!

    Sobre o HTML 5

    HTML 5 No início de 2009, o W3C anunciou a primeira especificação do HTML5.

    A versão atual do HTML é a 4.0.1, e a versão final do HTML está prometida para 2012.

    Foram feitas grandes alterações que favorecem a semântica, que incluem:

    • novas API’s
    • Elemento <canvas> para desenhos dinâmicos;
    • Network status (online/offline);
    • Utilização de um plugin gratuito de áudio e vídeo via tags;
    • contentEditable – Editor rico de conteúdo;
    • Drag and Drop de elementos;
    • Cross-document e cross-domain messages;
    • Histórico de navegação em Ajax;
    • Geolocation API;
    • Maior controle de dados sobre formulários;
    • Armazenamento de dados no cliente;
    • Web worker threads;
    • Melhoria na depuração de erros;
    • Entre outros avanços.

    Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash do Adobe, Silverlight, da Microsoft, e o recente JavaFX, da Sun.

    Recentemente, Shantanu Narayen, diretor executivo do Adobe, disse que o Flash não irá perder mercado, porem a versão 5 do HTML já está sendo chamado de “Flash-killer”. Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão popular quanto hoje.

    Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML 5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que “usemos mais o browser do que nunca”.

    Após dez anos sem atualizações, a forma como se escreve páginas na Internet passa por uma boa transformação. O HTML 5 oferece uma experiência web totalmente diferente para usuários e embora exista um longo caminho para ser finalizado, os navegadores mais importantes, como o Opera, Google Chrome, Safari 4, o novo Firefox 3.5 e o Internet Explorer 8 já implementaram partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

    Na versão 4 do HTML, a atual, o navegador não distingue o que é topo, conteúdo, rodapé e menu, mas com o HTML 5 isso irá mudar, veja:

    Estrutura de código com o HTML 4:

    <body>
      <div id="topo">...</div>
       <div id="menu">...</div>
       <div class="content">...</div>
       <div id="barralateral">...</div>
       <div id="rodape">...</div>
      </div>
    </body>

     

    html5_estrutura Estrutura de código com o HTML 5:

    <body>
      <header>...</header>
      <nav>...</nav>
      <section>
        <header>...</header>
        <article>...</article>
        <footer>...</footer>
      </section>
      <aside>...</aside>
      <footer>...</footer>
    </body>

    Ou seja, agora o navegador terá um conhecimento real de como o layout está sendo renderizado, o que é o rodapé, o conteúdo, a barra lateral da direita e etc. E claro, isto irá auxiliar muito os mecânismos de busca a filtrar informações úteis ou não. Talvez o que está em “header” não interesse muito, talvez o mais importante será o que está dentro de “article”, e por ai vai as possibilidades de mudanças que a nova tecnologia nos dará.

    Repare pela imagem representando o layout que os elementos header e footer não são exclusivos da página, mas pode ser usado para representar o topo e o rodapé de qualquer conteúdo (ou article).

    Bom, não vamos extender muito o tópico, resumi bem e de forma simples o que é o novo HTML.

    Nos próximos artigos sobre o HTML 5 eu vou mostrar detalhadamente sobre as novas TAGs e atributos e quais são suas funcionalidades. Também irei mostrar um exemplo prático de como desenvolver o HTML 5.

    Abraços!

    Como buscar informações detalhadas de um endereço como a Latitude e Longitude com a API do Google Maps

    Este é um exemplo de extração de dados da geocodificação utilizando a API do Google Maps

    Este é um exemplo de extração de dados da geocodificação utilizando a API do Google Maps
    Este é um exemplo de extração de dados da geocodificação utilizando a API do Google Maps

    Fala galerá, esta API do Google Maps é muito boa quando você precisa trabalhar com mapas, endereços, ceps, etc. Vou mostrar para vocês um exemplo de código que traz informações detalhadas sobre um endereço.

    Vou utilizar como exemplo o endereço:

    Rua Vergueiro, 1000 (é o endereço do Centro Cultural de São Paulo que fica na Vergueiro)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Buscar Informações detalhadas do endereço</title>
    <script src="<a href="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh-4-WXT7vryB4zWcSDKIThSuBLcACnbYAIBxS9eHfruCpUv1BBRZi-GSNoVlnTofbgShokT-TgG8BA">http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh-4-WXT7vryB4zWcSDKIThSuBLcACnbYAIBxS9eHfruCpUv1BBRZi-GSNoVlnTofbgShokT-TgG8BA</a>" type="text/javascript"></script>
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
    
    function initialize() {
    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("mapa"));
    map.setCenter(new GLatLng(34, 0), 1);
    geocoder = new GClientGeocoder();
    }
    }
    
    function showAddress(address) {
    if (geocoder) {
    geocoder.getLatLng(
    address,
    function(point) {
    if (!point) {
    alert(address + " não encontrado");
    } else {
    map.setCenter(point, 13);
    var marker = new GMarker(point);
    map.addOverlay(marker);
    marker.openInfoWindowHtml(address);
    }
    }
    );
    }
    }
    
    // addAddressToMap() é chamado quando o geocoder retorna uma
    // resposta.  Ele adiciona um marcador no mapa com uma janela aberta
    // mostrando uma boa formatação do endereço, o código do país, latitude, longitude e o CEP.
    function addAddressToMap(response) {
    map.clearOverlays();
    if (!response || response.Status.code != 200) {
    alert("Desculpe, não fomos capazes de geocodificar o endereço");
    } else {
    place = response.Placemark[0];
    point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
    marker = new GMarker(point);
    map.addOverlay(marker);
    marker.openInfoWindowHtml(place.address + '<br>' +
    '<b>Código do páis:</b> ' + place.AddressDetails.Country.CountryNameCode + '<br>' +
    '<b>Latitude:</b>' + place.Point.coordinates[1] + '<br>' +
    '<b>Longitude:</b>' + place.Point.coordinates[0] + '<br>' +
    '<b>CEP:</b>' + place.AddressDetails.Country.AdministrativeArea.Locality.PostalCode.PostalCodeNumber);
    map.setCenter(point, 13);
    }
    }
    
    // showLocation() é chamado quando você clica no botão de buscar
    // no formulario.
    function showLocation() {
    var address = document.getElementById('address').value;
    geocoder.getLocations(address, addAddressToMap);
    }
    </script>
    </head>
    
    <body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showLocation(); return false">
    <p>
    <input type="text" size="60" name="address" id="address" value="Rua Vergueiro, 1000" />
    <input type="submit" value="Go!" />
    </p>
    <div id="mapa" style="width: 500px; height: 300px"></div>
    </form>
    </body>
    </html>
    

    Foi testado e está funcionando, você só precisa trocar a key de uso da API do Google Maps acessando este link: http://code.google.com/intl/pt-BR/apis/maps/signup.html

    Para mais detalhes deste recurso da API do Google Maps, veja este link:

    http://code.google.com/intl/pt-BR/apis/maps/documentation/services.html#Geocoding_Structured

    Abraços!