Ájax
A razão mais convincente para usar uma estrutura JavaScript é padronizar as solicitações Ajax entre navegadores. Uma solicitação Ajax é uma solicitação HTTP assíncrona que envia uma solicitação para um script do lado do servidor e, em seguida, obtém um resultado de resposta, como dados em XML, JSON, HTML ou formato de texto simples. A maioria das estruturas JavaScript possui algum tipo de objeto de solicitação Ajax que aceita uma série de opções como parâmetros. Essas opções incluem funções de retorno de chamada que são chamadas quando uma resposta é recebida do servidor web. As solicitações Ajax para ExtJS, MooTools e Prototype têm a seguinte aparência:
Listagem 11: Solicitação Ajax em uma biblioteca ExtJS
Ext.Ajax.request({
url: 'servidor_script.php',
parâmetros: {
nome1: 'valor1',
nome2: 'valor2'
},
método: 'POST',
sucesso: function(transporte) {
alerta(transporte.responseText);
}
});
ExtJS aceita um parâmetro, incluindo campos como url, parâmetros, método e função de processamento de sucesso. O campo url contém o endereço do script do lado do servidor, que é chamado pelas solicitações Ajax. O próprio Params é um objeto que consiste em pares chave/valor, que são então passados para o servidor. O campo do método possui dois valores opcionais: GET ou POST, e o padrão é o método post. O último campo é sucesso, que é chamado depois que o servidor obtém uma resposta bem-sucedida. Neste exemplo, assume-se que o servidor retorna texto simples, e esse texto é apresentado ao usuário por meio do método alert().
A seguir, vamos explorar mais detalhadamente as solicitações Ajax no MooTools.
Listagem 12: Solicitação Ajax no MooTools
nova solicitação ({
url: 'servidor-script.php',
dados: {
nome1: 'valor1',
nome2: 'valor2'
},
método: 'post',
onComplete: function(resposta) {
alerta(resposta);
}
}).enviar();
Como você pode ver, MooTools é muito semelhante ao ExtJS. Você notará que as variáveis são passadas pelo campo de dados e os campos de método precisam estar em letras minúsculas. Além disso, diferentemente da função manipuladora de sucesso, MooTools usa a função onComplete. Finalmente, ao contrário do ExtJS, o MooTools realmente envia a solicitação usando a função Request send().
Finalmente, vejamos as diferenças óbvias entre Prototype.
Listagem 13: Solicitação Ajax no Protótipo
novo Ajax.Request('server-script.php', {
parâmetros: {
nome1: 'valor1',
nome2: 'valor2'
},
método: 'post',
onSuccess: function(transporte) {
alerta(transporte.responseText);
}
});
Veja, o Prototype funciona da mesma maneira, mas com pequenas diferenças de sintaxe. Para começar, o protótipo do objeto Request aceita dois parâmetros para serem passados ao construtor. O primeiro parâmetro é a URL para a qual enviar a solicitação, como você viu nos dois exemplos anteriores, e o segundo parâmetro é um objeto que contém as opções para cada solicitação Ajax. Obviamente, o URl é passado como um parâmetro separado e não está na lista de opções. Além disso, vale ressaltar que, diferentemente do MooTools, o construtor do objeto Prototype envia a requisição implicitamente, portanto não há necessidade de chamar nenhum método para acionar a requisição HTTP.
A maioria dos frameworks JavaScript suportam Ajax além do que mencionei aqui. Algumas melhorias notáveis incluem a atualização automática de elementos ao receber uma resposta, sem a necessidade de quaisquer funções especiais onSuccess. Algumas bibliotecas possuem funcionalidade de preenchimento automático pré-construída, como você pode ver no mecanismo de pesquisa Google, que fornece algumas sugestões de consulta enquanto você digita.
Nos capítulos seguintes, você aprenderá sobre as melhorias na experiência do usuário (UE) que as estruturas JavaScript trazem para os desenvolvedores web.
Endereço de reimpressão: http://www.denisdeng.com/?p=729
Endereço original: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html