Sabe esses frameworks javascript que facilitam a nossa vida? Que tem funções, crossbrowsers, prontas para consultas ajax? Então, que tal ver como implementar isso?
E, não, não quero reinventar a roda! Serve mesmo para estudos ou no caso em que não é possível adotar um framework – sim, de vez em quando precisamos implementar algo só com funções nativas do javascript por requisitos do sistema…
Primeiro, criei uma função javascript chamada MyAjaxLoader(). Nela, instancio um objeto que fará as nossas consultas, de uma forma crossbrowser. Esse código, que verifica se existe o ActiveX (browsers IE) ou não, já foi muito explorado em diversos blogs. Indico essa leitura.
O próximo passo é criar uma função load() e adicioná-la a função MyAjadLoader() com a propriedade prototype (não confundir isso com a biblioteca homônima). Essa técnica permite criarmos funções com funções dentro, o que de uma certa forma pode ser abstraído para uma classe.
Essa função recebe dois parâmetros: a url que será requisitada e uma lista de chaves/valor de opções. Nessa lista de chaves/valor estou tratando apenas duas chaves: params, que podem ser os parâmetros a serem passados para a url e onSuccess, a função que será chamada em caso de sucesso na requisição (veja aqui texto sobre como passar funções de callback)
Abaixo, segue um exemplo funcional da classe!
<html>
<head>
<title>Criando sua própria classe para requisição assíncrona (ajax)</title>
<script type="text/javascript">
/**
* classe para requisições assíncronas – código nativo
*/
function MyAjaxLoader() {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != "undefined" ) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false ;
}
}
this.xmlhttp = xmlhttp;
}
/**
* método que recebe a url a ser requisitada e pode receber parâmetros adicionais:
* params: parâmetros da url
* onSuccess: função de callback
*/
MyAjaxLoader.prototype.load = function(url, p) {
//verifica se tem no parâmetro uma chave igual a params; se tiver, concatena com a url
if(p.params)
var myUrl = url + "?" + p.params;
else
var myUrl = url;
//abre a conexão
xmlhttp.open("get", myUrl);
//faz a requisição
xmlhttp.send(null);
var thisMMP = this;
//verifica os estados de transição
xmlhttp.onreadystatechange = function() {
//4 é o final da requisição
if(xmlhttp.readyState==4) {
//erro 404: não existe a url ou houve erro ao requisitar
if(xmlhttp.status==404) {
alert("Erro: url não encontrada");
return;
}
//verifica se tem no parâmetro uma chave igual a onSuccess; se tiver, chama a
//função de callback passando o resultado da requisição
if(p.onSuccess)
p.onSuccess.call(this, xmlhttp.responseText);
}
}
}
var myAjax = new MyAjaxLoader();
myAjax.load("tmp.htm", {params: "id=1&method=x", onSuccess: functionOk});
/* função de callback */
function functionOk(data) {
alert(data);
}
</script>
</head>
<body>
</body>
</html>