Introdução ao AJAX Métodos Open e Send Irei demonstrar alguns métodos básicos para se trabalhar com o objeto XMLHttpRequest, que já demonstrei no post Introdução ao AJAX Objeto XMLHttpRequest. Tentarei ser bem objetivo e claro para quem não trabalha com programação ou está iniciando. O que é um método? Método é um conjunto de comandos, uma subrotina, procedimentos, ou algo tipo uma função que executa os comandos com o intuito de alterar e/ou obter uma resposta após a execução dele, manipulando algum atributo. Pode receber parâmetros por valor para serem passados aos seus comandos internos. Em resumo, são as ações que podem ser realizadas. Agora que temos um breve entendimento do conceito de método, vamos ver quais são os métodos básicos para se trabalhar com o AJAX. Após criarmos o objeto, precisamos criar uma comunicação com o servidor para que haja a troca de dados. Iremos ver agora os métodos OPEN e SEND. Método OPEN Este método tem como objetivo abrir um documento. A linha de comando é a seguinte: Onde: open("método ", "URL "[, sinaldesincronização[, "nomeusuário"[, "senha"]]]) Método Obrigatório Determina se é pelo GET ou POST
URL Obrigatório É o caminho para o documento que desejamos acessar, podendo ser utilizado o caminho completo (Ex.: <img src= http://www.google.com.br/intl/pt-br_br/images/logo. gif />) ou absoluto (Ex.: <img src= /intl/pt- BR_br/images/logo.gif />) Sinal de Sincronização Informa o tipo de comunicação a ser feita, se é Assíncrona (padrão a página não ficará congelada enquanto o objeto recebe uma resposta) ou Síncrona Nome de Usuário Estas duas últimas servem para permitir acesso a um documento restrito. Senha Um exemplo do uso do método OPEN: xmlhttp = new XMLHttpRequest(); xmlhttp.open("get", "/conteudo.html"); Neste exemplos criamos o objeto XMLHttpRequest (sem considerar as diferenças entre os navegadores) e criamos uma comunicação com a página conteudo.html. Até então, não estamos obtendo nada. Para isso precisamos do método SEND para completar o código. Método SEND Este método é responsável por ativar a conexão com o outros documento e fazer as devidas requisições para se obter uma resposta. Entenda ele como um intermediador, um interprete de comunicação entre o documento atual e o que está sendo acessado. Este método possui apenas um parâmetro, que são obrigatórios nos navegadores, com excessão do IE. O comando: xmlhttp.send(null);
Agora que a conexão está completa, precisamos capturar a resposta do documento acessado, através de duas propriedades do Objeto XMLHttpRequest: responsetext e o responsexml responsetext : Obtêm a resposta em formato de string, ou seja, um texto. responsexml : Retorna um objeto DOM, ou seja, um Node (Nó), que pode ser manipulado com as funções próprias para isto. É importante notar que o objeto XMLHttpRequest podemos acessar tanto documentos HTML como XML, só que caso acessemos um documento HTML, não poderemos utilizar a propriedade responsexml, o que muitas vezes é essencial para os nossos propósitos. Exemplo: resposta = xmlhttp.responsexml; ou resposta = xmlhttp.responsetext; Agora que já estamos conseguindo realizar o envio de dados pelo send(), precisamos obter estas respostas, mas para isso precisamos saber a hora exata de obter a resposta, ou então não teremos essa tal resposta. Para isso iremos precisar da propriedade onreadystatechange. Propriedade: onreadystatechange É associada a um código Javascript para ser executado toda vez que houver mudança de estado no Objeto XMLHttpRequest, ou seja, podemos definir o que o nosso código irá fazer quando ele obter a resposta do documento acessado. Veja o exemplo de utilização: xmlhttp.onreadystatechange = verificadordeestado; Esta propriedade possui 5 estados:
0 Não iniciado (unitialised) Quando o objeto ainda não foi iniciado, ou seja, nenhuma comunicação foi criada ainda; 1 Carregando (loading) O documento foi encontrado e está sendo carregado; 2 Carregado (loaded) O documento terminou de ser carregado; 3 Interativo (interactive) O objeto XMLHttpRequest está interagindo, processando os dados; 4 Completo (completed) A comunicação finalizou. Estes estados podem ser acessados através da propriedade readystate. Propriedade: readystate O estado que nos interessa mais é o 4, quando a comunicação é finalizada e já temos uma resposta, seja ela com o que nós realmente queríamos ou não, pois o documento pode ter sido carregado e tenha acontecido um erro durante o processo, sendo assim a resposta será um erro, e não o que queríamos, não é verdade? Para evitar isso, precisamos ter mais um controle sobre o carregamento do documento, sabendo do servidor qual foi a resposta ao tentar carregá-lo. Esta resposta fica armazenada na propriedade status, e os 2 tipos de respostas que interessam mais é o 404 (erro ao tentar carregar a página, arquivo não encontrado) e o 200 (OK, arquivo foi encontrado). O comando para se obter o status é: estado = xmlhttp.readystate; Agora podemos criar nossa função para verificar se o estado está no 4 e arquivo foi encontrado ao tentar acessá-lo: function verificadordeestado(){ if(xmlhttp.readystate==4){ // Completo
if(xmlhttp.status==200){ // Resposta do Servidor: OK document.getelementbyid("conteudo").innerhtml = xmlhttp.responsetext; else{ alert("problema: " + xmlhttp.statustext); Esta função testará todas as possibilidades comentadas anteriormente, caso ele consiga, irá carregar o resultado em forma de texto dentro da div conteudo da página atual. Caso a comunicação falhe, ele irá exibir um alerta com o estado da falha, acessado pelo statustext. Agora vamos a um exemplo de uso do que foi aprendido aqui: INDEX.HTML Aqui ficará todo o código que irá processar o nosso AJAX e irá fazer com que exiba o conteúdo da página conteudo.html <!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>untitled Document</title> <script language="javascript" type="text/javascript"> var navegador = navigator.useragent.tolowercase(); //Cria e atribui à variável global 'navegador' (em caracteres minúsculos) o nome e a versão do navegador //Função que inicia o objeto XMLHttpRequest function objetoxml(){ if (navegador.indexof('msie')!= -1) { //Internet Explorer var controle = (navegador.indexof('msie 5')!= -1)? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário que adiciona o objeto padrão do seu navegador (caso for o IE) à variável 'controle'
try{ return xmlhttp = new ActiveXObject(controle); //Inicia o objeto no IE catch(e){ else{ //Firefox, Safari, Outros.. return xmlhttp = new XMLHttpRequest(); //Inicia o objeto no Firefox, Safari, Mozilla var xmlhttp = objetoxml(); // Abre a página function abrirpag(url){ xmlhttp.onreadystatechange = verificadordeestado; xmlhttp.open("get",url,true); xmlhttp.send(null); if (xmlhttp.readystate == 1) { document.getelementbyid("conteudo").innerhtml = "<img src='loader.gif'>"; return url; // Verifica o estado do objeto function verificadordeestado(div_id){ if(xmlhttp.readystate == 4){ // Completo if(xmlhttp.status == 200){ // Resposta do Servidor: OK var local = div_id; document.getelementbyid("conteudo").innerhtml = xmlhttp.responsetext ; else{ alert("problema: " + xmlhttp.statustext); </script> </head> <body>
<a href="#" onclick="abrirpag('./conteudo.html');">carregar Documento</a> <div id="conteudo" style="background-color:#ccc; width:500px; min-height:100px">conteudo</div> <div id="conteudo2" style="background-color:#999; width:500px; height:100px">conteudo 2</div> </body> </html> CONTEUDO.HTML Aqui poderá ser qualquer coisa (ex.: texto, imagens, etc). <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>meu Conteúdo Carregado</title> </head> <body> <h1>meu Conteúdo</h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <img src="http://www.google.com.br/intl/pt-br_br/images/logo.gif" /><br> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html>
Espero que tenham gostado deste post.