Manuais e recursos para desenvolvimento web

www.criarweb.com

Manual Ajax prtico - Workshop Ajax

Autores do manual
Este manual foi criado pelos seguintes colaboradores de Criarweb.com:
Pablo Lecce

http://www.rhosting.com.ar
(3 captulos)

Andrs Fernndez

http://www.disegnocentell.com.ar
(1 captulo)

Damin Surez

http://www.cabezaderaton.com.ar
(1 captulo)

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

Enviar mediante POST e GET usando uma s funo AJAX

Neste tutorial contamos como criar uma s funo que lhe permita passar variveis mediante
GET e POST entre duas pginas web usando AJAX .
Isto aliviar muito o peso de seus arquivos javascript e de suas pginas j que voc usar uma
funo para tudo e no uma para cada varivel ou conjunto de variveis que deseje passar.
ANTES DE COMEAR
Este tutorial est feito para pessoas que saibam como criar objetos AJAX, escrever funes e
pass-las mediante AJAX por POST ou GET. Tambm que tenham conhecimentos sobre PHP e
Javascript. Se no for o seu caso, por favor aprofunde-se em tais aspectos a fim de entendlo.
O CDIGO
Primeiro copio aqui o cdigo completo, e logo passarei a analis-lo.
<script>
function objetus(file) {
xmlhttp=false;
this.AjaxFailedAlert = "Seu navegador no suporta as funcionalidades deste site e poderia experiment-lo de forma
diferente q eu foi pensada. Por favor habilite javascript em seu navegador para v-lo normalmente.\n";
this.requestFile = file;
this.encodeURIString = true;
this.execute = false;
if (window.XMLHttpRequest) {
this.xmlhttp = new XMLHttpRequest();
if (this.xmlhttp.overrideMimeType) {
this.xmlhttp.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
this.xmlhttp = null;
Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/
Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

}
}
if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
this.xmlhttp = new XMLHttpRequest();
if (!this.xmlhttp){
this.failed = true;
}
}
}
return this.xmlhttp ;
}
function recebeid(_pagina,valorget,valorpost,camada){
ajax=objetus(_pagina);
if(valorpost!=""){
ajax.open("POST", _pagina+"?"+valorget+"&tempo="+new Date().getTime(),true);
} else {
ajax.open("GET", _pagina+"?"+valorget+"&tempo="+new Date().getTime(),true);
}
ajax.onreadystatechange=function() {
if (ajax.readyState==1){
document.getElementById(camada).innerHTML = "<img src='loadingcircle.gif' align='center'> Aguarde por favor...";
}
if (ajax.readyState==4) {
if(ajax.status==200)
{document.getElementById(capa).innerHTML = ajax.responseText;}
else if(ajax.status==404)
{
capa.innerHTML = "O endereo no existe";
}
else
{
camada.innerHTML = "Error: ".ajax.status;

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

}
}
}
if(valorpost!=""){
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
}
</script>

Artigo por Pablo Lecce

Passar valores por GET ou POST mediante AJAX - Explicando o cdigo

O cdigo tem duas funes.
A primeira a funo que carrega o objeto AJAX propriamente dito. complexa e sua
explicao no objeto deste tutorial, sendo assim, voc pode usar qualquer funo para o
carregamento do objeto xhttprequest que vier usando previamente.
A funo recebeid a que se encarrega de passar valores entre pginas mediante AJAX, j
sejam estes mediante GET ou mediante POST.
Para isso, usa 4 variveis:
1.
2.
3.
4.

_pagina por onde lhe passo a url da pgina que desejo carregar
valorget por onde lhe passo as variveis get que desejo passar
valorpost por onde lhe passo as variveis post que desejo passar
camada onde indico o DIV ou a camada onde se carregar a pgina que se solicite
mediante a funo.

DESMEMBRANDO A FUNO
Envio por GET ou por POST?
Primeiramente, mediante o seguinte cdigo
if(valorpost!=""){

ajax.open("POST", _pagina+"?"+valorget+"&tempo="+new Date().getTime(),true);

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

} else {

ajax.open("GET", _pagina+"?"+valorget+"&tempo="+new Date().getTime(),true);

A funo determina o mtodo que usar o objeto AJAX para enviar as variveis pgina.
Como voc sabe, se se envia por mtodo POST isto se faz de forma diferente a quando se
envia mediante GET.
Adicionalmente, sucede que se voc enviar mediante GET e houver variveis POST, as mesmas
no sero passadas. Por isso, a utilidade deste condicional saber se h variveis POST que
devem ser passadas, configurar o mtodo a POST e seno deix-lo em GET.
A seguinte parte do cdigo basicamente verifica os estados. Enquanto a pgina est sendo
chamada carrega uma imagem de carregando, embora se possa substitu-la por uma frase se
desejar.
E uma vez que recebe os resultados, os carrega na camada.
Finalmente, a outra parte importante da funcion
Mediante o seguinte condicional, se complementa o primeiro condicional, enviando os daos da
solicitude mediante POST ou GET segunda corresponda, com cdigo adequado para ajax.send.
if(valorpost!=""){

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.send(valorpost);

} else {

ajax.send(null);

Artigo por Pablo Lecce

Enviar mediante POST e GET usando uma s funo AJAX - Exemplos de uso
O exemplo mais simples para passar valores mediante GET. Para isso, por exemplo, se voc
Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/
Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

usa um link, o cdigo deve aparecer de forma similar ao seguinte:

<a href="javascript:recebeid ('http://www.meusite.com/minhapagina.php',
'variavelenviada=enviaste get,'','minhacamada')">Meu Link GET</a>

Se usar para enviar variveis POST, voc tem 2 opes.

Se fizer mediante link apareceria similar a esta forma:
<a href="javascript:recebeid('http://www.meusitio.com/minhapagina.php',
'variavelgetenviada=enviaste get','variavelpostenviada=e enviaste post',
'minhacamada')">Meu Link POST</a>

Entretanto, para o envio mediante formulrio h 2 peculiaridades que se deve conhecer.

A primeira que no tag de abertura do form deve-se incluir um return false, por exemplo,
deve aparecer algo assim:
<form name="Meuformulario" onSubmit="return false">

E a segunda que no tag do boto, deve-se incluir com um onclick a funo e escrever as
variveis a passar de um modo particular para que se possa pegar.
Aqui um exemplo:
<input name="Submit" type="submit" value="Enviar"
onClick="recebeid('http://www.meusite.com/minhapagina.php',
'variavelgetenviada=enviaste get','variavelpostenviada1='+
Meuformulario.campoparaavariavelpostenviada1.value+'
&variavelpostenviada2='+Meuformulario.campoparaavariavelpostenviada2.value+
'','minhacamada')" >

Pode-se ver este exemplo funcionando clicando aqui

Bem, isso basicamente tudo. Falta que voc faa seus prprios experimentos com ela.
Desde j estamos abertos aos seus comentrios e melhoras.
Artigo por Pablo Lecce

Um exemplo de Ajax sem XMLHttpRequest

1)Que as pessoas (sugestionadas pelas variadas ferramentas criadas com apoio nesta
tecnologia) acreditem que Ajax serve para tudo... Outro dia algum me disse que Ajax era algo
que servia para fazer drag and drop... Outro pensava que era algo que servia para gerar
efeitos de reflexo em imagens... E assim poderia continuar numerando pessoas que pensam
que melhora o gosto do caf ou que perguntam "como voc pensa em usar um detergente
para fazer uma web?".

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

2)Todos os websites de programao que ensinam a fazer combos relacionados, j seja com
Javascript puro ou com Ajax.
E bom, uma pouco para adicionar, eu tambm, mais lenha a este tema recorrente, e outro
pouco porque um bom exemplo de que s vezes melhor no usar Ajax e sim ferramentas
similares, mais simples e que obtm o mesmo resultado. Por isso, deixo este exemplo, no qual
o evento onchange de um combo dispara uma consulta ao servidor, obtm a resposta que este
lhe devolve e a mostra em tela sem atualizar a pgina, ou seja, de maneira assncrona, e, o
mais importante, sem usar Ajax, s utilizando DOM Javascript, algo que alguns chamam RPC
Javascript ou Chamada a Procedimento Remoto em Javascript.
Este o exemplo e este o cdigo utilizado:
<?php
if(isset($_GET['p'])){
switch($_GET['sel']){
case '1':
$ret=array('Final del Juego','Rayuela','El Seor de los Anillos');
break;
case '2':
$ret=array('rock','new age');
break;
case '3':
$ret=array('espaol','php','javascript');
break;
default:
echo 'document.getElementById("pp").innerHTML="<select name=\"dos\" id=\"dos\"></select>";';
exit;
}
$html='<select name=\"dos\" id=\"dos\">';
foreach($ret as $v)
$html.='<option value=\"'.$v.'\">'.$v.'</option>';
$html.='</select>';
echo 'document.getElementById("pp").innerHTML="'.$html.'";';
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function adjs(url){
oldsc=document.getElementById("old_sc");
if(oldsc)
document.getElementsByTagName('body')[0].removeChild(oldsc);
sc=document.createElement('script');
sc.id="old_sc";
sc.src=url+'&'+Math.random();
document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select name="uno" id="uno" onchange="adjs('?p&sel='+this.value)">
<option value="0">seleccionar</option>
<option value="1">libros</option>
Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/
Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

<option value="2">msica</option>
<option value="3">lenguaje</option>
</select>
<div id="pp"><select name="dos" id="dos">
</select></div>
</form>
</body>
</html>

Como se pode ver, o corao disto esta funo:

<script>
function adjs(url){
oldsc=document.getElementById("old_sc");
if(oldsc)
document.getElementsByTagName('body')[0].removeChild(oldsc);
sc=document.createElement('script');
sc.id="old_sc";
sc.src=url+'&'+Math.random();
document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>

O que faz a mesma incluir um novo elemento script na pgina, cujo atributo src a rota ao
arquivo de processo no servidor.
Simples e totalmente compatvel com todos os navegadores modernos, e, graas a que
mediante uma comprobao elimina os scripts includos em outras chamadas, com um
consumo mnimo de recursos.
Outra vantagem frente ao nosso amigo XMLHttpRequest, parte de sua simplicidade, que
pode trabalhar com arquivos que estejam em outro domnio sem ter que apelar a nenhum
truque.
Artigo por Andrs Fernndez

Ajax File Upload

Por uma necessidade pessoal eu tambm me vi envolvido nesta srie de discusses. A
finalidade deste artigo que seja til a algum; principalmente a mim.
Ento ...
Ao finalizar este pequeno tutorial voc dever entender perfeitamente este exemplo.
Primeiro Erro: Ttulo Mal Empregado
Vou me passar como tradutor de ingls...seria algo como Arquivo Subido com AJAX. Isto, hoje,
no se pode fazer. assim e no resta muito a fazer.
Ento, voc dir ...
- bom, mas eu em gmail posso subir arquivos e fao com AJAX !!!.
Eu lhe respondo ...
- No seja bobo, eu tambm pensava o mesmo.

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

H vrios indcios que o objeto XMLHttpRequest no pode enviar arquivos ao servidor.

Ento deveramos mudar o ttulo do post. Seria assim:
Ajax File Upload SEM Ajax
Frente a esta imutvel condio os desenvolvedores buscaram uma boa forma de simular
scripts para subir arquivos ao servidor como se fosse com AJAX, e pelo menos comigo
conseguiram.

Temos um formulrio com um campo tipo file, o qual nos permitir enviar o arquivo a
nosso servidor PHP. A resposta do servidor se far no IFRAME, ator principal desta
novela.
O script executado em nosso server a causa do action do formulrio o encarregado de
copiar o arquivo temporrio em um espao fsico dentro do mesmo.
Logo, com um pouco de ajuda de JS imprimiremos uma mensagem correspondente ao
estado final de nosso script.

Primeiro Exemplo - Subir um Arquivo o Server

Utilizaremos somente dois scripts muito simples. Logo iremos melhorando e complementando
o desenvolvimento at chegar ao nosso objetivo.
HTML:
<form method="post" enctype="multipart/form-data"
action="controlUpload.php"
target="iframeUpload">
<input type="hidden" name="phpMyAdmin" />
Archivo: <input name="fileUpload" type="file" />
<input type="submit" value="enviar">
<iframe name="iframeUpload"></iframe>
</form>

um simples formulrio HTML com um campo FILE e um marco flutuante iframe denominado
iframeUpload. Quando enviamos o arquivo ao servidor executaremos o script
controlUpload.php e a resposta do server se far em nosso iframe j que apontamos ao
mesmo dentro da etiqueta target na declarao form.
PHP:
// Script Que copia o arquivo temporrio subido ao servidor em um diretorio.
echo '<p>Nome Temporario: '.$_FILES['fileUpload']['tmp_name'].'</p>';
echo '<p>Nome no Server: '.$_FILES['fileUpload']['name'].'</p>';
echo '<p>Tipo de Arquivo: '.$_FILES['fileUpload']['type'];
$tipo = substr($_FILES['fileUpload']['type'], 0, 5);
// Definimos Diretorio onde se salva o arquivo
$dir = 'archs/';
// Tentamos Subir Arquivo
// (1) Comprovamos que existe o nome temporario do arquivo
if (isset($_FILES['fileUpload']['tmp_name'])) {
// (2) - Comprovamos que se trata de um arquivo de imagem
if ($tipo == 'image') {
// (3) Por ultimo se tenta copiar o arquivo ao servidor.
if (!copy($_FILES['fileUpload']['tmp_name'], $dir.$_FILES['fileUpload']['name']))
echo '<script> alert("Erro ao Subir o Arquivo");</script>';
}
else echo 'O Arquivo que se tenta subir NAO E do tipo Imagem.';
}
else echo 'O Arquivo nao chegou ao Servidor.';
Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/
Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web

www.criarweb.com

Quando se executa o script, este tenta resgatar os dados do arquivo a subir. Para isso se vale
do array global de PHP $_FILES. Se no estiver muito familiarizado recomendo que leia esta
seo do manual oficial para entender seu funcionamento e suas particularidades.
Nas primeiras linhas apresentamos o nome do arquivo temporrio gerado por nosso motor
PHP, o segundo o nome real do arquivo e o terceiro o tipo de arquivo.
Se estes valores estiverem definidos evidentemente o arquivo chegou ao server. Estas linhas
mais adiante no as utilizaremos; agora s as usamos para realizar o seguimento do script.
Atribumos a $tipo o tipo de arquivo para poder controlar que seja uma imagem. Cortam-se os
primeiros 5 caracteres e se tudo for correto $tipo ter o valor image. Se no for uma imagem
ter o valor distinto. Este controle se pode fazer de diversas formas; ns utilizamos esta.
Logo, tentamos copiar o arquivo temporrio em forma definitiva em algum setor fsico em
nosso servidor. Verifica-se em forma aninhada definio de nome temporrio de arquivo, tipo
de arquivo e se o motor concretizou a cpia.
Neste exemplo o faremos na pasta archs/.
Se est tudo bem podemos passar ao segundo passo.
Neste link podemos provar o script. Podemos ver os arquivos subidos ao server neste link.
Esclarecimentos:
H que definir permisses de escritura de PHP no diretrio a copiar o arquivo. Em nosso caso
a pasta archs.
Armando o Circo
Comecemos a modificar um pouco os arquivos anteriores.
Em primeiro lugar vamos eliminar o boto submit Enviar e vamos disparar o formulrio com
uma ordem em JS.
JavaScript:
onchange="javascript: submit()"

Vamos ocultar o iframe.

JavaScript:
style="display:none"

No final do arquivo agregamos uma linha que nos dirige a um simples script que nos mostra os
arquivos subidos ao server; mais que nada para que possa corroborar a funcionalidade.
HTML:
<a href="verArquivos.php">Ver Arquivos</a>

Esta linha no se apresenta no script.

HTML:
<form method="post" enctype="multipart/form-data"
action="controlUpload2.php" target="iframeUpload">

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

10

Manuais e recursos para desenvolvimento web

www.criarweb.com

Archivo: <input name="fileUpload" type="file" onchange="javascript: submit()" />

<br /><iframe name="iframeUpload" style="display:none"></iframe>
</form> E ao script controlUpload.php vamos agregar alertas de controle

(tambm com JS por

agora). Ademais, vamos eliminar instrues que se tornaram desnecessrias ao ocultar o
iframe.
PHP:
// Script Que copia o arquivo temporario subido ao servidor em um diretorio.
$tipo = substr($_FILES['fileUpload']['type'], 0, 5);
// Definimos Diretorio onde se salva o arquivo
$dir = 'archs/';
// Tentamos Subir Arquivo
// (1) Comprovamos que existe o nome temporario do arquivo
if (isset($_FILES['fileUpload']['tmp_name'])) {
// (2) - Comprovamos que se trata de um arquivo de imagem
if ($tipo == 'image') {
// (3) Por ultimo se tenta copiar o arquivo ao servidor.
if (!copy($_FILES['fileUpload']['tmp_name'], $dir.$_FILES['fileUpload']['name']))
echo '<script> alert("Erro ao Subir o Arquivo");</script>';
else
echo '<script> alert("O arquivo '.$_FILES['fileUpload']['name'].' se copiou com Exito");</script>';
}
else echo '<script> alert("O Arquivo que se tenta subir NAO E do tipo Imagem.");</script>';
}
else echo '<script> alert("O Arquivo nao chegou ao Servidor.");</script>';

controlUpload2.php | Ver
J comea a parecer a um verdadeiro AJAX FILE UPLOAD!
Finalmente um simples Script
Com estas ltimas modificaes teremos a base final para poder implementar nosso FILE
UPLOAD com um comportamento muito similar a gmail.
Vamos conter o formulrio em um div com id formUpload.
HTML:
<div id="formUpload">

Ao arquivo upload3.php, parte do formulrio de envio vamos agreg-lhe uma simples funo
resultadoUpload (estado, file) realizada em JS que, dependendo do cdigo que nos 'envie'
controlUpload.php nas variveis estado e file (agora vemos como ...) imprimir em tal div uma
mensagem de resposta tentativa de subida.
JavaScript:
function resultadoUpload(estado, file) {
var link = '<br /><br /><a href="upload3.php">Subir Arquivo</a> - <a href="verArquivos.php">Ver Imagens</a>';
if (estado == 0)
var mensagem = 'O Arquivo <a href="archs/' + file + '" target="_blank">' + file + '</a> foi subido ao servidor
corretamente' + link;
if (estado == 1)
var mensagem = 'Erro ! - O arquivo nao chegou ao servidor' + link;
if (estado == 2)
var mensagem = 'Erro ! - So se permitem Arquivos tipo Imagem' + link;
if (estado == 3)
var mensagem = 'Erro ! - Nao se pode copiar Arquivo. Possivel problema de permissoes em server' + link;
document.getElementById('formUpload').innerHTML=mensagem;

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

11

Manuais e recursos para desenvolvimento web

www.criarweb.com

A impresso de nossa mensagem no div se faz na ltima linha da funo.

JavaScript:
document.getElementById('formUpload').innerHTML=mensagem;

Este site tem uma boa descrio do conjunto de funes getElementBy*. De qualquer forma,
com um pouco de sua grande astcia, voc poder encontrar muitos exemplos de seu
funcionamento.
Agora s resta modificar controlUpload.php para que em vez de executar uma janela alert ()
(como no exemplo anterior) simplesmente execute o cdigo JavaScript para chamar funo
resultadoFile () enviando os dados correspondentes tentativa de subida do arquivo.
O ponto chamativo como acessamos desde o iframe oculto funo que se encontra na
pgina que o contm. Utilizamos a palavra reservada de JS parent.
JavaScript:
<script>parent.resultadoUpload(estado, file);</script>

As outras modificaes so para melhorar esteticamente as pginas. Tambm se utilizam dois

scrips em php. verArquivos.php para ver os arquivos subidos e eliminar.php que no requer
muita explicao.

upload3.php | ver | executar

controlUpload3.php | ver
verArchivos.php | ver | executar
eliminar.php | ver
Conjunto de todos os scripts upLoader.tar.gz e upLoader.rar

Finalizando
Este humilde tutorial ficou mais longo do que gostaria. Vou continuar trabalhando para
melhorar o funcionamento e evoluir. Fica pendente uma barra de progresso (a creio que no
podemos escapar de AJAX) e outras formas de aplicao.
Tomem todo o cdigo como um guia para desenvolver esta pequena aplicao. Faltam muitos
controles de erros, de segurana, etc. O cdigo fonte apresentado no idntico aos arquivos
que se podem baixar; isto simplesmente por uma questo de prolixidade.
Desculpem minha desordem semntica e gramatical; como a maioria, sou atrevido por jogar o
papel de tutor. Nada mais longe de meus fins. Simplesmente o que quero ajudar assim como
me foi ajudado.
Artigo por Damin Surez

Manual Ajax prtico - Workshop Ajax: http://www.criarweb.com/ajax/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

12