Antes de COMEÇAR a ler este post você se compromete aos seguintes termos:
- Eu tenho conhecimento pleno em HTML.
- Eu conheço JavaScript.
- Eu já usei um pouco algumas coisas de DOM.
- Sei o que é XML.
- Também sei que AJAX só funciona com requisições http, ou seja, não vou acessar assim: c://Documents and Settings/eu_mesmo/meu primeiro ajax.js e muito menos file:/// ...
- Sei que isso não é um código completo e não vou perguntar: "Como mudo 'isso' pra 'churisso' e coloco no meu site de video games ?? PLZzzorRR !!11!"
Eu avisei...
Esse post não é mais um dos vários exemplos de como utilizar o AJAX para fazer 2 selects, cadastrar alguma informação e etc.. porque vejo que normalmente são usuários que não tem tanto conhecimento sobre Javascript que utilizam os códigos dos tutoriais e querem fazer alterações, sem ao menos saber o porque daqueles 'comandos' dentro da função. Ou estou errado ?? Todo mundo que tem uma aplicação AJAX que seja no site sabe o porque do número 4 no "var.readyState == 4" ??? Garanto que quem fez o código do tutorial sabe, mas quem copiou o código e colou no dreamweaver salvando com o mesmos nomes não sabe. Pensando nisso eu vou dar um breve comentário sobre algumas coisas que fazem parte das funções mais conhecidas.
Primeiro de tudo você tem que inicar a requisição ao navegador. Para isso vamos inicar uma instância do objeto XMLHttpRequest. Mas como todo mundo tá careca de saber tem as diferenças de navegador. A família Safari, Mozilla usa de uma forma os os IElike usam de outra. Tá explicado o porque de:
var variavel;
if (window.XMLHttpRequest) {
variavel = new XMLHttpRequest();
} else if (window.ActiveXObject) {
variavel = new ActiveXObject("Microsoft.XMLHTTP");
}
No quote acima eu crio uma variavel com o nome de 'variavel', depois eu testo o objeto XMLHttpRequest(pra a família Mozilla, Safari), se ele retornar TRUE a variavel vai criar o objeto, senão vai pra proxima tentativa que é pra família IE. É comum ser usado junto com a inicialização do objeto o try..catch, que é uma função do Javascript (tá aí o porque era bom saber um pouco de Javascript). O try..catch serve para pegar o erro e não mostrar pro usuario aquela janelinha "There's an error, do you wish to debug ?". Apesar que o try..catch só é suportado a partir do IE5+ e Mozilla 1+ (Se você pensa que vai segurar o erro quando o cara estiver usando o IE4 pode esquecer, use onerror). O try..catch funciona assim, imagine que eu queria dar um alert e sem querer errei a digitação:
var msg;
function mostraAlerta(){
try{
aalert("Olá");
}
catch(erro)
{
msg = "Ocorreu um erro na página. \n";
msg+ = "Clica no OK pra continuar";
alert(msg);
}
}
Chega de try..catch, não é o objetivo do post. Bom, vamos ver agora os métodos do XMLHttpRequest. Estão nesse formato:
Nome = Descrição. Meu comentário.
abort() = Aborta a atual requisição. Precisa de comentários ? Então tá bom, você pode usar caso fique com medo do seu servidor demorar para devolver a requisição. Crie na função que manda a requisição um TimeStamp, caso ela demore muito você aborta e dá uma mensagem de erro.
open("método", "URL"[, assíncrono [, "usuario"[, "senha"]]]) = Define a URL, o método e os parâmetros adicionais da requisição a ser enviada. Provavelmente esse é o método que você mais verá, junto com o send(). ELe é responsável por definir os parâmetros da requisição. Os métodos podem ser POST ou GET, e o 'assíncrono' que tem na sintaxe do método é o que define se a execução do script é feita imediatamente após o método send() ser chamado ou se aguarda por uma resposta. Use as flags TRUE ou FALSE. O problema de usar o FALSE é que se o seu servidor ficar sem responder a tela do navegador vai ficar congelada, mais ou menos quando trava tudo no PC. Os outros parâmetros são opcionais.
send(conteúdo) = Transmite a requisição, opcionalmente com dados postados ou dados DOM. É isso mesmo, esse método que vai enviar a requisição. Se você usar GET e passar os dados pela URL use send(null), se usar POST é só colocar o conteúdo a ser passado aí dentro. Mas usando o POST você tem que enviar alguns cabeçalhos junto. Veja mais no outro método.
setRequestHeader("label","valor") = Define um label/valor para o cabeçalho que será enviado junto com a requisição. Nem traduzi o label porque fica feio.
Olhe os 2 exempos abaixo e veja se entende melhor:
var.onreadystatechange = functionPraTrabalharARequisicao;
var.open("GET", url, true);
var.send(null);
var.open("POST", url, true);
var.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
var.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
var.setRequestHeader("Pragma", "no-cache");
var.onreadystatechange = functionPraTrabalharARequisicao;
var.send("Nome=" + Nome);
Eu defini nos cabeçalhos que os dados serão enviados como se fossem um formulário normal. E no outro eu defini que não é pra armazenar as informações em cache, porque as vezes acontece de devolver a mesma requisição, ou outros problemas.
Agora vamos ver as propriedades. Neste formato:
Nome = Descrição. Meu comentário.
readyState = Número inteiro com o status da requisição. Devolve como um número inteiro o status da sua requisição. Só isso.
0 = Não inicializado
1 = carregando
2 = carregado
3 = Interagindo
4 = Completo
onreadystatechange = Gerenciador de eventos a cada mudança de estado. Agora ferrou hein ??. Nada mais é que uma função que será responsável por checar se a requisição já foi processada. Por isso a comparação "readyState == 4", toda vez que mudar de estado uma função que você definir será responsável por essa verificação, então no seu código quando o estado for 4 você continua. A menos que você queria seguir no 1 ...
var.onreadystatechange = workSend;
var.open("GET", url, true);
var.send(null);
No exemplo acima eu defini que a função workSend() será a responsável por trabalhar com os valores retornados por readyState. É comum ver nessas funções somente a comparação "var.readyState == 4", mas nada impede de ser assim:
var.readyState == 0 -> Peraí que já vai começar
var.readyState == 1 -> Aee, seguuurraaa peãaaoo
var.readyState == 2 -> UUUhhhhhuuuuu, vamo que vamo
var.readyState == 3 -> Vamo lá cabloco, tá chegano
var.readyState == 4 -> Aqui você trabalha seu resultado
responseText = Versão 'string' dos dados devolvidos pelo servidor após processar a requisição. É somente isso que ela faz, nada mais. Simples e cru.
responseXML = Idêntica a de cima, mas devolve os dados no modelo DOM.
status = Código numérico retornado pela requisição ao servidor. É diferente do readyState, esse código é 200, 404, etc.. que no caso um 200 é que a página foi encontrada e está tudo OK, o 404 é que não achou .. etc..
statusText = Mensagem que acompanha o código do status. Você pode usar para exibir ao usuário a mensagem de erro retornada. Ex.:
if (var.status == 200) {
// ...se funfar você faz aqui suas paradas...
} else {
alert("Ouve um problema com sua requisição:\n" + var.statusText);
}
Bom, é isso ae, acho que agora fica mais fácil pra quem ainda tinha dúvidas sobre AJAX para já ir resolvendo alguns dos seus problemas sozinhos, dá pra esclarecer um pouco sobre os comandos e como utiliza-los. Não são todos os métodos e propriedades, tem muito mais por esse mundo afora.
T+
Edição feita por: bimonti, 29/07/2006, 16:04.