Introdução ao Ajax

Este artigo é uma introdução a técnica Ajax e ao objeto XMLHttpdRequest

Ajax é o acrônimo (sem letras maiúsculas) de Asynchronous JavaScript and XML

O termo foi inventado por Jesse James Garrett e apareceu pela primeira vez em seu ensaio de fevereiro de 2005: "Ajax: A New Approach to Web Application". O termo foi inventado pelo Jesse, mas o objeto XMLHttpRequest (o que faz a coisa toda acontecer) foi introduzido no mercado pela Microsoft em meados do 1999.

"Ajax" foi um jargão popular por muitos anos; agora é apenas um termo útil para uma arquitetura de aplicativo Web baseada em scripts de requisições HTTP. (Flanagam em seu livro "JavaScript O guia Definitivo", capítulo 18 Scripts HTTP)

Ajax é um conjunto de tecnologia: JavaScript, XML e uma linguagem do lado do servidor que não está contida no nome mas é igualmente importante.

No começo, os dados circulavam principalmente no formato XML, mas com a criação e popularidade do formato JSON este último passou a ser o formato dominante. É por essa razão que Ajax é considerado apenas um "termo útil".

A idéia essencial do Ajax é fazer uma requisição ao servidor sem ter que renderizar toda a página HTML, o que era custoso para a época devido a conexão com a Internet ser bem lenta. Porém, o mais legal é que você faz isso integrado a linguagem JavaScript. Essa combinação explosiva deu origem a uma nova era de aplicações web.

Seu primeiro programa Ajax

Crie um arquivo denominado foo.txt e insira nela uma única linha com o seguinte conteúdo: Texto plano!.

Para executar o código abaixo você poderá utilizar as ferramentas do navegador. Eu estou no Firefox e estou utilizando o FireBug, se você estiver usando o Chrome, aperte a tecla F12 para abrir o plugin equivalente.

1  
2 var xhr = new XMLHttpRequest();
3 xhr.open("GET", "foo.txt", true);
4 xhr.send();
5 xhr.responseType = "text";
6 xhr.onload = function(){
7   console.log(this.response);
8 }

Na linha 1 criamos um objeto XMLHttpRequest.

Na linha 2 inicializamos a requisição com o método open()

O método open() recebe três argumentos, sendo os dois primeiros obrigatórios.

O primeiro argumento é tipo (verbo) de pedido HTTP que você deve enviar (GET, POST, DELETE, etc...).

O segundo é o local a partir do qual você deseja solicitar dados. A URL pode ser relativo ou absoluto, mas devido às preocupações com segurança entre domínios, o destino deve residir no mesmo domínio.

O terceiro argumento do método open() é um valor booleano que especifica se o pedido é feito de forma assíncrona (true) ou síncrona (false). Um pedido síncrono (sincronizado) congelará o navegador até que tenha terminado. Um pedido assíncrono (dessincronizado) ocorre em segundo plano no aplicativo, permitindo que outros scripts sejam executados.

Na linha 03 evocamos o método send() para enviar a requisição.

Na linha 04 definimos que a resposta do servidor será um texto plano. Não precisamos fazer isso pois esse é o valor padrão, mas eu quis deixar as coisas explícitas.

Na linha 05 definimos uma função para o evento onload do objeto XMLHttpRequest. Este evento será executado caso a requisição seja realizada com sucesso. Neste caso, o resultado será texto plano!\n e estará acessível através da propriedade responseText do objeto XMLHttpRequest.

Lendo arquivos XML

O mesmo exemplo poderá ser utilizado para ler um arquivo XML. Crie um arquivo denominado arquivo.xml e insira o seguinte conteúdo.

<?xml version="1.0" encoding="utf-8"?>
<receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">
  <titulo>Pão simples</titulo>
  <ingredientes>
    <ingrediente quantidade="3" unidade="xícaras">Farinha</ingrediente>
    <ingrediente quantidade="7" unidade="gramas">Fermento</ingrediente>
    <ingrediente quantidade="1.5" unidade="xícaras" estado="morna">Água</ingrediente>
    <ingrediente quantidade="1" unidade="colheres de chá">Sal</ingrediente>
  </ingredientes>
  <instrucoes>
    <passo>Misture todos os ingredientes, e dissolva bem.</passo>
    <passo>Cubra com um pano e deixe por uma hora em um local morno.</passo>
    <passo>Misture novamente, coloque numa bandeja e asse num forno.</passo>
  </instrucoes>
</receita>

O código abaixo fará uma requisição Ajax para ler o conteúdo de um arquivo XML. Repare que o valor da propriedade responseType é document e não xml.

1  
2 var xhr = new XMLHttpRequest();
3 xhr.open("GET", "arquivo.xml", true);
4 xhr.send();
5 xhr.responseType = "document";
6 xhr.onload = function(){
7   console.log(this.response);
8 }

POST

Para fazermos uma requisição do tipo POST além de utilizar o verbo post como parâmetro da função open() também devemos utilizar a função setRequestHeader() para setar o cabeçalho da resposta.

Passamos os dados (campos e valores) como parâmetro para a função send().

var xhr = new XMLHttpRequest();
xhr.open("POST", "script.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send("campo1=dado1&campo2=dado2&campo3=dado3");
xhr.responseType = "text";
xhr.onload = function(){
  console.log(this.response);
}

O arquivo script.php deve ser como abaixo.

<?php
var_dump($_POST);

GET

A requisição GET não precisa do método setRequestHeader() mas é sempre uma boa pratica utilizá-lo. Para passar os dados (campos e valores) devemos concatenar a string junto com o segundo parâmetro do método open().

var xhr = new XMLHttpRequest();
xhr.open("GET", "script.php?campo1=dado1&campo2=dado2&campo3=dado3", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
xhr.responseType = "text";
xhr.onload = function(){
  console.log(this.response);
}

O arquivo script.php deve ser como abaixo.

<?php
var_dump($_GET);

Fontes

Navegue nesta série!

Comentários

comments powered by Disqus