Provavelmente já todos ouviram falar em AJAX (não o detergente, nem o clube de futebol), e do modo como veio revolucionar a forma como são desenvolvidas e encaradas as aplicações web, independentemente da plataforma utilizada, Php, Asp .Net, J2EE, Ruby, etc.
Ajax Timeline:
- 1997 – IE 4.0 introduces ability to modify the UI via the DOM and client-side script
- 1998, 2000, and 2004 – W3C releases or updates standards on the DOM
- 1999 – Internet Explorer includes XMLHttpRequest
- 2002 – First production Firefox release
- 2004 – Safari 1.2 released with XMLHttpRequest support
- 2004 – Google Maps, GMail, and other popular Web apps demonstrate great UI design with AJAX
- 2005 – Opera 8 released with XMLHttpRequest support
- 2005 – Adaptive Path coins the term AJAX and makes it popular
Apesar da versão 2.0 da .Net Framework suportar chamadas assincronas, foram e continuam a ser desenvolvidas, uma série de frameworks para facilitar o desenvolvimento de aplicações web Ajax enabled, inclusive pela Microsoft com o projecto Atlas.
Mas afinal o que é o AJAX. AJAX é um acrónimo para Asynchronous JavaScript and XML, ou seja chamadas assincronas de JavaScript, e depende da utilização do objecto XMLHttpRequest, o que este objecto permite fazer é efectuar uma chamada assincrona a uma outra página e indicar qual a função de JavaScript que vai tratar a resposta dessa função, deste modo a chamada é feita sem que haja um refresh da página, e torna o interface para o utilizador mais rápido e amigável.
Apesar de todas estas frameworks é sempre interessante saber como funcionam as coisas, vou tentar em linhas gerais explicar de uma forma simples o funcionamento deste tipo de chamadas.
Os passos são os seguintes:
- Criação de uma instancia do objecto XmlHttp
- Indicar qual a função de JavaScript que vai receber a resposta do nosso pedido
- Identificar o tipo de pedido Post ou Get, o url e finalmente se a chamada é assincrona
- Enviar o pedido
Em mais detalhe:
//Cria o objecto que permite fazer a chamada assincrona
var xmlhttp = new ActiveXObject("Microsoft.xmlhttp");
//Nome da função de JavaScript a ser chamada na conclusão do pedido
xmlhttp.onreadystatechange = callbackListener;
//Cria o pedido para o URL especificado e indica que essa chamada é assincrona
xmlhttp.open("POST", url, true);
//Envia o pedido
xmlhttp.send();
O browser envia o pedido para o servidor e se tudo correr bem, a resposta vai ser tratada pela função callbackListener, essa função tem de ter acesso ao objecto xmlhttp, este objecto retorna entre outra informação, o status do pedido e a resposta do servidor, esta resposta pode vir em formato Html ou Xml, dependendo do Content Type definido.
// Request complete
if (xmlhttp.readystate == 4)
{
// Request status OK
if (xmlhttp.status == 200)
{
alert(xmlhttp.responseText);
alert(xmlhttp.responseXML);
}
else
{
alert("There was a problem retrieving the data:\n" + request.statusText);
}
Um dos aspectos mais interessante é o facto da resposta do servidor poder vir em XML, uma vez que em JavaScript é possível seleccionar nós do Xml e tornar a aplicação mais interessante, como por exemplo indicar quais os controlos da página cujos valores tem de ser alterados e os valores que esses controlos vão ter.
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/xml";
StringBuilder builder = new StringBuilder();
builder.Append("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>");
builder.Append("<response>");
builder.Append("<control>date</control>");
builder.AppendFormat("<value>{0}</value>", DateTime.Now.ToString());
builder.Append("</response>");
context.Response.Write(builder.ToString());
}
var response = responseXml.documentElement;
if (response != null)
{
var value = response.getElementsByTagName('value')[0].firstChild.data;
var control = response.getElementsByTagName('control')[0].firstChild.data;
document.getElementById(control).value = value;
}
A este artigo junto um pequeno exemplo em Asp .Net (VS2005), que deverá ser o suficiente para começar a experimentar esta técnica, é um pouco mais elaborado, uma vez que os pedidos feitos assincronamente são baseados num objecto JavaScript, a vantagem desta abordagem é que este objecto pode ser reutilizado em outras situações.
Demo Project
Espero que este artigo seja util, e que possa ajudar quem vai começar a usar Ajax nas suas aplicações.
Recursos
Ajax .Net
Microsoft Atlas
Ajax
Ajax Frameworks