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.

1. // —————————– FUNÇÕES DO AJAX ———————————–
2. //Fila de conexões
3. fila=[]
4. ifila=0
5. function ajaxPOSTRun(url,parameters){
7. xmlhttp.onreadystatechange = alertContents;
8. xmlhttp.open(‘POST’, url, true);
9. xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
10. xmlhttp.setRequestHeader(“Content-length”, parameters.length);
11. xmlhttp.setRequestHeader(“Connection”, “close”);
12. xmlhttp.send(parameters);
14. }
15. function ajaxHTML(id,url,carr){
16. //Carregando…
17. if (typeof carr == “undefined”)
18. document.getElementById(id).innerHTML=”Carregando…”;
19. //Adiciona à fila
20. fila[fila.length]=[id,url]
21. //Se não há conexões pendentes, executa
22. if((ifila+1)==fila.length)ajaxRun()
23. }
26. //Executa a próxima conexão da fila
27. function ajaxRun(){
28. //Abre a conexão
29. xmlhttp.open(“GET”,fila[ifila][1],true);
30. //Função para tratamento do retorno
31. xmlhttp.onreadystatechange=function() {
32. if (xmlhttp.readyState==4){
33. //Mostra o HTML recebido
34. retorno=unescape(xmlhttp.responseText.replace(/\+/g,” “))
35. //retorno=xmlhttp.responseText
36. document.getElementById(fila[ifila][0]).innerHTML=retorno
37. //Roda o próximo
38. ifila++
39. if(ifila
40. if(document.getElementById(‘calendario’)){
41. var myTips = new Tips($$(‘#calendario .agenda_data_marcada’),{maxTitleChars:200,onShow:function(x){x.setOpacity(0.9)}});
42. $$(“.tool-tip”).each(function(x){
43. x.setStyle(“visibility”,”hidden”);
44. });
45. }
46. }
47. }
48. //Executa
49. xmlhttp.send(null)
50. }
52. //Tenta criar o objeto xmlHTTP
53. try{
54. xmlhttp = new XMLHttpRequest();
55. }catch(ee){
56. try{
57. xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
58. }catch(e){
59. try{
60. xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
61. }catch(E){
62. xmlhttp = false;
63. }
64. }
65. }

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:

1. function {
2. axHTML(“div_album”,’albuns.php?id_obra=’+id_obra);
3. };

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.

1. Ver fotos da obra…/a>/p>

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

1. function CarregarFotos(id_album){
2. ajaxHTML(“div_fotos”,’fotos.php?id_album=’+id_album);
3. };

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.