terça-feira, 11 de setembro de 2007

Entendendo AJAX - Parte 1

AJAX é produto de limpeza??

Não, realmente não se trata de uma produto de limpeza. Ajax não é nada novo, não é uma nova tecnologia também. Ajax é simplesmente uma técnica envolvendo JavaScript e XML. O nome é um acrônimo que significa (Asynchronous JavaScript and XML | JavaScript e XML assíncronos ). Esta técnica tem surtido muito sucesso atualmente entre todos os desenvolvedores WEB, é a grande sensação da onda WEB 2.0 (Oreylli).

Espera, ainda não entendi. Poderia explicar melhor o que AJAX?

Claro, AJAX é uma técnica envolvendo requisições web GET/POST e um objeto chamado XMLHttpRequest. Este objeto permite a realização de requisições HTTP de uma forma bem mais proveitosa. Nos moldes antigos de desenvolvimento quando era necessário carregar informações de uma página a outra usava-se um formulário e o atributo action apontando para um script de alguma tecnologia server-side (PHP,ASP, JSP, ColdFusion,Pearl e etc). Tudo funciona bem dessa maneira, só existe um problema: Tudo é sempre recarregado, perde-se tudo.. a referência aos elementos html, as variáveis JavaScript, propriedades são setadas para o default de quando foram criadas, enfim.. tudo é remetido para esta página server-side, esta faz um processamento e constrói tudo novamente (que sufoco né?). Pois é, usando XMLHttpRequest a coisa muda um pouco de figura, podemos realizar um processamento seletivo de pequenas porções da página, sem a necessidade de submeter tudo, e o melhor.. como o controlador destes eventos é o JavaScript então tudo acontece em tempo de execução, não acontecem Reloads (recarregamentos). Muito bom né? Aposto que agora você deve estar se perguntando o seguinte...

Então é só isso? Porque sempre complicam tanto?

Sim, é só isso sim. Complicam tanto por vários motivos, o primeiro deles é que AJAX é uma onda, uma moda atualmente, parece que o profissional sente-se uns 10 anos mais moderno e mais esperto por dizer bem alto que conhece AJAX. Poucos sabem que essa técnica nasceu com a Microsoft a mais de 8 anos atrás e só estourou hoje porque o Google começou a utilizar largamente em vários de seus serviços como GoogleMaps, GoogleSearch, GMail entre outros. Hoje em dia me deparo com muitos artigos do tipo: "Ajax com PHP, Ajax com Java, com Pearl e etc". Realmente fico sem entender, AJAX serve pra qualquer coisa que possa ser invocada por requisições HTTP, basta entender a técnica e tudo vai dar certo.

Este artigo vai explicar tudo sobre AJAX?

Não, seria muita pretensão querer mostrar tudo sobre AJAX, muito nem depende de um simples tutorial, depende puramente da imaginação do leitor, as possibilidades são infinitas, aliás, usar "bem" JavaScript abre muitas portas e "janelas" se é que você me entende :)
Não se preocupe, todo o básico necessário será abordado por aqui, tentarei ser o mais direto e simples possível.


Legal, e quando será postada a próxima parte deste artigo?

O mais rápido possível, essa primeira parte não tinha nenhuma intensão de ser extensa, até porque não quero ser massante, quero que você aprenda e entenda o básico, que se empolgue com esta técnica tão útil e simples. Aguardo o comentário de vocês. Até a próxima pessoal. Abraços!!

segunda-feira, 10 de setembro de 2007

Mudar Classe CSS através de JavaScript (Cross-Browser, FF&IE Compatible)

Hoje precisei modificar dinamicamente a classe CSS de um elemento da minha página, através de JavaScript e senti que o óbvio neste caso não funcionou muito bem, imaginei que seria simplesmente o seguinte:

- document.getElementById("id").style.class = "NovaClasse";


Talvez seja muita inocência da minha parte em ainda não conhecer o metodo correto, porém realmente tentei da forma como citei acima e pude comprovar que não funciona (rsrs). Depois de uns 5 minutos googling pela net encontrei a solução, assim como mostro abaixo:

- document.getElementById("id").setAttribute("class","Nome_da_class_css");

Testei no FireFox e funcionou perfeitamente. Acreditando que meu problema havia sido resolvido fui testar no Internet Explorer, percebi que este código para o Browser da Microsoft não realiza modificação alguma em meu elemento. Com mais 5 minutos googling descobri que para o Internet Explorer eu precisava implementar a mesma coisa com uma ligeira diferença, no primeiro argumento de SetAttribute eu devo informar className, assim como demonstro abaixo:

- document.getElementById("id").setAttribute("className","Nome_da_class_css");

Fiz o teste é funcionou para o IE, o meu único problema é que agora tenho um código para o IE e outro para o FF, como conseguir um código cross-browser?

Não encontrei um único código compatível com os dois browsers mais famosos, mas contornei com a seguinte função em JavaScript:

function ChangeClass(objAttrib,NameClass)
{
//Tratamento para FF
if ((!document.all)&&(document.getElementById))
{
objAttrib.setAttribute("class",NameClass);
}
//Tratamento para I.E
if ((document.all)&&(document.getElementById)){
objAttrib.setAttribute("className",NameClass);
}
}


A utilização da função acima é bem simples, segue um exemplo:

- ChangeClass(document.getElementById("Nome_Elemento"),"Nome_classe_css");


Essa implementação funcionou perfeitamente para os dois browsers (IE e FF), não testei para Safari, Opera e outros browsers menores, caso alguém faça estes testes peço que postem dizendo o que houve.

Para finalizar gostaria de demonstrar toda colcha de retalhos montada, num único script simples.

<html>
<head>
<title>Exemplo - Mudar Classe CSS com JavaScript</title>
<style>
.estilo1
{
font-family: verdana;
font-size: 14px;
color: blue;
cursor: pointer;
}
.estilo2
{
font-family: Arial;
font-size: 28px;
font-weight: bold;
color: green;
cursor: pointer;
}
</style>
<script>
function ChangeClass(objAttrib,NameClass)
{
//Tratamento para FF
if ((!document.all)&&(document.getElementById))
{
objAttrib.setAttribute("class",NameClass);
}
//Tratamento para I.E
if ((document.all)&&(document.getElementById))
{
objAttrib.setAttribute("className",NameClass);
}
}
</script>
</head>
<body>
<span id="texto" class="estilo1" onclick="ChangeClass(document.getElementById('texto'),'estilo2');">Texto formatado por CSS</span>
</body>
</html>





Bom pessoal, é isso aí.. por hoje é só! Espero ter ajudado!


----
Leonardo Todeschini
Professional Services
OSS/BSS/Software Integration Practice
Alcatel-Lucent S/A (Brazil)
leotodeschini@gmail.com