Interface Ajax

[KaKarotto]

Oi ^_^

Eu tenho visto que muita gente quebra a cabeça na hora de executar qualquer função ajax. Existem muitos códigos na net e geralmente as pessoas acabam se atrapalhando com eles. Tendo em vista essa dificuldade comum e a falta de códigos prontos em ajax no fórum, resolvi fazer uma implementação de uma "Classe" em Js para executar um Ajax simples.

O arquivo está no fim do post, disponível para download.

A Classe tem 3 propriedades a mais além das 3 conhecidas do ajax, e 2 métodos.

Propriedades

target: Objeto html onde deseja inserir as informações retornadas pelo ajax.

SRH: SetRequestHeaders, é um objeto dos tipos de headers alternativos. (Funciona apenas para metodos "POST")

Ex:

{
 "Content-type":"application/x-www-form-urlencoded",
 "Content-type":"text/html"
 }

loading: Html exibido quando o ajax estiver carregando.

As outras propriedades são as padrões do Ajax. url, method, async.

url: tipo string.

method: tipo string. "GET" definido por padrão.

async: tipo booleano. false definido por padrão.

Todas as propriedades tem valores padrões caso você não defina nenhum.

Métodos

onreadystatechange(): Função para dar mais liberdade ao programador, caso queira modificar o comportamento padrão do ajax.

open(): Executa o ajax.

Na prática

href do link clicado para uma página ajax.php e vai retornar o valor para dentro do html do link.

Esse pequeno script vai pegar os links de um determinado div, e ao clicar em cada um deles, o ajax ai mandar o conteúdo o

var ajax=new $ajax({})
for(
var x in
document.getElementById("caixa").
getElementsByTagName('a')
)
document.getElementById("caixa").
getElementsByTagName('a')[x].onclick=function(){
ajax.target=this
ajax.url=(
"http://edu.110mb.com/ajax.php?sid="+
Math.random()+
"&q="+encodeURI(this.href.split("#")[1])
)
ajax.open()
return false
}

Obs:O exemplo deve ser testado de preferência no ie6 para ver ele rodando, já que o ie6 não tem restrições de segurança nesse caso. Talvez o iE7 também seja assim, então teste no iE7 caso não tenha o iE6 instalado.

No url eu usei o math.random para gerar um número grande aleatório e mandar para o servidor evitando a cache, dica que vi da Andréia. EncodeURI é para codificar os dados para que sejam vistos os acentos normalmente. Seja por "POST" ou "GET", o url deve ser setado por meio de query strings, o script vai se encarregar de fazer a conversão.

É isso, eu tenho usado muito espero que para vocês seja útil. Não é para facilitar tudo, mas algumas partes e fazer você ter certeza que o Ajax é completo e vai funcionar.

Deixo os tópicos para críticas e/ou dúvidas de uso dessa classe.

Abraço

ajax.js - Atualizado, mais no próximo post.

ajax.htm

ajax.zip

[KaKarotto]

Atualizado - ajax.js

Mudei o comportamento da funcão chamada onreadystatechange. Antes o prototipo era:

onreadystatechange=function(obj)

Onde obj, parametro definido da função, fazia referencia ao objeto da classe $ajax e

this fazia referência ao objeto nativo ajax do javascript.

Agora é o contrário, a variável definida como parâmetro faz referência ao objeto nativo ajax do javascript e

this faz referência ao objeto da classe $ajax.

Lembrando que o obj é você quem define, pode usar qualquer outro nome. Eu prefiro:

onreadystatechange=function(objAjax)

objAjax é um bom nome para lembrar que é um objeto ajax nativo.

Não foi uma alteração funcional, apenas uma alteração semântica.

Outra coisa, me perguntaram sobre o onreadystatechange da minha classe.

O onreadystatechange da minha classe ($ajax) é apenas para alterar o comportamento padrão ou executar tarefas a mais. Para alterar o comportamento padrão basta retornar false no corpo da sua função:

var iA=new $ajax({})
iA.onreadystatechange=function(objAjax){
if(objAjax.readyState==1)
alert("Carregando....")

if(objAjax.readyState==4)
alert("Objeto carregou")

return false // saindo do comportamento padrão.
}

Aqui o ajax não vai executar nada, como eu saí do comportamento padrão o código só vai mostrar um alert dizendo que o objeto está carregando e outro alert quando estiver carregado. Um código que não faz nada, apenas para ilustrar o uso do onreadystatechange da classe $ajax. Agora, se quiser executar uma ação a mais sem sair do comportamento padrão, basta não retornar nada:

var iA=new $ajax({})
iA.onreadystatechange=function(objAjax){
if(objAjax.readyState==1)
this.target.style.border="10px solid red"

if(objAjax.readyState==4)
this.target.style.border="1px solid green"
}

Nesse código, ações foram acrescentadas sem alterar o comportamento padrão. Então o resultado é: - Quando o objeto nativo ajax estiver carregando, o outro objeto que receberá o conteúdo do ajax (definido anteriormente no target) ficará com uma borda com 10 pixels de largura de cor vermelha e o comportamento padrão vai fazer com que um texto de loading seja exibido. - Quando o objeto nativo ajax estiver carregado, o outro objeto que receberá o conteúdo do ajax (definido anteriormente no target) ficará com uma borda com 1 pixel de largura e de cor verde e o comportamento padrão vai fazer com que o conteúdo texto do ajax seja incluido neste objeto. A intenção da interface é apenas facilitar, respondendo uma dúvida que me perguntaram, você pode usar a interface com sua função ajax. Vou dar um exemplo prático, da forma como mais comumente é usado o ajax:

<div id="conteudo" style="width:200px; height:200px; border:1px solid blue; font:12pt tahoma; color:#336699"></div>
<a href="#" onclick="Ajax('conteudo', 'http://edu.110mb.com/ajax.php?q=Minha QueryString de teste ajax!!!')">Aciona Ajax</a>

function Ajax(div, url){

        var ajax=new $ajax({})
        ajax.loading="<h3>Loading...</h3>"

        ajax.target=document.getElementById(div)
            ajax.url=(
                encodeURI(
                    url + "&sid=" +
                    Math.random()
                )
            )
    
            ajax.onreadystatechange=function(objAjax){
             if(objAjax.readyState==1)
             this.target.style.border="15px solid red"

             if(objAjax.readyState==4)
             this.target.style.border="1px solid orange"
            }
    
        ajax.open()
}

Aqui eu fiz uma função chamada Ajax() que usa a interface para facilitar a vida. Usei também o onreadystatechange da classe pra fixar a idéia dele.

Espero que tenha conseguido responder a maioria das dúvidas.

Por favor usem esse tópico para as dúvidas ok?!

Abraço

[.Andreia.]

Bacaana Kaká, gosto dos seus posts porque você deixa tudo bem explicadinho :)