Fila de requisições Ajax usando prototype

A muito tinha lido o artigo do Elcio no tableless.com.br sobre fila de requissões ajax. Mas ao ler o código, vi que funcionava como uma mas não estava implementado assim. Achei super interessante e fiquei com vontade de implementar. Mas, como eu trabalho por necessidade e não por vontade, meses depois eu me vi na situação em que precisei.

Então, apesar de ainda não satisfeito mas, completamente funcional, eis a mesma:

<!--
// Criado por JALEX em novembro/2007 baseaso no exemplo do "Elcio Ferreira * Tableless.com.br"
// VERSAO: 1.0
// contato: jalex1979@yahoo.com.br / jalex79@gmail.com
var arrAjaxFila=[];				//Fila de requisições AJAX
var strFila_carregando='<span class="lblCarregando">Carregando...</span>';
function ajax()		//Carrega via AJAX a url recebida e coloca seu valor no objeto com o id recebido
{	if(arguments.length<2) return false;
	switch(typeof arguments[1])
	{	case 'string':
			$(arguments[1]).innerHTML=strFila_carregando;
			arrAjaxFila.push([1,arguments[0],arguments[1],arguments[2]]);
		break;
		case 'function':
			arrAjaxFila.push([0,arguments[0],arguments[1],arguments[2],arguments[3]]);
			if(typeof arrAjaxFila[0][4]=='string')$(arrAjaxFila[0][4]).innerHTML=strFila_carregando;
		break;
		default:alert('ERROR: mal uso da função');
	}
	if(arrAjaxFila.length==1) _ajaxRun();		//Se não há conexões pendentes, executa o próximo da fila
}
function _ajaxRun()
{	if(arrAjaxFila[0][0])
		new Ajax.Updater(	arrAjaxFila[0][2],
							arrAjaxFila[0][1],
							{	parameters:arrAjaxFila[0][3],
								onComplete:pFila_requisicaoTerminada,
								onFailure:pAjax_insucesso
							}
						);
	else
		new Ajax.Request(	arrAjaxFila[0][1],
							{	parameters:arrAjaxFila[0][3],
								onComplete:pFila_requisicaoTerminada,
								onSuccess:arrAjaxFila[0][2],
								onFailure:pAjax_insucesso
							}
		);
}
function pFila_requisicaoTerminada()
{	if(typeof arrAjaxFila[0][4]=='string')$(arrAjaxFila[0][4]).innerHTML='';
	arrAjaxFila.shift();
	if(arrAjaxFila.length>0)setTimeout('_ajaxRun()',5);
}
function pAjax_insucesso(){alert('Não possível resgatar informações.');}
-->

Disseminando o conhecimento

Hoje eu puder notar o quanto ainda é pouco o conhecimento da pessoas da área sobre javascript. Eu já vejo isso todo dia no meu trabalho e lá já cansei de disseminar e ninguém colher. Mostro sempre meus grandes feitos como por exemplo inserir uma nova linha com  aprendendo aprender ‘algo novo’, por mais que isso venha a aumentar a produtividade e a dinamicidade. Mas hoje eu tive uma experiência externa.

Eu fui a uma entrevista de emprego com o intuito de sondar o mercado. Foi péssimo.
No meu curriculum eu havia colocado na sessão ‘Conhecimento Adquiridos’ coisas como design tableless e framework javascript jQuery e Prototype.
O entrevistador me perguntou sobre o que seria framework em javascript. Eu dei uma explicação sucinta citando dois benefícios mas parei quando ele fez uma cara de parece-não-servir-pra-nada. Óbvio que eu não continuei falando do benefícios para tentar convence-lo que era uma coisa válida.
Me perguntou sobre tableless, se eu tinha experiência em design. Eu respondi que fazia o design HTML e não o gráfico. Ai ele fez uma cara de ‘Ah, tah’.

Concluindo, acho que não fui nada bem na entrevista, fora outro motivos (falta de experiência, apesar de ter curso no foco da coisa), mas que de nada adianta você colocar o que há de mais moderno no seu curriculum vitae se o empregador não entende e não vê vantagem alguma nisso. Na verdade, eu não esperava o entrevistador também me perguntar dos detalhes técnicos de projetos desenvolvidos a 5 anos e muita coisa respondi ‘não me lembro’ (Eu sou meio direto mesmo). Então ficou mais ou menos um ‘não é verdade’. Faltou experiência também nessa parte, onde eu nunca realmente precisei fazer. Minhas entrevistas anteriores sempre foram mais aquelas do tipo so pra contratar mesmo.

Então, você que faz interfaces web, enriqueça mais seus conhecimentos e pesquise na internet sobre acessibilidade, semântica e claro, javascript.

Expressões Regulares, função de validação pronta.

Para validar um formulário, utilizo uma biblioteca (uma arquivo com apenas uma função ou outras que a função principal, e que leva o nome do arquivo, utiliza).
Primeiro passo: injetar o código na página
Segundo passo: usar a função da biblioteca em uma função que valida todo o formulário (pode-se também utilizar para validar um campo apenas em um evento, ex: onblur)

<HTML>
<HEAD>
<script type="text/javascript" src="lib/js/er_validaTipo.js"></script>
<script type="text/javascript">
function pForumlario_validar()
{  //var objForm=document.getElementById('formulario');
   var objForm=$('formulario'); //utilizando prototype
   if(fValidaTipo(objform.txtData.value, 'data'))
   {  alert('O formato da Data não é valido');
      objform.txtData.activate();
   }
}
</script>
</HEAD>
<BODY>
<form id="formulario">
  <input type="text" id="txtData" maxlength="10" size="10" />
  <button type="button" onclick="pFormulario_validar()">Validar</button>
</form>
</BODY>
</HTML>

Psicologias produtivas

Venho observando, principalmente em quem está começando a desenvolver, um comportamento errôneo, grave em todos os sentidos. Antes, durante e após do projeto.

Às vezes me perguntam por alguma função e quando esta não é exatamente o que o desenvolvedor quer, vejo ele mexer diretamente na função. A questão não é paternal (amor a cria). A questão é o descaminho.
Alterar funções que já estão prontas pode causar inconsistência de versão.
Realmente é muito mais fácil editar poucas linhas ou até mesmo uma apenas do que criar outra apenas para tratar o parâmetro que vai ser passado ou o retorno da primeira. Essa prática, para quem não tem a visão além do alcance, no momento parecerá inofensiva mas desvirtuará e incompatibilizará o seu uso futuro.
O princípio que considero fundamental no desenvolvimento de funções é a de que as complexas devem sempre usar ao máximo as funções mais simples que normalmente se repetem nesta ou noutra função. Além de enxugar o código, deixa mais portável e encadeia as melhorias. Afinal de contas, quando você melhora uma função, seja na correção de bugs ou aumentando seu desempenho com alguma coisa nova que você aprendeu, todas as funções que fazem uso desta recém redigida, obterá seus benefícios.

Importante fazer o controle de versões no desenvolvimento não só de projetos mas também de suas funções. Lembre-se do ditado popular: ‘a única coisa constante é a mundança’.
‘Versionar’  suas funções vai evitar de ter que tenha que analisar todo o código para saber se ela é realmente a última que você redigiu.

Ajax, inserindo CSS e Javascript

A idéia aqui é inserir na sua página via Ajax conteúdo Javascript CSS.

O código é simples, serão injetados no Head da página os objetos criados dinamicamente.

OK, então… vamos começar do retorno do Ajax. Presumo que você já tenha enviado sua requisição e que você saiba catar do responseText o texto CSS e/ou Javascript.

Feito isso, inserir da seguinte forma:

var etiquetaScript = document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(etiquetaScript);
etiquetaScript.text = javascript;
var etiquetaStyle = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(etiquetaStyle);
if(navegador == 0)
{  var conteudoCSS=css.split("{");
   var ultimaEtiquetaStyle=document.styleSheets[document.styleSheets.length-1];
   ultimaEtiquetaStyle.addRule(conteudoCSS[0], "{"+conteudoCSS[1]);
}
else
{  var conteudoCSS=document.createTextNode(css);
   etiquetaStyle.appendChild(conteudoCSS);
}

Vale lembrar que para quem usa a biblioteca de javascript, prototype, pode se utilizar métodos próprios para isso (String.extractScripts, String.evalScripts).

Modelo de XML para passar por ajax o conteúdo do css e javascript:

<?xml version='1.0' encoding='ISO-8859-1'?>
<code>
<javascript>
  <![CDATA[function trocaClasse(){ document.body.className = "bgcRoxo"; }]]>
</javascript>
<css><![CDATA[.bgcRoxo { background-color:#FF0000; }]]></css>
</code>

Consultado em:

http://www.formatoweb.com.ar/ajax/ejecutar_codigo_javascript_css_cargado_ajax.php

Ajax, evitando cache

Para evitar cache:
 

Abrindo…

Sou leitor de blog.
Criei agora este no intuito de substituir um wiki que tenho como biblioteca de código.

A idéia do blog é me forçar a postar minhas coisas desenvolvidas ou descobertas na net para meu próprio uso posterior. A wiki só me fazia colocar alguma coisa lá depois que eu procurava por algo e não encontrava. Com o blog eu quero pensar assim ‘vou postar alguma coisa hoje’.

Irei colocar aqui alguns códigos que postei na wiki e não vou comentar muito sobre eles.

Se alguém quiser comentar os códigos que irei colocar aqui, fiquem a vontade. Esse é um dos intuitos, colaboração.

Eu já usei Jquery para construir um CRUD mas hoje estou mesmo utilizando prototype e muito raramente utilizo Scrpitaculus.