Ajax.Class

[KaKarotto]

E aí galera ;)

Resolvi compartilhar com vocês uma classe que fiz para manipulação bem simples em Ajax. Como é uma coisa muito procurada, acho que vale a pena oferecer mais uma opção, além das já existentes no fórum.

Essa classe é uma melhora de uma interface que eu havia feito e a intenção dessa classe a princípio é ser o menos verbosa, o mais simples de se usar possível.

Portanto ela tem poucos métodos, apenas 5.

Essa classe gera um objeto com apenas um método, o método Lite, e este método vai retornar um dos 5 métodos existentes na classe.

Apenas 4 dos métodos serão os mais usados, um deles descreverei no final a sua funcionalidade.

Existem dois métodos Controllers e dois métodos Executioners, você só precisará usar um de cada. Um método Controller e um método Executioners, a escolha de qual será sua.

Controllers

:sucess ( function(resposta) )

contexto this: objeto ajax nativo.

Método simples onde você passa uma função que será executada quando o ajax estiver pronto.

A função passada será chamada pela classe passando a resposta do ajax como parâmetro.

Uso:

var ajax = new Ajax.Class

 ajax.Lite(':sucess')(function(resposta){
     document.getElementById('conteudo').innerHTML = resposta
 })

:state( function(estado, resposta) ) contexto this: objeto ajax nativo. Método simples onde você passa uma função que será executada 4 vezes, que são os quatro estados do ajax: 1 - Ajax configurado 2 - Ajax enviado 3 - Resposta sendo processada 4 - Resposta pronta A função passada tem como parâmetros uma variável para o estado do ajax e uma variável que guarda o valor da resposta do ajax. O nome dos parâmetros são livres, podendo ser mudado. Os mais usados são os estados 3 e 4. Para mostrar uma mensagem de carregamento e para mostrar o produto final.

Uso:

var ajax = new Ajax.Class

  ajax.Lite(':state')(function(state, response){
     if(state == 3)
         lista.innerHTML = "<li>Aguarde, carregando...</li>"
     else if(state == 4)
         lista.innerHTML = response                        
 })

Estes são os métodos controllers, e não executam o ajax em si, mas configuram como o ajax deve se comportar de acordo com a sua necessidade. Os métodos executores é que farão a requisição propriamente dita: Executioners

:get( String url ) Este método recebe uma string, contendo a url da requisição. A url pode ser uma QueryString.

Uso:

var ajax = new Ajax.Class
  ajax.Lite(':get')('/includes/respose.php?nome=Eduardo Ottaviani')

:post( String url, Json headers ) O método post é quase igual ao método get, porém ele vai enviar os dados da requisição na forma post e tem como parâmetro opcional um json contendo os headers da requisição. Os headers são um json, contendo o um nome e um valor. A url pode ser uma QueryString.

Uso:

var ajax = new Ajax.Class
   var param = 'nome=Eduardo Ottaviani&idade=25'

 ajax.Lite(':post')('page.htm?' + param, { 
     'encoding' : 'ISO-8859-1',
     'Content-length' : param.length
 })

Existe ainda um método Setter como eu havia dito anteriormente, que serve apenas para deixar a classe mais dinâmica, dando uma opção para setar o valor da requisição assíncrona em true ou false. Uso:

var ajax = new Ajax.Class
     ajax.Lite(':async')(false)

O recomendado é deixar padrão, que é true.

Esta é mais uma solução para facilitar o uso do Ajax de forma bem simples.

Anexei um zip contendo um html que demonstra de forma prática o uso da classe.

Recomendo também outras implementações de ajax:

Classe Ajax: Jonathan Queiroz

http://scriptbrasil.com.br/forum/index.php...mp;#entry576154

Interface Ajax: KaKarotto

http://scriptbrasil.com.br/forum/index.php?showtopic=130048

Ajax.Class

Autor: Eduardo Ottaviani

Versão: 0.1

Ajax.Class.zip

[Jonathan Queiroz]

Excentente post !

Gostei muito da classe, a utilização é simples.

Só tenho uma pequena sugestão: acho que seria interessante modificá-la para que pudesse ser utilizado o "state" e o "sucess" ao mesmo tempo. Na maioria dos casos nem faz muito sentido (se quiser utilizar o "sucess", basta verificar se o estado é 4 no "state").

Mas a solução desse problema (criar variáveis internas para armazenar as duas funções ["onsucess" e "onstatechange"] e chamá-las no onreadystatechange padrão do xmlhttp) ajudaria a solucionar outro pequeno problema: a função state com readyState = 1 ocorre duas vezes.

Na verdade isso acontece porque o onreadystatechange foi definido antes de se chamar o método open. O problema é que o método open chama a função onreadystatechange com readyState=1 (se ela existir, e esse é o caso) e o método send chama todos os 4 estados (repetindo o primeiro). Mas não é nada que venha a causar grandes problemas.

Também tenho uma dúvida: vi que na sua classe há o uso do método call para chamar funções. Pesquisei um pouco, mas não achei nada que falasse sobre os argumentos passados para a função "call".

Após alguns testes percebi que os valores do segundo argumento em diante são passados para a função como parâmetros, mas não consegui descobrir o que é o primeiro parâmetro. Na sua classe você utilizou o objeto "singleton", que é o próprio objeto xmlhttp. Você tem algum link que fale sobre o método call ? Gostaria de estudar mais sobre ele.

Enfim, gostei muito da sua classe. Parabéns !

[KaKarotto]

Obrigado Jonathan!!

Gostei muito do seu comentário e da sua classe também, eu vi como implementou a fila para múltiplas requisições, planejo futuramente fazer o mesmo nessa classe aqui. =P

Quanto ao método sucess, ele é apenas uma simplificação do state, para uma usagem rápida, coisa simples. Mas não descarto estender a classe para métodos mais complexos, por isso fiz esse esquema do método Lite, que são apenas funções mais simples...

Agora os métodos Call e Apply.

São muito muito úteis. Uso bastante os dois. O apply utilizo muito para herança de classes.

Eles funcionam assim.

funcao.call ( escopo, argumento1, argumento2, argumento3... )

A primeira opção é o escopo que deseja que a função execute.

funcao.apply(escopo, [ argumento1, argumento2, argumento3 ...] )

Parece besteira, mas em MUITOS casos é necessário o uso do call. O apply geralmente é usado quando você tem um array e por algum motivo precisa passar cada elemento do array como argumento de uma função. Exemplo de call:

var fn1 = function(a, b, c, d, e){        
    alert(this.nome)    
    alert(b)            
}

Se eu executar essa fn1, ela vai alertar um undefined no primeiro alert, porque no escopo atual dela, não existe a propriedade this.nome. Então dessa forma, a função fica bem genérica. Posso então usar o call para passar um escopo para ela:

var objeto = {
    nome : "Eduardo Ottaviani",
    sexo : "Sempre"
}
fn1.call(objeto, 1, 2, 3, 4, 5 )

Agora sim, ela é executada no escopo do "objeto", vai alertar meu nome e vai alertar o argumento b que vale 2. No apply é a mesma coisa, só que passo um array com os argumentos:

fn1.apply(objeto, [1, 2, 3, 4, 5] )

Repare que o call tem infinitos parâmetros. Já o apply tem apenas dois, um escopo e o segundo um array.

Os dois ali em cima darão o mesmo resultado.

Referências:

Onde aprendi primeiramente: http://juliogreff.net/funcoes-em-diferentes-escopos/

Mozilla Developer Center - Métodos Call e Apply:

https://developer.mozilla.org/en/Core_JavaS...s:Function:call

https://developer.mozilla.org/en/Core_JavaS.../Function/apply

Abraços o/

[Jonathan Queiroz]

Valeu, cara !

Agora entendi.

[Kiver Vinicius]

ótimo script kakaroto, vamos ver se soluciona meu problema com o ff, pois o meu quando usava passar os valores via getElementId().value, no ff nunca pegava!

vlw

[Kiver Vinicius]

ótimo script kakaroto, vamos ver se soluciona meu problema com o ff, pois o meu quando usava passar os valores via getElementId().value, no ff nunca pegava!

vlw

Mesmo assim não consigo passar dados via get... toda vez q vou pegar o valor com document.getElementId da erro nos outros navegadores, só no ie funciona

[KaKarotto]

O que é esse campo cpf ? é um input text ?

Tem algum outro campo que tem o mesmo ID ?

Posta seu html pra gente ver o que acontece.