(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.

PHP + JSON

A partir do PHP 5.2.0 temos uma extensão para JSON que facilita o transporte de dados do PHP para o JavaScript (via AJAX) e vice-versa…

A partir do PHP 5.2.0 temos uma extensão para JSON que facilita o transporte de dados do PHP para o JavaScript (via AJAX) e vice-versa.

Com o advento do Ajax, JSON se tornou um formato para intercâmbio de dados bem mais eficiente e compacto que XML. E nada como tratá-lo como um objeto também no lado do servidor, assim como fazemos no JavaScript. As duas funções que tratam da conversão objeto-string e string-objeto no PHP são json_encode e json_decode, respectivamente.

Vou lhes mostrar um exemplo de como trabalhar com PHP + JSON. Primeiramente vamos formatar corretamente o código PHP que será chamado via AJAX no Javascript.

$produto = array(
 'id' => 32,
 'nome' => 'Camera Digital Sony W220',
 'fabricante' => 'Sony',
 'valor' => 'R$ 799,00'
);

$produtoJSON = "var produto = " . json_encode($produto);

echo $produtoJSON;
// var produto = {"id": 32, "nome": "Camera Digital Sony W220", "fabricante": "Sony", "valor": "R$ 799,00"}

Agora no javascript vamos dar um alerta com os dados separados:


<script type="text/javascript">

/*
 ... requisição ajax ...
*/

eval(ajax.responseText); // transformo a string do resultado em formato de código válido do javascript

alert(" id = " + produto['id'] + "\n nome = " + unescape(produto['nome']) + "\n fabricante = " + unescape(produto['fabricante']) + "\n valor = " + unescape(produto['valor']));
</script>

(aula 2) AJAX para Iniciantes – Hello Word no AJAX

Bom, hoje estarei ensinando-lhes o básico do básico. É claro que você já leu a aula 1 e já tem seu scriptzinho (ajax.js) que faz a instância do XMLHttpRequest para podermos trabalhar com AJAX. E lembre-se também, que este pequeno arquivo te acompanhará para todas as suas aplicações com AJAX. Portanto, guarde-o e deixe-o sempre disponível para uso.

Boa Aula!

Depois de um longo café, cá estou!

Hehe, me perdoem pelas faltas, estive correndo com alguns projetos e finalmente estou pronto para voltar às aulas de ajax.

Bom, hoje estarei ensinando-lhes o básico do básico. É claro que você já leu a aula 1 e já tem seu scriptzinho (ajax.js) que faz a instância do XMLHttpRequest para podermos trabalhar com AJAX. E lembre-se também, que este pequeno arquivo te acompanhará para todas as suas aplicações com AJAX. Portanto, guarde-o e deixe-o sempre disponível para uso.

Vamos lá, crie um novo arquivo HTML, proponho que ponha o nome de “olamundo.html” mas fique livre para chama-lo como bem quiser.

Este arquivo será chamado pelo AJAX para exibir seu conteúdo.

Básicamente, ele terá uma estrutura dessa:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Olá Mundo</title>
</head>

<body>
Olá Mundo!
</body>
</html>

Bom, todos já devem saber que teremos que exibir o tal “Olá Mundo!” na tela.

Agora crie mais um arquivo HTML chamado ajax-exc1.html e faça o seguinte código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aula 2 - Hello Word no AJAX</title>
<script type="text/javascript" src="ajax.js" language="javascript"></script>
<script type="text/javascript">
window.onload = function iniciaFuncoes() {
olaMundo();
}
function olaMundo() {
// instanciando o objeto XMLHttpRequest
var ajax = new Ajax();
var mensagem = document.getElementById('mensagem');

ajax.open('GET', 'olamundo.html', true);
ajax.onreadystatechange = function leituraRequisicao() {
if (ajax.readyState < 4) {
mensagem.innerHTML = "Carregando...";
} else {
if (ajax.status == 200) {
mensagem.innerHTML = ajax.responseText;
}
}
}
ajax.send(null);
return false;
}
</script>
</head>

<body>
<div id="mensagem"></div>
</body>
</html>

linha 8 à 10 – window.onload executa um evento quando a página estiver carregada. Essa função que é carregada vai iniciar outras funções, é sempre bom fazer este esquema para organizar melhor o código, e também você não pode usar mais de 1 window.onload na página.

linha 11 – abre uma nova função chamada olaMundo().

linha 13 – Instancia o objeto XMLHttpRequest daquele script ajax.js.

linha 14 – Cria um objeto da id ‘mensagem’ que é uma DIV, onde irá aparecer a mensagem.

linha 16 – O comando ajax.open abre alguma página do servidor, e somente aquela que está hospedada no mesmo servidor, por motivos de segurança. O paramêtro true diz que esta requisição será assíncrona, ou seja, “por baixo dos panos”.

linha 17 – o comando ajax.onreadystatechange faz com que a cada mudança de estado desta requisição, a função leituraRequisicao() é relida.

linha 18 e 19 – Se o estado da requisição é menor que 4, ou seja, ainda não está completa, mostra um “Carregando…” dentro do objeto ‘mensagem’.

linha 20 à 22 – Se for igual a 4 e o status do servidor for 200, ou seja, está tudo OK, mostra o resultado no objeto ‘mensagem’.

linha 26 – o comando ajax.send diz o que será enviado. Quando a requisição é feita por GET, nada é enviado, apenas por POST.

linha 27 – O return false quebra toda a ação padrão de um evento, por exemplo, se a função olaMundo() fosse iniciada ao pressionar um botão de ‘submit‘, ele não iria responder ao action do formulário, apenas iria fazer o que você digitou antes do return false. Mas isso veremos na próxima aula, por enquanto vamos usar o evento onload.

Acabou por aqui, este script poderia estar em um js externo, mas para agilizarmos, preferi deixa-lo dentro da página. Veremos mais exemplos como esse nas próximas aulas e estarei dando dicas de como programar corretamente, fique tranquilo.

Espero que tenham entendido, qualquer dúvida é só comentar.

Abraços!

(aula 1) AJAX para Iniciantes – Instanciando XMLHttpRequest

Aula 1 – AJAX para iniciantes

Vou começar a partir de hoje, uma mini-aula para os interessados no AJAX, que vem revolucionando a maneira de se navegar na web.

 Tópicos Recomendados: O que é Ajax?, Dicas para iniciantes em AJAX!

Vou começar a partir de hoje, uma mini-aula para os interessados neste assunto que vem revolucionando a maneira de se navegar na web.

Sempre, mas sempre mesmo que formos criar um AJAX qualquer, precisaremos estanciar o XMLHttpRequest.

Então para começar a mini-aula, vamos criar esse arquivo, que usaremos em todos os tutoriais sobre AJAX, e você também pode estar guardando para usar nas suas aplicações.

1. Crie um arquivo JavaScript com um nome qualquer, para você guardar na sua biblioteca. Porquê sempre que você for usar AJAX, você só precisa importar esse js na página. Eu vou chamá-lo de ajax.js

2. Neste arquivo que você acabou de criar, escreva o seguinte código:

Atualizado em 05 de Abril de 2010:
Esta função Ajax() foi atualizada em 5 de abril de 2010 para corrigir bugs de compatibilidade no navegador IE7. Agradecimentos ao Aceleron.

function Ajax() {
	var ajax;
	
	if (window.ActiveXObject) {
		try {
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				ajax = false;
			}
		}
	} else if (window.XMLHttpRequest) {
		ajax = new XMLHttpRequest
	} else {
		ajax = false;
	}
	
	return ajax;
}

É simples, a variavel ajax está instanciando um objeto na qual os browsers identificam o XMLHttpRequest (Requisição pelo protocolo Http usando Extensible Markup Language).

Agora vamos tomar um café!

Até a próxima.

Dicas para iniciantes em AJAX!

Primeiro, para quem está iniciando agora, é muito importante saber o que é o AJAX, qual sua função, sua importancia e principalmente onde e quando deve ser usado.

Vejo muitos programadores, mesmo que já sejam experientes, querendo fazer um site inteiro com AJAX, com trocas de conteúdo, janelas do tipo modal, galeria, formulários etc.

Tópicos Recomendados: O que é Ajax?

Boa noite a todos!

Primeiro, para quem está iniciando agora, é muito importante saber o que é o AJAX, qual sua função, sua importancia e principalmente onde e quando deve ser usado.

Vejo muitos programadores, mesmo que já sejam experientes, querendo fazer um site inteiro com AJAX, com trocas de conteúdo, janelas do tipo modal, galeria, formulários etc.

Mas será que isso vale mesmo a pena?

Na minha opnião, AINDA NÃO!

Não vi nenhum sistema feito inteiro com AJAX funcionar corretamente, como um sistema não-assíncrono funciona. E também, um sistema desses, precisa ser feito com muito cuidado, com bastante visual, exibindo mensagens de resposta a cada evento, trazendo confiança para quem está utilizando.

Portanto, USE AJAX COM MODERAÇÃO!

Mas aonde podemos usar AJAX?

Vejam aonde deve ser usado AJAX com frequencia e a vontade:

  • Para validações em formulário pelo lado servidor

Vocês nunca pensaram: “que chato esse alerta que faz um baita de um barulho que só reclama dizendo que não completei um campo de formulário” ?

E há uma grande vantagem utilizando validações pelo server-side e não com javascript, pois se a pessoa desabilitar o javascript, o formulário dela não será validado.

  • Cadastro, contato, newsletter

Nada mais confortável aquele ajax de leve na hora de umainserção no newsletter, ou então na hora deenviar um contato ou até mesmo de se cadastrar. Porém, utilize mensagens de retorno, como”Cadastro efetuado com sucesso.”.

  • Enquetes e Rates

Muitas pessoas nãovotam naquelas enquetes que muitos sites utilizam para pesquisas, pois é um processo cansativo, você vota e a página recarrega, pior então é quando você precisaclicar em “ver resultados” para saber o resultado atual daquela enteque depois que você já deu o seu voto. Portanto, caprichem no AJAX e faça com que suaenquete tenha um bom número de votos =).

  • Galeria de fotos

Normalmente galerias de fotos são um pouco pesadas, dependendo de quantas fotos são exibidas. Utilizando-seAJAX, pode-se ter uma galeriamais amigavel, com preloading nas miniaturas e na foto ampliada. Fora os variados efeitos que você pode criar com o JavaScript na hora de exibir a foto ampliada.

Bom, dei esses exemplos de situações para se utilizar o AJAX de maneira amigável. Agora é com você!

Até mais!