em Uncategorized

Criando sua própria classe para requisições assíncronas – ajax

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>

Escreva um comentário

Comentário