Ajax Basic o

Ajax Bsico: Introduo
Veja neste artigo uma introduo sobre o que Ajax, qual a sua utilizao e como ele se
relaciona com outras tecnologias. Alm disso, ser visto como a sua implementao e quais
as suas vantagens e desvantagens.
por Higor Medeiros
Introduo ao Ajax
O Ajax (Asynchronous JavaScript and XML) uma tecnologia muito utilizada atualmente e que
est em bastante evidncia porque ela torna seus aplicativos muito mais dinmicos e com maiores
capacidades de respostas. O Ajax basicamente utiliza JavaScript, XML e HTML dinmica. Nota-se
que Ajax no uma linguagem de programao, mas uma nova forma de usar os padres
existentes.
No Ajax o Javascript faz uma solicitao ao servidores, no servidor nada muda com a utilizao de
Ajax, ele continua respondendo cada solicitao exatamente como fazia antigamente quando no se
usava Ajax. Porm a resposta do servidor agora retornar apenas os dados que a pgina precisa sem
qualquer marcao ou apresentao. Uma caracterstica que ser notada pelo usurio que est
acessando a pgina que est utilizando Ajax que grande parte da pgina no ser alterada, mas sim
apenas partes que necessitaro de atualizao. Antigamente a pgina inteira era carrega, porm com
Ajax esse paradigma muda.
Caractersticas do Ajax
Uma caracterstica extremamente importante e til do Ajax que as solicitaes so assncronas.
Isso quer dizer que o Javascript de um aplicativo Ajax se comunica assincronamente com o
servidor, ou seja, apesar do cdigo Javascript fazer uma solicitao ao servidor, o usurio da pgina
pode continuar navegando na pgina clicando em botes ou at mesmo preenchendo um formulrio.
Esta mais uma mgica dos aplicativos Ajax. Portanto, como foi dito anteriormente o Ajax alm de
permitir que o usurio apenas tenha parte da pgina carregada (no necessitando assim recarregar
toda a pgina aps uma solicitao) ainda pode navegar tranquilamente pela sua pgina enquanto a
solicitao ao servidor feita.
Espera-se que tenha ficado claro ao leitor que o modelo de solicitao e resposta ainda utilizado
no Ajax, o que muda que agora no temos um formulrio inteiro sendo enviado ao servidor e o
aguardo da sua resposta. Tem-se um modelo muito mais dinmico com Ajax.
Para concluir este tpico ser exposto abaixo as trs principais caractersticas do Ajax que deve-se
obrigatoriamente saber:
Aplicativos assncronos, como o caso de um aplicativo Ajax, fazem solicitaes usando
um objeto Javascript e no um envio de formulrio.
O navegador Web ir manipular as suas solicitaes e respostas e no o seu cdigo
Javascript.
Uma vez que o navegador Web receber uma resposta a uma solicitao assncrona, ele
retornar a chamada para o seu cdigo Javascript com a resposta do servidor.
Implementando Ajax
Para comear a colocar Ajax nas aplicaes bastante simples. Inicialmente precisamos criar uma
funo Javascript que cria um novo objeto para fazer solicitaes ao servidor. Aqui devemos atentar
para o fato que diferentes browsers podem fazer de diferentes maneiras. Segue abaixo a criao da
funo que ser incorporada na pgina HTML de onde partir a solicitao:
Listagem 1: Exemplo do objeto de solicitao.
<head>
1
<script language="javascript" type="text/javascript">
2
var request = null;
3
4
function createRequest() {
5
try {
6
request = new XMLHttpRequest();
7
} catch (trymicrosoft) {
8
9
try {
10
request = new ActiveXObject("Msxml2.XMLHTTP");
11
} catch (othermicrosoft) {
12
try {
13
request = new ActiveXObject("Microsoft.XMLHTTP");
14
} catch (failed) {
15
request = null;
16
}
17
}
18
}
19
20
if (request == null)
21
alert("Error creating request object!");
22
}
23 </script>
24 </head>
Inicialmente declara-se a varivel request como nula, essa varivel ser responsvel por armazenar
o objeto de solicitao. Na atribuio ao objeto request no comando request = new
XMLHttpRequest() tem-se a tentativa da criao do objeto de solicitao. XMLHttpRequest o
tipo do objeto solicitao. Repara-se que nos comandos request = new
ActiveXObject("Msxml2.XMLHTTP") e request = new
ActiveXObject("Microsoft.XMLHTTP"); h a tentativa tambm de criar o objeto solicitao, mas
de uma maneira que funcione tambm no Internet Explorer. Se tudo der errado o comando request
= null dentro do bloco catch (failed) ser executado garantindo que a varivel da solicitao
continue nulo. Caso seja nulo uma mensagem ser disparada no browser do usurio atravs do
comando alert.
Nota-se que agora que j possumos um objeto de solicitao estamos prontos para partir para a
prxima etapa que a funo Javascript responsvel por solicitar ao servidor um dado em especial.
O cdigo abaixo exemplifica a prxima etapa:
Listagem 2: Solicitao ao Servidor.

1 <head>
<script language="javascript" type="text/javascript">
2
3
function getInformacaoQualquer() {
createRequest();
4
5
var url = "getInformacaoQualquerDoServidor-ajax.php";
6
request.open("GET", url, true);
7
request.onreadystatechange = atualizaPagina;
8
request.send(null);
9
}
10 </script>
11 </head>
A funo acima bastante simples, primeiramente ela chama a funo createRequest() para criar
um novo objeto de solicitao. Depois, abaixo no comando var url =
"getInformacaoQualquerDoServidor-ajax.php" tem-se a configurao da URL que ser necessrio
para se conectar e obter assim os dados necessrios. No comando request.open("GET", url, true);
tem-se a inicializao da conexo e a informao ao objeto de solicitao de como se conectar ao
servidor. Em request.onreadystatechange = atualizaPagina; tem-se a configurao dos valores na
pgina, a funo atualizaPagina ser vista abaixo. Por fim no comando request.send(null);
apenas estamos dizendo que nenhum dado est sendo enviado na solicitao. O script nesse caso
no precisar de nenhum dado, apenas retornar o resultado esperado.
importante salientar novamente que o script PHP acima getInformacaoQualquerDoServidorajax.php deve retornar unicamente o dado bruto e no mais um HTML como antigamente.
Agora basta chamar a funo criada a partir do seu HTML. Isso poderia ser feito, por exemplo,
utilizando um boto HTML, como por exemplo:
Listagem 3: Chamando a funo getInformacaoQualquer().
1 <form method="GET">
2 <input value="Mostre a informao" type="button"
3
onClick="getInformacaoQualquer();" />
4 </form>
Um simples manipulador de eventos onClick do boto button foi utilizado para chamar a
funo Javascript anteriormente criada para fazer a solicitao ao servidor.
Agora a ltima etapa seria atualizar a pgina Web com as informaes que vieram do servidor. Para
isso a funo atualizaPagina dever ser configurada para fazer este procedimento. Antes, salientase que nesse momento entra uma figura importante no cenrio do uso do Ajax, o navegador. O
navegador o grande responsvel por transformar o seu HTML em uma pgina com figuras, botes,
texto, etc. Alm disso, o navegador Web que manipula as solicitaes feitas a servidores Web e
resolve o que fazer com as respostas que ele receber desses servidores. Portanto, o navegador que
faz todo o trabalho sujo de converter o cdigo para algo que o computador realmente entenda.
Assim, ao fazer a conexo com o servidor o navegador que far a solicitao e guardar a resposta
por debaixo dos panos.
Com o comando mostrado anteriormente request.onreadystatechange = atualizaPagina; temos a
indicao que assim que o navegador receber a resposta do servidor ele chamar a funo
atualizaPagina. Isso acontece porque, lembre-se o que foi explicado anteriormente, a

comunicao com o servidor em aplicativos Ajax assncrona, portanto no se sabe quando a
resposta chegar. Cabe ao navegador se responsabilizar por isso, pois ele quem sabe quando a
resposta efetivamente chegar do servidor.
Agora o que o desenvolvedor tem a fazer manipular essa resposta que veio do servidor. Para fazer
isso, o cdigo abaixo d uma breve ilustrao:
Listagem 3: Manipulando a resposta vindo do servidor.
1 function atualizaPagina() {
2 if (request.readyState == 4) {
3
var respostaDoServidor = request.responseText;
4 }
5}
A funo acima exemplifica o uso da propriedade responseText do objeto de solicitao, essa
propriedade contm a resposta retornada pelo servidor. Veja que no comando var
respostaDoServidor = request.responseText captura-se a resposta do servidor e coloca-se essa
resposta em uma varivel qualquer. Agora que temos a resposta do servidor, basta na funo acima
atribuir para algum lugar da sua pgina este novo valor trazido do servidor, para fazer isso o
desenvolvedor pode usar DOM (Document Object Model) onde um cdigo Javascript pode utilizarse dele para atualizar valores em uma pgina dinamicamente. A propriedade readyState acima
quem armazena o estado de prontido atual, quando a propriedade for 4 temos um indicativo de que
o servidor ter concludo a solicitao. Portanto, todo o cdigo abaixo da condicional if
(request.readyState == 4) ser executado quando a solicitao ao servidor for totalmente
concluda, ou seja, quando uma resposta for trazida do servidor.
Vantagens e Desvantagens do Uso do Ajax

Como vantagens de se usar Ajax temos o aumento de velocidade de um site, melhor uso por parte
do usurio e flexibilidade para escolha da linguagem do lado servidor.
Entre as desvantagens esto a utilizao de frameworks que podem impossibilitar a utilizao de
outros frameworks, botes de avanar e voltar do navegador que no voltar ao contedo anterior,
dificuldade na manuteno do site, pois ao utilizar muitos Ajax por toda a pgina pode acabar
poluindo o cdigo com diversas solicitaes e tratamentos diferentes.
Concluses
Neste artigo abordou-se o que Ajax, como o seu funcionamento e como ele se relaciona com
outras tecnologias para atingir o seu objetivo, como a sua implementao bsica e quais so as
suas vantagens e desvantagens. Trarei mais artigos sobre Ajax devido a grande quantidade de
dvidas e curiosidades que ainda existem por parte dos desenvolvedores front-end e no esqueam
de me escreverem se tiverem dvidas ou sugestes de artigos.
Bibliografia
Brett McLaughlin. Head Rush Ajax. OReilly, 2006.
Ajax Tutorial disponvel em http://www.w3schools.com/ajax/default.asp

Ajax Basic o

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ajax Basic o

Загружено:

Авторское право:

Доступные форматы

Ajax Bsico: Introduo

retornar a chamada para o seu cdigo Javascript com a resposta do servidor.

Listagem 2: Solicitao ao Servidor.

atualizaPagina. Isso acontece porque, lembre-se o que foi explicado anteriormente, a

Vantagens e Desvantagens do Uso do Ajax

Вам также может понравиться