08/10/2009Ajax - Entendendo a Tecnologia
Atigo Originalmente publicado no MX Studio em 2007.
Este é o primeiro artigo falando especificamente sobre Ajax do blog, e também é o primeiro de uma seqüência de textos onde eu pretendo explicar Ajax desde a sua concepção mais básica até usos mais elaborados da tecnologia.
Uma coisa que eu tenho percebido navegando na internet é que a maioria dos tutoriais sobre Ajax está fortemente baseada em frameworks que facilitam o trabalho. Eu particularmente não gosto de usar frameworks por dois motivos, um porque eu me sinto sem controle sobre a aplicação que eu estou desenvolvendo, e dois porque eu acho que só se aprende realmente codificando na marra. Nada contra quem usa frameworks, longe disso, mas nesta seqüência de textos eu pretendo ensinar Ajax sem o uso de nenhum framework. Então preparem seu bloco de notas e mãos à obra.
Basicamente existem dois tipos de aplicações hoje em dia, aplicações web e aplicações desktop. Ambas têm suas vantagens e desvantagens. A grande vantagem das aplicações desktop é a velocidade de execução das mesmas, pois rodam localmente no computador do usuário. A grande vantagem das aplicações web é o fato de poderem ser acessadas de qualquer lugar que tenha internet, além de não precisarem ser instaladas na máquina do usuário. O problema das mesmas é a velocidade de execução, que muitas vezes deixa a desejar devido a velocidade das conexões e os temíveis recarregamentos de página.
A promessa do Ajax é unir o poder das aplicações desktop com a flexibilidade das aplicações web, eliminando o recarregamento de página, mas como ele faz isso? Pois bem, sempre que entramos em um site o nosso navegador faz uma requisição de uma página para o servidor, que nos devolve uma nova página remodelada de acordo com a requisição do navegador. Só que por menor que seja a mudança na página, sempre exige um recarregamento da mesma. O Ajax utiliza um objeto javascript (XMLHttp Request) para efetuar suas requisições em segundo plano, sem que o usuário perceba, mudando apenas partes da página sem precisar de recarregamento.
Este objeto XMLHttp request é a base da tecnologia, pois ele é o elo de comunicação entre o servidor e o navegador, o que permite efetuar uma requisição assíncrona (fora do sincronismo normal da página, que não necessita de recarregamento da página), segura, e rápida, pois muda apenas o necessário na página. Quando a requisição é muito grande ele nos permite colocar um pre-loader estilo flash para mostrar ao usuário que os dados estão carregando.
O Ajax está sendo usado em larga escala na web, o Google usa e abusa desta tecnologia em seus sites/aplicações. Um grande exemplo disso é o magnífico Google Maps(http://maps.google.com) e o Gmail(http://www.gmail.com). O futuro da web está no Ajax, pois estamos chegando num ponto onde aplicações web e aplicações desktop estão caminhando cada vez mais juntas, rumo a um novo modelo de programação que revolucionará a informática, e cabe a nós, desenvolvedores, fazer com que esta tecnologia seja cada vez mais difundida.
Por hoje é só, e preparem seus blocos de notas, pois semana que vem começa a parte prática do Ajax.
08/10/2009Ajax II - Criando o Objeto de Requisição
Atigo Originalmente publicado no MX Studio em 2007.
Olá a todos. Neste texto iremos finalmente entrar na parte prática do Ajax, onde ensinarei a criar o objeto de requisição XMLHttp object que é a base de todo sistema ajax. Chega de conversa e vamos ao que interessa.
Antes porém de uma parte mais prática, se faz necessária uma explicação. Os navegadores Microsoft, por serem baseados em JScript, interpretam o objeto de requisição como um ActiveXObject(quem não lembra das janelinhas do IE avisando risco de segurança por causa de scripts), e os outros navegadores, por serem baseados em Javascript, interpretam o objeto como sendo um Objeto do núcleo da linguagem, fazendo com que a gente tenha que testar o tipo de navegador da pessoa para criarmos o objeto de forma que funcione em qualquer navegador compatível com a tecnologia.
Criando o Objeto em navegadores microsoft:
var objetoXMLHttp = false;
try {
objetoXMLHttp= new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
objetoXMLHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e2) {
objetoXMLHttp = false;
}
}
Msxml2.XMLHTTP – Navegadores microsoft mais atuais(IE5+, Jscript 5.0)
Microsoft.XMLHTTP – Navegadores microsoft mais antigos(IE4-)
Os navegadores Microsoft possuem duas versões diferentes do objeto, este código tenta criar primeiramente um objeto do tipo Msxm12.XMLHTTP, que é implanteado pelos navegadores Microsoft mais atuais e é mais comum. Se não obtiver sucesso ele tenta criar um objeto do tipo Microsoft.XMLHTTP, que é implantado por navegadores Microsoft mais antigos, meio raro de se encontrar mas um pouco de compatibilidade não mata ninguém. Caso não obtenha sucesso em nenhuma das tentativas, é sinal que o navegador não é Microsoft, e devemos ciar o objeto de outra forma:
objetoXMLHttp = new XMLHttpRequest();
Esse bloco de código cria o objeto compatível todos os outros navegadores que suportam o mesmo e não são Microsoft.
Agora que você já sabe as diferenças básicas entre o objeto entre os navegadores, vamos criar uma função que nos retorne o objeto compatível com qualquer navegador que suporte o mesmo:
function criarObjetoXMLHTTPRequest() {
var objetoXMLHttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
objetoXMLHttp = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
objetoXMLHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {
objetoXMLHttp = false;
}
}
@else
objetoXMLHttp = false;
@end @*/
if (!objetoXMLHttp && typeof XMLHttpRequest != ‘undefined’) {
try {
objetoXMLHttp = new XMLHttpRequest();
} catch (e) {
objetoXMLHttp = false;
}
}
return objetoXMLHttp;
}
Uma parte do código requer um pouco de atenção extra, o bloco “/*@cc_on”, que ativa o suporte de compilação condicional. O código de compilação condicional deve estar sempre dentro de um comentário, isso permite que navegadores que não suportam compilação condicional possam ignorar esta parte do script, como compilação condicional é recurso exclusivo de JScript, somente navegadores IE irão ler esta parte do código. Isso torna o script compatível com todas as versões do IE que suportam o objeto e evita que navegadores baseados no Gecko possam interromper o script ao tentar criar um objeto existente somente no Internet Explorer.
Queria deixar claro que é necessário um pouco de conhecimento de Javascript para conseguir entender corretamente esta seqüência de textos.
OBS: Tratamento de exceções não é suportado em versões de Jscript inferiores a 5, mas foi usado um try/catch da mesma forma quando é detectada esta versão para evitar erros em navegadores atuais, e navegadores mais antigos irão ignorar o bloco try/catch e criar o objeto corretamente.
Por hoje é só, num próximo texto eu continuo no Ajax.
Abraço a todos
Anderson Triacca
Estudante Universitário de Design Gráfico pela Universidade de Caxias do Sul, certificado em desenvolvimento Ajax pelo grupo Processor Alfamídia de Porto Alegre e acima de tudo Desenvolvedor Web.
