Terça-feira, 01 de agosto de 2006 às 11h06

RetrieveData, uma função AJAX genérica

Faça o curso: jQuery na Prática

Esta á um função genérica para quem quer trabalhar com AJAX. Para quem não sabe, AJAX é uma técnica que permite que se faça requisições à um servidor através de código JavaScript e, consequentemente, adicionando a possibilidade de fazermos com que estas requisições sejam disparadas por qualquer gatilho que normalmente utilizamos (clique, mouseover, etc...).

Para utilizá-la, deve-se usar uma variável chamada http_request "global", ou seja, ela deve aparecer também fora da função. Desta forma, a função definida como função de retorno (parâmetro returnFunction) pode se utilizar livremente das propriedades do objeto http_request, tais como*:

readyState - O código do status da requisição. Quando este código é 4 é que a requisição está pronta.

status - o código númerico de status retornado pelo servidor. Se você enviar uma requisição para um script que não existe, por exemplo, este código será 404 (página não encontrada).

statusText - O texto de status retornado pelo servidor.

responseText - O texto retornado pelo script server-side.

responseXML - O XML retornado pelo script server-side.

* Para maiores detalhes sobre propriedades do objeto XMLHTTPRequest, consulte o Mozilla Developer Center (http://developer.mozilla.org/).

Os parâmetros para esta função são os seguintes:

string requestURL: A URL do script server-side para onde será enviada a requisição.

string requestMethod: 'POST' ou 'GET', o método pelo qual serão enviadas os dados para o script.

boolean requestAsynchronous: dependendo se desejamos que esta chamada seja assíncrona(true) ou síncrona (false).

string requestData: Os dados que serão enviados para o script server-side, em pares chave=valor.

string returnFunction: o nome da função ou uma função inteira "on the fly" que será executada após o retorno do servidor.

Exemplo de uso (com função "on the fly"):

http_request = false;

retrieveData('http://www.meusite.com.br/teste.php', 'POST', true, 'param1=val1&param2=val2', 'function() {if (http_request.readyState == 4){if(http_request.status == 200){alert(http_request.responseText);}}}');


A função retrieveData:

function retrieveData(requestURL, requestMethod, requestAsynchronous, requestData, returnFunction)
{
    /**************************************************************************************************
   
    (C) 2006 by Galvão Desenvolvimento de Sistemas
    Esta função é protegida por uma licença BSD. Esta licença pode ser visualizada em: http://www.galvao.eti.br/licenca/bsd/

    ***************************************************************************************************/

    // Inicializa a variável http_request como falsa, ou seja, na dúvida presumimos que não conseguiremos realizar uma requisição

    http_request = false;

    // Testes de compatibilidades de browser
  
    if (window.XMLHttpRequest) // Mozilla, Firefox, SeaMonkey, Safari
    {
        http_request = new XMLHttpRequest();
       
        if (http_request.overrideMimeType) // Definimos o cabeçalho da resposta como sendo text/xml, pois algumas versões dos browsers Mozilla exigem este mimetype
        {
            http_request.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject) // Internet Explorer
    {
        try
        {
            http_request = new ActiveXObject("Msxml2.XMLHTTP") // Versão 6
        }
        catch(e)
        {
            try
            {
                http_request = new ActiveXObject('Microsoft.XMLHTTP')  // Versão 5.5
            }
            catch(e)
            {
            }
        }
    }
   
    if (!http_request) // http_request continua sendo false, ou seja, não conseguimos implementar nenhum dos casos acima
    {
        alert('Não foi possível processar a requisição HTTP.');
    }
   
    // Usamos um eval para executar a função passada como returnFunction

    eval('http_request.onreadystatechange = ' + returnFunction + ';');

    // Abrimos a requisição, usando os parâmetros passados para a função

    http_request.open(requestMethod, requestURL, requestAsynchronous);

    // Setamos o content-type da requisição. Este content-type é obrigatório quando estamos postando dados de um form e não faz diferença em caso contrário

    http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // Enviamos a requisição com os dados

    http_request.send(requestData);
}

Nenhum comentário até agora

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Patrocínio:
Sobre o Autor
Er Galvão Abbott trabalha há mais de dez anos com programação de websites e sistemas corporativos com interface web. Autodidata, teve seu primeiro contato com a linguagem HTML em 1995, quando a internet estreava no Brasil. Atualmente, além de lecionar em diversos cursos, tem se dedicado ao desenvolvimento de sistemas baseados na web, tendo nas linguagens PHP, Perl e JavaScript suas principais paixões.

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.