jQuery – AJAX

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