21st Nov 2007
Web 2.0: Muito além do ajax (códigos apresentados durante a palestra)
Bom, estou devendo as pessoas que assistiram minha palestra no III EPSL os códigos que utilizei. Pessoa desculpas pela demora, é que as semanas que se seguiram após o EPSL foram de correria extrema.
Primeiro vamos as funções que utilizei para utilizar o ajax, aconselho que elas estejam em um arquivo separado e o incluam em suas páginas, estas são funções em JavaScript.
- // —————————– FUNÇÕES DO AJAX ———————————–
- //Fila de conexões
- fila=[]
- ifila=0
- function ajaxPOSTRun(url,parameters){
- xmlhttp.onreadystatechange = alertContents;
- xmlhttp.open(‘POST’, url, true);
- xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
- xmlhttp.setRequestHeader(“Content-length”, parameters.length);
- xmlhttp.setRequestHeader(“Connection”, “close”);
- xmlhttp.send(parameters);
- }
- function ajaxHTML(id,url,carr){
- //Carregando…
- if (typeof carr == “undefined”)
- document.getElementById(id).innerHTML=”Carregando…”;
- //Adiciona à fila
- fila[fila.length]=[id,url]
- //Se não há conexões pendentes, executa
- if((ifila+1)==fila.length)ajaxRun()
- }
- //Executa a próxima conexão da fila
- function ajaxRun(){
- //Abre a conexão
- xmlhttp.open(“GET”,fila[ifila][1],true);
- //Função para tratamento do retorno
- xmlhttp.onreadystatechange=function() {
- if (xmlhttp.readyState==4){
- //Mostra o HTML recebido
- retorno=unescape(xmlhttp.responseText.replace(/\+/g,” “))
- //retorno=xmlhttp.responseText
- document.getElementById(fila[ifila][0]).innerHTML=retorno
- //Roda o próximo
- ifila++
- if(ifila
- if(document.getElementById(‘calendario’)){
- var myTips = new Tips($$(‘#calendario .agenda_data_marcada’),{maxTitleChars:200,onShow:function(x){x.setOpacity(0.9)}});
- $$(“.tool-tip”).each(function(x){
- x.setStyle(“visibility”,”hidden”);
- });
- }
- }
- }
- //Executa
- xmlhttp.send(null)
- }
- //Tenta criar o objeto xmlHTTP
- try{
- xmlhttp = new XMLHttpRequest();
- }catch(ee){
- try{
- xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
- }catch(e){
- try{
- xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
- }catch(E){
- xmlhttp = false;
- }
- }
- }
Pronto, estas são as funções genéricas para utilizar o ajax, e que abstraem o trabalho o tornando mais simples. Vamos agora criar a função javascript que vai chamar a função ajaxHTML dessas nossas funções. Utilizar essa abstração é muito simples como veremos.
Na página onde queremos que o evento aconteça colocaremos a seguinte função javascript, no exemplo que tratei na palestra é um sistema de acompanhamento de obras de uma construtora, o “ajax” serve para tornar a aplicação mais leve, rápida e interessante ao usuário. Temos uma obra e vinculada a esta temos etapas da construção, cada etapa pode conter diversos álbuns, como seriam muitas miniaturas, e conseqüentemente um temo de espera maior, resolvi implementar o ajax para maximizar a experiência do usuário, como disse anteriormente.
Temos 2 funções uma que chama o “ajax” para fazer a requisição das etapas da construção que temos cadastradas no banco para obra, cujo o id passei como parâmetro na função, chamei essa função de CarregarAlbuns(id_obra), onde passo o id da obra e o “ajax” chama a página de apoio que contém o select no banco para retornar os álbuns associados aquela obra. Segue a função:
- function {
- axHTML(“div_album”,’albuns.php?id_obra=’+id_obra);
- };
Para chamar a função passamos 3 parâmetros necessários e 1 extra para chamar uma imagem enquanto o ajax carrega as informações. Primeiro parâmetro é a div onde desejamos que o ajax atue, em nosso exemplo utilizaremos a div_album, que deve estar no código porém vazia (o ajax a preencherá futuramente ). O segundo parâmetro é a pagina de apoio que terá a ação para preencher a div que setamos no primeiro parâmetro (no nosso caso a div_album), em nosso exemplo chamamos a página albuns.php?id_obra=”" que contém um select para achar os albuns associados a obra, cujo o id passamos por get para a págian albuns.php. O que for “ecoado” (usando a função echo do PHP) nessa página (albuns.php), será escrito dentro da div_album quando a função CarregarAlbuns(id_obra) for chamada, em nosso exemplo chamamos tal função utilizando o evento onclick no link Ver Fotos da obra. OBS: $_db é onde estão dados buscados no banco. As tags estão cortados para pode serem reproduzidas corretamente, lembrem de corrigir.
Então a div será preenchida com conteúdo, movendo o conteúdo colocado depois do fim da div_album para baixo, o que dará a impressão de movimento.

Logo depois de termos carregado a listagem dos álbuns que temos, queremos agora listar as imagens que temos para aquele álbum, então devemos acrescentar uma função junto a função anterior (CarregarAlbuns(id_obra)) chamada CarregarFotos(id_album):
- function CarregarFotos(id_album){
- ajaxHTML(“div_fotos”,’fotos.php?id_album=’+id_album);
- };
Ao carregarmos as etapas temos o link para cada álbum, que através do evento onclick chamamos a função que criamos, esse caso é similar a anterior, me refiro aos parâmetros da função o que muda é que a div_fotos que é onde escreveremos as fotos usando ajax (da mesma maneira como foi feito na função anterior), a div vazia deve estar contida dentro da página de apoio anterior, exatamente após o título da etapa de construção.

No final de tudo podemos incrementar a aplicação utilizando o Slimbox

Você pode encontrar os slides da palestra em PDF no link palestras no menu acima.
Bom, estou devendo as pessoas que assistiram minha palestra no III EPSL os códigos que utilizei. Pessoa desculpas pela demora, é que as semanas que se seguiram após o EPSL foram de correria extrema.
Primeiro vamos as funções que utilizei para utilizar o ajax, aconselho que elas estejam em um arquivo separado e o incluam em suas páginas, estas são funções em JavaScript.
- // —————————– FUNÇÕES DO AJAX ———————————–
- //Fila de conexões
- fila=[]
- ifila=0
- function ajaxPOSTRun(url,parameters){
- xmlhttp.onreadystatechange = alertContents;
- xmlhttp.open(‘POST’, url, true);
- xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
- xmlhttp.setRequestHeader(“Content-length”, parameters.length);
- xmlhttp.setRequestHeader(“Connection”, “close”);
- xmlhttp.send(parameters);
- }
- function ajaxHTML(id,url,carr){
- //Carregando…
- if (typeof carr == “undefined”)
- document.getElementById(id).innerHTML=”Carregando…”;
- //Adiciona à fila
- fila[fila.length]=[id,url]
- //Se não há conexões pendentes, executa
- if((ifila+1)==fila.length)ajaxRun()
- }
- //Executa a próxima conexão da fila
- function ajaxRun(){
- //Abre a conexão
- xmlhttp.open(“GET”,fila[ifila][1],true);
- //Função para tratamento do retorno
- xmlhttp.onreadystatechange=function() {
- if (xmlhttp.readyState==4){
- //Mostra o HTML recebido
- retorno=unescape(xmlhttp.responseText.replace(/\+/g,” “))
- //retorno=xmlhttp.responseText
- document.getElementById(fila[ifila][0]).innerHTML=retorno
- //Roda o próximo
- ifila++
- if(ifila
- if(document.getElementById(‘calendario’)){
- var myTips = new Tips($$(‘#calendario .agenda_data_marcada’),{maxTitleChars:200,onShow:function(x){x.setOpacity(0.9)}});
- $$(“.tool-tip”).each(function(x){
- x.setStyle(“visibility”,”hidden”);
- });
- }
- }
- }
- //Executa
- xmlhttp.send(null)
- }
- //Tenta criar o objeto xmlHTTP
- try{
- xmlhttp = new XMLHttpRequest();
- }catch(ee){
- try{
- xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
- }catch(e){
- try{
- xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
- }catch(E){
- xmlhttp = false;
- }
- }
- }
Pronto, estas são as funções genéricas para utilizar o ajax, e que abstraem o trabalho o tornando mais simples. Vamos agora criar a função javascript que vai chamar a função ajaxHTML dessas nossas funções. Utilizar essa abstração é muito simples como veremos.
Na página onde queremos que o evento aconteça colocaremos a seguinte função javascript, no exemplo que tratei na palestra é um sistema de acompanhamento de obras de uma construtora, o “ajax” serve para tornar a aplicação mais leve, rápida e interessante ao usuário. Temos uma obra e vinculada a esta temos etapas da construção, cada etapa pode conter diversos álbuns, como seriam muitas miniaturas, e conseqüentemente um temo de espera maior, resolvi implementar o ajax para maximizar a experiência do usuário, como disse anteriormente.
Temos 2 funções uma que chama o “ajax” para fazer a requisição das etapas da construção que temos cadastradas no banco para obra, cujo o id passei como parâmetro na função, chamei essa função de CarregarAlbuns(id_obra), onde passo o id da obra e o “ajax” chama a página de apoio que contém o select no banco para retornar os álbuns associados aquela obra. Segue a função:
- function {
- axHTML(“div_album”,’albuns.php?id_obra=’+id_obra);
- };
Para chamar a função passamos 3 parâmetros necessários e 1 extra para chamar uma imagem enquanto o ajax carrega as informações. Primeiro parâmetro é a div onde desejamos que o ajax atue, em nosso exemplo utilizaremos a div_album, que deve estar no código porém vazia (o ajax a preencherá futuramente ). O segundo parâmetro é a pagina de apoio que terá a ação para preencher a div que setamos no primeiro parâmetro (no nosso caso a div_album), em nosso exemplo chamamos a página albuns.php?id_obra=”" que contém um select para achar os albuns associados a obra, cujo o id passamos por get para a págian albuns.php. O que for “ecoado” (usando a função echo do PHP) nessa página (albuns.php), será escrito dentro da div_album quando a função CarregarAlbuns(id_obra) for chamada, em nosso exemplo chamamos tal função utilizando o evento onclick no link Ver Fotos da obra. OBS: $_db é onde estão dados buscados no banco. As tags estão cortados para pode serem reproduzidas corretamente, lembrem de corrigir.
Então a div será preenchida com conteúdo, movendo o conteúdo colocado depois do fim da div_album para baixo, o que dará a impressão de movimento.

Logo depois de termos carregado a listagem dos álbuns que temos, queremos agora listar as imagens que temos para aquele álbum, então devemos acrescentar uma função junto a função anterior (CarregarAlbuns(id_obra)) chamada CarregarFotos(id_album):
- function CarregarFotos(id_album){
- ajaxHTML(“div_fotos”,’fotos.php?id_album=’+id_album);
- };
Ao carregarmos as etapas temos o link para cada álbum, que através do evento onclick chamamos a função que criamos, esse caso é similar a anterior, me refiro aos parâmetros da função o que muda é que a div_fotos que é onde escreveremos as fotos usando ajax (da mesma maneira como foi feito na função anterior), a div vazia deve estar contida dentro da página de apoio anterior, exatamente após o título da etapa de construção.

No final de tudo podemos incrementar a aplicação utilizando o Slimbox

Você pode encontrar os slides da palestra em PDF no link palestras no menu acima.
Posted in PSL, ajax, geral, software livre, web | 2 Comments »















