Ajax: Fácil e Eficiente com Prototype

Prototype

Antes de mais nada, gostaria de dizer que eu sou um fã assumido do framework prototype em prol de um código mais limpo e mais eficiênte sem recorrer a filas de requisição entre outros, e ainda pelo tamanho no framework que é baseado em alguns kb´s.

Um dos grandes atrativos do prototype é a forma como ele lida com as situações envolvendo Ajax, por partes vamos ao que interessa:

1 – Básico

Nada mais que o arquivo prototype.js que pode se baixado no site oficial, clicando aqui.

Ai basta inserir o código na página:

<script src=“prototype.js” type=“text/javascript”></script>

2 -Na prática

Basicamente funciona assim, ele possui um tratamento de erros semelhante ao try e catch (uauuu), possui os métodos base que são Request e Updater e mais uma penca de métodos para auxilio em situações mais complexas.

Ao que interessa, a chamada do método de requisição fica assim:

new Ajax.Request('exemplo.php', { method:'get' });

É isso ai. Mais como assim, pera lá.

Neste caso ele cria uma nova requisição utilizando o método Resquest da “classe” Ajax do prototype, a URL a ser requisitada é exemplo.php, e o método varia entre GET e POST, dependendo das suas preferências.

Logíco que o que foi mostrado assim é apenas a requisição, então nada será impresso ou alterado apenas foi aberta uma requisição a página exemplo.php, então vamos para a parte legal:

new Ajax.Request('exemplo.php',
{
method:'get',
onSuccess:function(transport){
var req = transport.responseText || "Ixi deu não";

// Variável req contém a resposta de exemplo.php
// Agora se trabalha da forma que quiser com
// os dados que recebeu
// Lembrando que no prototype
// document.getElementById('a') é o mesmo que $('a')
// No caso de mesmo assim o req retornar algum erro
// o tratamento com || (ou) é realizado de sua escolha.
},
onFailure:function(){

// Erro em algum momento na requisição.
// Seria interessante tratar o erro aqui.
}
});

Falando sério, é brilhante, onSuccess seria “Deu certo e agora” ou onFailure “fiz m**** e agora”, é possível tambem trabalharmos em cim do responseXML ao invés do responseText como usamos no exemplo acima.

3 – Passando argumentos, GET ou POST

Simples, abaixo da linha
method:'get',

Insira:
parameters: {x: '10', y: '18'},

Isso siginifica exemplo.php?x=10&y=18, mais uma vez, simples.

Ficando assim:

new Ajax.Request('exemplo.php',
{
method:'get',
parameters: {x: '10', y: '18'},

onSuccess:function(transport){
var req = transport.responseText || "Ixi deu não";
// Minha ação de sucesso
},
onFailure:function(){
// Meu Erro
}
});

Ahh mais meu formulário tem tantos campos … o jesus, o prototype simplifica isso para você menino chato.

Em parametres ao invés de passar todos os campos do formulário, utilize:

parameters: $('id_do_formulário').serialize(true)

… sendo assim ele serializa todos os campos do forumário e já passa como parametro, uma mão na roda.

4 – Ajax.Updater

Semelhante ao Ajax.Response com a única diferença que com ele você ja passa como parametro a ID da tag HTML que você deseja preencher, sendo assim facilita muito sua vida pois ele recria as tags evitando conflitos de navegadores.

Exemplo:

new Ajax.Updater('minha_id', 'exemplo.php', {
method: 'get',
insertion: Insertion.Top
});

O parametro insertion é nossa única novidade, mais é coisa simples, você deverá determinar se o elemento será inserido como primeiro item da tag informada ou será o último (Bottom).

5 – Ajax.PeriodicalUpdater

Sabe aquela situação chata onde você tem que criar uma situação onde de 10 em 10 segundos tem que requisitar algumas informações para atualizar determinado lugar ?

Então, Ajax.PeriodicalUpdater nele:

new Ajax.PeriodicalUpdater('products', 'exemplo.php',
{
method:'get'
insertion: Insertion.Top,
frequency: 2,
decay: 2

});

Frequência ? hmm tempo em segundos que ocorrerá as requisições, Decay ? Decay ? eita, decay é o tempo também em segundos que será multiplicado pela frequencia caso já esteja acontecendo uma requisição para não sobrecarregar o servidor.

6 – Finalizando

Para finalizar gostaria de ressaltar que existem vários outros frameworks em javascript muito legais como o Mootools, Dojo, jQuery, depende muito da sua necessidade, eu prefiro o prototype e utilizo muito o Ajax.Updater. Lembrando também que o que foi dito aqui é apenas o básico dos recursos que o prototype suporta.

Obs: Esqueci de mencionar que o tratamento de erros não é obrigatório.

Obs: No AjaxUpdater o tratamento de erros deverá ser feito através de dos parametros success: “deu certo”, failure: “deu errado” após aquele nosso velho conhecido method:”get”.

7 – Links Externos

Download do Prototype
Introdução ao Ajax (No site oficial do prototype)
Api do Prototype


14 Comentários on “Ajax: Fácil e Eficiente com Prototype”

  1. Bernardo Cruz disse:

    Olá, voce poderia me ajudar numa dúvida?
    Gostaria de saber se é possível pegar o “readyState == 1” ou alguma propriedade/função que simule, para poder gerar o “Carregando”.

    Agradeço a atenção.

    Atenciosamente, Bernardo Cruz

  2. Bernardo Cruz disse:

    Bom, consegui descobrir, é a propriedade onCreate…
    Muito bom este artigo.

  3. Opa valeu, ia responder agora, mais tambem existe a possibilida de tratar no State mais sem utilizar if e else entre o 1 e o 4 senão ele ele trava no loading, mais ou menos assim, experiência propria.🙂

  4. Rodrigo Gregorio disse:

    Valew vou usar suas dicas do Ajax.PeriodicalUpdater pois vai ficar muito mais profi do que usar um iframe e refresh.

    Valew!

  5. Leandro disse:

    Grande Jonathan… to com uma duvida, vc me recomendaria usar o Ajax.Updater para os menus do meu site? o problema é q ele nao mantem histórico na pagina de navegaçãp, vc sabe como contornar isso?

    abraços

  6. Opa,

    Se eu entendi voce deseja gerenciar o conteudo de cada link atraves do Ajax, cheguei a fazer isso uma vez (www.soulvibes.com.br), eh muito interessante e ao mesmo complicado pelo lance do historico, nem sempre pelo botao de voltar e sim pela indexacao das paginas (ate mesmo no google).

    Vamos la,

    Uma solucao interessante para o botao voltar seria criar uma variavel tipo um buffer, para salvar sempre as paginas anteriores daquele usuario, e o botao de voltar utilizaria elas, mas como ele iria voltar se a pagina nao existe ?

    Ai que vem o lance interessante, fazer com que as paginas sejem acessiveis quando chamadas diretamente, voce pode fazer isso usando recursos com XML de apoio, criando o conteudo delas em arquivos XML podendo ser acessadas diretamente via Ajax ou requisitadas quando uma pagina eh solicita via URL.

    Outra solucao do historico, seria apenas armazenar o nome da pagina em questao (solicitada) e ficar gerenciando elas com algum tipo de include (como no php).

    : ) nao sei se ajudou, mais tentei.

    ; )

  7. Julio disse:

    muito maneiro!
    hehehehe decay, decay, decay….
    eu fiquei pensando assim quando fui ver a api …
    rsrs
    ate

  8. Julio disse:

    Fala doido!
    Cara, eu estou pensando desde de manhã em como resolver uma parada aqui usando prototype… olha so…

    imagine:
    1- lembra da tag Marquee ? eu sei eu sei… não se usa marquee e bla bla… mas eu tenho que usa-la… então, na minha camada de visão (uso freemarquer) tem uma chamada logo no inicio assim :

    ajaxUpdaterMessages(‘mensagens’,”);

    ou seja: mensagens é um id de uma div que vou mostrar abaixo e essa url aí vai montar uma lista pra mim…

    bom…

    aí tem o marquee:

     

    pronto! acabou a camada de visão…

    agora o prototype vai entrar em ação:
    veja como fiz:

    function ajaxUpdaterMessages(elementId,url){
    divId = “div_” + elementId;
    new Ajax.PeriodicalUpdater(divId, url ,{
    method: ‘get’, frequency: 20, decay: 2
    });
    }

    e quer saber? funciona!! ou melhor, funciona ate certo ponto…

    imagine que minha lista retornada da url seja uma lista com 10 mensagens, por exemplo, minha lista guarda objetos do tipo String como “OBINA” , “JOSIEL”, “DIEGO TARDELI” , “EDMUNDO” , “DODO” , “ALFINETE” e “PERIVALDO”.

    percebe-se então uma lista com 7 elementos… daí ocorre que (ATENÇÃO AGORA!!! AGORA QUE É O PROBLEMA!!!) quando esta passando DODO no marquee e ainda falta “ALFINETE” E “PERIVALDO”, uma nova requisição é feita e perde-se o marquee…
    eu queria que todos os elementos deslizem no marquee ate o final… e quando minha url retornar mais de 20 elementos ? será que consigo mostrar os 20 elementos antes da proxima requisição acabar com tudo ??
    como poderia resolver isso ? tem alguma ideia ?
    valeu amigo!!!

  9. Julio disse:

    putz corrigindo a chamada da função logo no inicio:

    ajaxUpdaterMessages(‘mensagens’,”);

  10. Julio disse:

    po… o editor taq comendo…
    a chamada é assim ?
    ajaxUpdaterMessages(’mensagens’,’url’);

  11. Pedro disse:

    Muito bom seu artigo amigo, mas estou iniciando no ajax e queria saber como eu faço extamente para mostrar os dados, quero fazer o processamento em uma pagina e mostrar os dados em uma div na pagina de onde veio a solicitação, espero que tenha compreendido.. Obrigado

  12. Rafael disse:

    Ai galera. Tenho uma tabela onde é listado dados vindo do DB. Ao inserir um novo dado quero atualizar a tabela ou a pagina. Sem aquele Refresh xato. Como faço isso?

  13. Daniel Carloni disse:

    Cara eu to tentando passar um parametro & não vai, porque ?

    new Ajax.Request(‘request.php?id=123&nome=joana’,

    o request recebe a url como request.php?id=123 e não pega o depois do &
    para funcionar vou ter que encriptar a url e desencriptar no request mais porque isso ?

    abraço

  14. Daniel Carloni disse:

    agora que eu vi no post parameters: {x: ’10’, y: ’18’}…

    estou a 3 horas tentando achar o error aqui no script e vejo que o prototype não armazena o valor da requisição em um array

    olha vc mesmo ai tenta acrescentar num array

    array = new Array();

    array.push(req);

    alert(array.length);

    não vai ser acrescentado nada, vai ficar sempre zero e percebi tambem que se vc der um document.write no valor da requisição, os outros document.write abaixo desse fora da requisição nao vai funcionar,não gosto de javascript por causa disso sempre tem detalhe

    mais vc manja como armazenar em um array o valor da requisição ?


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s