jQuery – AJAX
14/05/2012 Deixe um comentário
Uma das maiores preocupações nas páginas e sistemas web hoje em dia é o desempenho. Com o desenvolvimento de sites mais elaborado, o tempo de carga do mesmo cresce em proporção maior que os avanços da tecnologia envolvida.
Uma das soluções foi o AJAX. Usando requisições assíncronas (basicamente acessando o servidor sem recarregar a página), o tempo de carregamento diminui consideravelmente, já que apenas uma porção da página necessita ser recarregada. Para criar uma função AJAX, bastava fazer o seguinte:
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();
}
Obviamente, uma tarefa custosa, comparável à memorização do DOCTYPE (saiba mais). Depois disso, a equipe de desenvolvimento do jQuery decidiu facilitar as coisas. Para fazer uma requisição jQuery, basta :
$.ajax({
url: ‘pagina.php’, // não precisa ser php. Pode ser qualquer arquivo web válido
success: function(data) {
// o que quiser fazer com ‘data’, que é o retorno da pagina.php
}
});
pagina.php é a página para onde se redirecionará a requisição. data é uma variável que carrega o HTML resultante da requisição. Dentro do bloco function(data) { }, qualquer código JavaScript válido é aceito.
Há também um parâmetro ‘type’ que pode receber valores ‘GET’ ou ‘POST’, dependendo do tipo da requisição. Para saber mais, acesse a página oficial da documentação (em inglês).
Outro parâmetro útil é o ‘cache’. Você pode enviar a opção como ‘false’ para que ele sempre carregue a página mais recente do servidor. Assim, ela estará sempre atualizada.
Bom AJAX para os senhores.
Patrick Villela