Utilização do objeto XMLHttpRequest

Última modificação: 4 de maio de 2011 às 12:02 por pintuda.

I - Introdução

1.1 - Agumas palavras

Cada vez mais, os sites dinâmicos da Web (usando um banco de dados, por exemplo) exigem uma atualização das suas páginas, ou de parte delas, de modo claro, sem que o usuário precise atualizar sua página, ele mesmo.

Isto é o que normalmente chamamos de método Ajax. Esta metodologia é encontrada em várias técnicas, incluindo o uso do objeto XMLHttpRequest do JavaScript.

Assim, através desta dica, nós vamos ver, o que é o objeto XHR, e como implementá-lo em nossos códigos, de maneira bem simples.

1.2 - Técnicas necessárias

Para você entender bem as explicações desta dica, é preferível que você domine os seguintes temas:

formuário HTML
Algumas noções de linguagem Javascript
Algumas noções de linguagem PHP

II - Apresentação

2.1 - Princípio

A utilização do XHR é relativamente simples. Basta realizar um objeto desse tipo, abrir um URL (ou um arquivo local no seu servidor, se você preferir) e enviar um pedido (como GET ou POST), com ou sem parâmetros.
Apesar do fato de que o objeto XHR possa ser utilizado com vários tipos de protocolo, nós só nos interessaremos ao seu uso, através do protocolo HTTP.
O código de status HTTP do pedido (resposta) e os dados (documento) ligados a ele estarão disponíveis através desta instância do objeto.

2.2 - Utilização assíncrona

O objeto XHR dispõe de um método de chamada e de retorno, que permite que o navegador continue a funcionar normalmente até que o pedido enviado seja realizado e tratado.

Portanto, XHR pode ser usado para várias coisas:

Atualizar dados em um banco de dados
Recuperar dados de um banco de dados
Atualizar a página atual no navegador, com dados de um banco ou de uma sessão.

2.3 - Vantagens

Diminuição da largura de banda: comparada à atualização ou à execução de uma página, aqui, só os dados são enviados, e não o documento inteiro.
Melhor interatividade do site: na realidade, as verificações, atualizações ou renovação de páginas, realizadas por esta tecnologia, serão feitas de maneira clara e sem a participação (mais ou menos) do usuário.

2.4 - Desvantagens

Não funcionará sem o javascript. Agora os usuários podem bloquear os controles javascript dos seus navegadores.
Número de utilização simultânea limitado: o número de utilizações simultâneas dos pedidos XHR é configurado em 2, por padrão. Isto pode causar problemas se um usuário abrir duas ou mais guias em sites que utilizam esta tecnologia, provocando um bloqueio do navegador. As janelas / guias abertas desta forma não serão mais redesenhadas, os controles efetuados através do XHR também serão bloqueados.

III - Arquitetura

Para entender melhor o que acontece quando usamos um objeto XHR, veja este esquema comparativo entre o método XHR e o método de base para a submissão de um formulário HTML.

A parte superior do esquema descreve o uso do XHR, a parte inferior, a submissão normal de um formulário.

Globalmente, vemos que o caminho de execução é o mesmo, com as seguintes diferenças:

XHR é feito de maneira assíncrona
XHR retorna o dado XML que pode ser interpretado ou exibido no navegador, enquanto que a submissão normal devolve uma nova página web a ser exibida no navegador.

IV - Aplicação prática

O próximo passo visa simplificar a utilização do objeto XHR em suas páginas web. Veja o ítem 2.2, acima.

4.1 - Implementação da função genérica 'callScript'

4.1.1 - Código 1

function callScript ( scriptName, args ){   
    
 var xhr_object = null;    
         
 // ### Construção do objeto XMLHttpRequest segundo o tipo de navegador   
 if(window.XMLHttpRequest)    
     xhr_object = new XMLHttpRequest();    
 else if(window.ActiveXObject)   
     xhr_object = new ActiveXObject("Microsoft.XMLHTTP");   
 else {    
                // XMLHttpRequest não é suportado pelo navegador    
     alert("Seu navegador não suporta os objetos XMLHTTPRequest...");    
       return;    
 }    
     
 xhr_object.open("POST", scriptName, true);   
    
 // Definição do comportamento a ser adotado na mudança de status do objeto XMLHttpRequest   
 xhr_object.onreadystatechange = function() {    
     if(xhr_object.readyState == 4) {   
   //alert(xhr_object.responseText); // DEBUG MODE   
   //document.write(xhr_object.responseText);   
   eval(xhr_object.responseText);   
   }   
  return xhr_object.readyState;   
 }    
 xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    
 //  Envio do pedido   
 xhr_object.send(args);   

}

4.1.2 - Explicações código 1

A função 'Callscript' tem por objetivo principal ser genérico.

Configurações

scriptName : caminho de acesso ao script do processamento que você quer chamar
args : lista de parâmetros passados para o script no formato STRING. A sintaxe desta lista terá sempre a seguinte forma:

param_name1=param_val1&param_name2=param_val2&...

Instanciação do objeto XHR

para os navegadores do tipo Netscape & co:

if(window.XMLHttpRequest)    
      xhr_object = new XMLHttpRequest();

para os navegadores do tipo Internet Explorer:

else if(window.ActiveXObject)   
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

Abertura do URL / do script

xhr_object.open("POST", scriptName, true);

Definição de como se comportar em caso de mudança de status do pedido

xhr_object.onreadystatechange = function() {    
 if(xhr_object.readyState == 4) {   
         //alert(xhr_object.responseText); // DEBUG MODE   
  //document.write(xhr_object.responseText);   
  eval(xhr_object.responseText);   
 }   
 return xhr_object.readyState;   
}

A função 'onreadystatechange' será a função chamada para cada mudança de status do pedido enviado. Por isso, é importante redefinir um novo comportamento. Para isso, nós lhe damos novas instruções.

'xhr_object.readyState' pode recuperar o status do pedido. Neste caso, o valor 4 representa o status "Concluído". Assim, quando o pedido for concluído, dizemos a ele para interpretar a resposta como se o código fosse javascript, através da instrução 'eval' no elemento 'xhr_object_responseText'.

Você pode usar a resposta XML como quiser. No caso desta dica, o objetivo principal é modificar o conteúdo de uma página web no retorno da resposta, a resposta é interpretada em pseudo código Javascript.

Definição do cabeçalho do pedido

Uma etapa obrigatória

xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Envio do pedido

xhr_object.send(args);

4.2 - Exemplo concreto

Para completar o aprendizado do uso do objeto XHR, vamos estabelecer um formulário simples, com dois campos 'nome 'e' sobrenome', assim como um botão para ativar um pedido XHR que chamará um script PHP. Então, o objetivo será de retornar do código JavaScript para exibir na tela, os valores que você entrou nos dois campos.

A prática deste exemplo, passará pela gravação de 3 arquivos:

1 arquivo Javascript, chamado 'função.js'
1 arquivo PHP com formulário, chamado 'index.php'
1 arquivo de processamento PHP, chamado 'processamento.php'

4.2.1 - Formulário HTML

Em primeiro lugar, criar um arquivo 'index.php' no qual você criará este código:

<?php   
include "funções.js";   
?>   

<BR>   
Nome : <input type='text' id='nome' value=''/>   
<BR>   
Sobrenome : <input type='text' id='sobrenome' value=''/>   
<BR>   
<input type='button' value='Executar' onclick='executeSample()'/>   
<BR>

Este código é relativamente simples, sem necessidade de explicações.
Veremos a chamada da função javascript 'executeSample' cujo código se encontra [item #4-2-2 as funções javascript) logo abaixo

4.2.2 - As funções javascript

No mesmo lugar que o arquivo criado anteriormente, você deverá adicionar outro, que irá listar as funções de JavaScript utilizadas pelo formulário HTML. O arquivo se chamará 'funções.js'. Veja o código:

<script linguagem="javascript">   

function callScript ( scriptName, args ){   
    
 var xhr_object = null;    
         
 // ### Construção do objeto XMLHttpRequest segundo o tipo do navegador    
 // Caso dos navegadores do tipo Netscape (Firefore, Conqueror, etc.)   
 if(window.XMLHttpRequest)    
     xhr_object = new XMLHttpRequest();    
 // Caso do navegador Internet Explorer   
 else if(window.ActiveXObject)   
     xhr_object = new ActiveXObject("Microsoft.XMLHTTP");   
 // Caso dos navegadores sem esta tecnologia (antigos navegadores)   
 else {    
   // XMLHttpRequest não suportado pelo navegador    
    alert("Seu navegador não suporta os objetos XMLHTTPRequest...");    
     return;    
 }    
     
 xhr_object.open("POST", scriptName, true);   
    
 // Definição do comportamento a ser adotado na mudança de status do objeto  
 // XMLHttpRequest   
 xhr_object.onreadystatechange = function() {    
   // Status : pedido concluído, resposta recuperada   
    if(xhr_object.readyState == 4) {   
    //alert(xhr_object.responseText); // DEBUG MODE   
    // ### Interpretação do retorno do script chamado   
    // Modo de interpretação 1: exibimos o retorno  na página   
    // como se tratasse do código HTML    
    //document.write(xhr_object.responseText);   
    // Modo de interpretação 2: interpretamos o retorno como    
    // se tratasse do código javascript   
    eval(xhr_object.responseText);   
    }   
   return xhr_object.readyState;   
 }    
 xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    
 //  Envio do pedido   
 xhr_object.send(args);   

}   

function executeSample (){   
 // --- Recuperação dos parâmetros necessários ao script PHP   
 var _nome = document.getElementById("nome").value;   
 var _sobrenome = document.getElementById("sobrenome").value;   
    
 var _data = "nome="+_nome+"&sobrenome="+_sobrenome;   
 // --- Chamada para o script PHP de processamento   
 callScript("processamento.php",_data);   
}   

</script>

O código da função 'callScript' é o mesmo que o anterior.

A função 'executeSample' é encarregado de recuperar o valor de dois campos do formulário para passá-los para a função 'callScript" como o parâmetro do script 'traitement.php'.

4.2.3 - O script PHP de processamento

Finalmente, sempre no mesmo lugar que os arquivos anteriores, você deverá criar o arquivo 'processamento.php' com o seguinte código:

<?php   
// --- Recuperação dos parâmetros POST   
if ( isset($_POST["nome"]) && !empty($_POST["nome"]) )   
 $nom = $_POST["nome"];   
else   
 $nom = null;   
    
if ( isset($_POST["sobrenome"]) && !empty($_POST["sobrenome "]) )   
 $sobrenome = $_POST["sobrenome "];   
else   
 $ sobrenome = null;   

// --- Execução do processamento   
if ( $nom != null && $sobrenome != null ){   
 // --- O processamento consiste em retornar um código javascript que será interpretado no retorno  da   
 // --- chamada deste script PHP.   
 // --- O código javascript aqui, exibe simplesmente os parâmetros enviados em um pop-up   
 echo "alert('Nome=".$nom." ,Sobrenome=".$sobrenome."');";   
}   

?>

Nada de prodigioso neste código. O mais importante é a recuperação dos parâmetros passados para o script, e no envio para a saída padrão do script do resultado que será interpretado no objeto XHR (quando o pedido estará no status 'Concluído')

Neste exemplo, nós exibiremos os valores do 'nome' e 'sobrenome' entrados pelo usuário.

O dado XML retornado pelo script, e recepcionado no objet XHR, será:

alert('Nome=fulano ,Sobrenome=cicrano);

Este dado XML será interpretado como do Javascript (já que é um código javascript, aliás, este é que é o interesse)

Nesse script de processamento, você também pode:

Atualizar os dados em um banco de dados
Recuperar os dados a partir de um banco de dados. E depois, atualizar a página web.

Exemplo, se você adicionar 'index.php' no código do arquivo, uma área assim:

<div id='resultado'></div>

A instrução do script de processamento poderá ser:

if ( $nome != null && $sobrenome != null ){   
        echo "var oDiv = document.getElementById('resultado');";   
 echo "oDiv.innerHTML = 'Nome: ".$nome."  - Sobrenome: ".$sobrenome."'";   
}

Então, o resultado será a atualização do conteúdo da DIV ' resultado ' na página web inicial, isso será feito, automaticamente, assim que você clicar no botão no formulário.

Veja também

Este documento, intitulado 'Utilização do objeto XMLHttpRequest', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.

Ajax - Javascript - Upload múltipla