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:

open("método ", "URL "[, sinaldesincronização[, "nomeUsuário"[, "senha"]]])

Onde:

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

Sou bacharel em Sistemas de Informação pela Estácio de Sá (Alagoas), especialista em Gestão Estratégica da Tecnologia da Informação pela Univ. Gama Filho (UGF) e pós-graduando em Gestão da Segurança da Informação pela Univ. do Sul de Santa Catarina (UNISUL). Certificações que possuo: EC-Council CEH, CompTIA (Security+, CySA+ e Pentest+), EXIN (EHF e ISO 27001), MCSO, MCRM, ITIL v3. Tenho interesse por todas as áreas da informática, mas em especial em Gestão e Governança de TI, Segurança da Informação e Ethical Hacking.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *