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 estancia o 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:
1
2
3
4
5
6
7
8
9
10
11
12
|
< !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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| < !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>
</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!
