-
Manuais e recursos para desenvolvimento webwww.criarweb.com
Manual Ajax prtico - Workshop Ajax
Autores do manual
Este manual foi criado pelos seguintes colaboradores de
Criarweb.com:
Pablo Leccehttp://www.rhosting.com.ar (3 captulos)
Andrs Fernndezhttp://www.disegnocentell.com.ar (1 captulo)
Damin Surezhttp://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.
1
-
Manuais e recursos para desenvolvimento webwww.criarweb.com
Enviar mediante POST e GET usando uma s funo AJAXNeste 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
entend-lo.
O CDIGO
Primeiro copio aqui o cdigo completo, e logo passarei a
analis-lo.
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.
2
-
Manuais e recursos para desenvolvimento webwww.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 = " 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.
3
-
Manuais e recursos para desenvolvimento webwww.criarweb.com
}
}
}
if(valorpost!=""){
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
}
Artigo por Pablo Lecce
Passar valores por GET ou POST mediante AJAX - Explicando o
cdigoO 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. _pagina por onde lhe passo a url da pgina que desejo carregar
2. valorget por onde lhe passo as variveis get que desejo passar 3.
valorpost por onde lhe passo as variveis post que desejo passar 4.
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.
4
-
Manuais e recursos para desenvolvimento webwww.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
usoO 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.
5
-
Manuais e recursos para desenvolvimento webwww.criarweb.com
usa um link, o cdigo deve aparecer de forma similar ao
seguinte:
Meu Link GET
Se usar para enviar variveis POST, voc tem 2 opes.
Se fizer mediante link apareceria similar a esta forma:
Meu Link POST
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:
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:
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 XMLHttpRequest1)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.
6
-
Manuais e recursos para desenvolvimento webwww.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:
test
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);}
seleccionarlibros
Manual Ajax prtico - Workshop Ajax:
http://www.criarweb.com/ajax/ Os manuais de CriarWeb.com tm
copyright dos autores. No reproduzir sem autorizao.
7
-
Manuais e recursos para desenvolvimento webwww.criarweb.com
msicalenguaje
Como se pode ver, o corao disto esta funo:
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);}
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 UploadPor 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.
8
-
Manuais e recursos para desenvolvimento webwww.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:
Archivo:
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 'Nome Temporario:
'.$_FILES['fileUpload']['tmp_name'].'';echo 'Nome no Server:
'.$_FILES['fileUpload']['name'].'';echo '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 arquivoif
(isset($_FILES['fileUpload']['tmp_name'])) {// (2) - Comprovamos
que se trata de um arquivo de imagemif ($tipo == 'image') {// (3)
Por ultimo se tenta copiar o arquivo ao servidor.if
(!copy($_FILES['fileUpload']['tmp_name'],
$dir.$_FILES['fileUpload']['name']))echo ' alert("Erro ao Subir o
Arquivo");';}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.
9
-
Manuais e recursos para desenvolvimento webwww.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:
Ver Arquivos
Esta linha no se apresenta no script.
HTML:
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 webwww.criarweb.com
Archivo:
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 arquivoif (isset($_FILES['fileUpload']['tmp_name']))
{// (2) - Comprovamos que se trata de um arquivo de imagemif ($tipo
== 'image') {// (3) Por ultimo se tenta copiar o arquivo ao
servidor.if (!copy($_FILES['fileUpload']['tmp_name'],
$dir.$_FILES['fileUpload']['name']))echo ' alert("Erro ao Subir o
Arquivo");';elseecho ' alert("O arquivo
'.$_FILES['fileUpload']['name'].' se copiou com Exito");';}else
echo ' alert("O Arquivo que se tenta subir NAO E do tipo
Imagem.");';}else echo ' alert("O Arquivo nao chegou ao
Servidor.");';
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:
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 = 'Subir
Arquivo - Ver Imagens';if (estado == 0)var mensagem = 'O Arquivo '
+ file + ' 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 webwww.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:
parent.resultadoUpload(estado, file);
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
Manual Ajax prtico - Workshop AjaxEnviar mediante POST e GET
usando uma s funo AJAXPassar valores por GET ou POST mediante AJAX
- Explicando o cdigoEnviar mediante POST e GET usando uma s funo
AJAX - Exemplos de usoUm exemplo de Ajax sem XMLHttpRequestAjax
File Upload