Manual de Ajax Prático

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


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;


2


}

}

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;


3


}

}

}

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);


4


} 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);

}


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


5


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.


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?".


6


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


7


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.


8


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.';


9


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:


10


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;


11


}

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


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

Documents

Manual de Ajax Prático