Aí, galerinha.
Eu sei que, assim como eu, bilhões e bilhões de pessoas estão usufruindo da função que o Micox fez pra usar ajax. Realmente ela é muito simples, e serve em quase todas as ocasiões. Infelizmente não conseguíamos usá-la com o método POST, mas a alteração é muito simples e nós mesmos podemos fazê-la sem a ajuda dos nossos pais. Então, sem enrolar muito, vamos às alterações.

Primeiramente eu criei uma função auxiliar chamada camposForm(nome_form). Essa função é chamada pela minha (ou nossa) função ajaxPost, que é a irmãzinha da ajaxGet, do Micox.

camposForm() recebe o nome de um formulário qualquer da página e retorna um valor assim var1=valor1&var2=valor2. O formato precisa ser assim, pois ajaxPost vai precisar dela.

CODE
function camposForm(nomeForm)
{
/**************************************************
* Autor: José Cláudio Medeiros de Lima
* Data: 17/12/2007
* Objetivos: Pega todos os campos de um formulário, seus valores
      e junta tudo em um formato de querystring,
      por exemplo: var1=valor1var2=valor2
* Parâmetros: nomeForm - O nome do formulário qualquer.
**************************************************/
var buff = [];
var contador = 0; //viabiliza a contagem de laços do for,  
      //pois sem ele dá "undefined" nos checkboxes
      //ou radiobuttons que não estão marcados

for (i=0;i<nomeForm.length;i++)
{
  campo = nomeForm.elements[i];

  if(campo.type=="checkbox" || campo.type=="radio")
  {
   if(campo.checked)
   {
    buff[contador] = campo.name + "=" + campo.value;
    contador ++; //incrementa 1 ao contador
   }
  }
  else
  {
   buff[contador] = nomeForm.elements[i].name + "=" + nomeForm.elements[i].value;
   contador++;
  }
}
return buff.join("&");
}


Agora que já criamos essa função, vamos às alterações na função principal.

É bom deixar claro que a função é IDÊNTICA à original. Idêntica mesmo. Eu não retirei nada dela, nem as funções que não servem pra ela. Tá tudo lá. Eu só alterei algumas coisas pra funcionar com POST.
As alterações que fiz estão em vermelho

CODE
function ajaxPost(nome_form,elemento_retorno,exibe_carregando){
/******
* ajaxPost - Coloca o retorno de uma url em um elemento qualquer
* Use a vontade mas deixe os créditos. Dúvidas, me mande um email.
* Versão: 2.0 - 17/12/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
*  Modificada por: José Cláudio Medeiros de Lima - klawdyo@gmail.com
* Parametros:
* nome_form: string; elemento_retorno: object||string; exibe_carregando:boolean
* - Informe o nome do formulário no primeiro parâmetro. A função chama a camposForm(), e pega todos os campos do formulário e os seus respectivos valores e envia tudo pelo método POST para o valor definido no "action" do formulário.
  
  Exemplo de uso:
   <form action="?teste" id="formulario" name="formulario"
    onSubmit="ajaxPost(this,'nome_elemento_retorno',true ou false)">

* - Se elemento_retorno for um elemento html (inclusive inputs e selects),
* exibe o retorno no innerHTML / value / options do elemento
* - Se elemento_retorno for o nome de uma variavel
* (o nome da variável deve ser declarado por string, pois será feito um eval)
* a função irá atribuir o retorno à variável ao receber a url.
*******/
     var ajax1 = pegaAjax();

     if(ajax1){
         var url = nome_form.action;
         var parameters = camposForm(nome_form);
  

         url = antiCacheRand(url);
         ajax1.onreadystatechange = ajaxOnReady
         ajax1.open("POST", url ,true);
         ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
         ajax1.setRequestHeader("Cache-Control", "no-cache");
         ajax1.setRequestHeader("Pragma", "no-cache");
         if(exibe_carregando){ put("Carregando ...")    }
         ajax1.send(parameters)
         return true;
     }else{
         return false;
     }
     function ajaxOnReady(){
         if (ajax1.readyState==4){
             if(ajax1.status == 200){
                 var texto=ajax1.responseText;
                 if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");
                 //texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp
                 put(texto);
                 extraiScript(texto);
             }else{
                 if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}
             }
             ajax1 = null
         }else if(exibe_carregando){//para mudar o status de cada carregando
                 put("Carregando ..." )
         }
     }
     function put(valor){ //coloca o valor na variavel/elemento de retorno
         if((typeof(elemento_retorno)).toLowerCase()=="string"){ //se for o nome da string
             if(valor!="Falha no carregamento"){
                 eval(elemento_retorno + '= unescape("' + escape(valor) + '")')
             }
         }else if(elemento_retorno.tagName.toLowerCase()=="input"){
             valor = escape(valor).replace(/\%0D\%0A/g,"")
             elemento_retorno.value = unescape(valor);
         }else if(elemento_retorno.tagName.toLowerCase()=="select"){        
             select_innerHTML(elemento_retorno,valor)
         }else if(elemento_retorno.tagName){
             elemento_retorno.innerHTML = valor;
             //alert(elemento_retorno.innerHTML)
         }    
     }
     function pegaAjax(){ //instancia um novo xmlhttprequest
         //baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original
         if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}
         var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
         for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }
         return null;
     }
     function httpStatus(stat){ //retorna o texto do erro http
         switch(stat){
             case 0: return "Erro desconhecido de javascript";
             case 400: return "400: Solicita&ccedil;&atilde;o incompreensível"; break;
             case 403: case 404: return "404: N&atilde;o foi encontrada a URL solicitada"; break;
             case 405: return "405: O servidor n&atilde;o suporta o m&eacute;todo solicitado"; break;
             case 500: return "500: Erro desconhecido de natureza do servidor"; break;
             case 503: return "503: Capacidade m&aacute;xima do servidor alcançada"; break;
             default: return "Erro " + stat + ". Mais informa&ccedil;&otilde;es em [url="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html";"]http://www.w3.org/Protocols/rfc2616/rfc261...c10.html";[/url] break;
         }
     }
     function antiCacheRand(aurl){
         var dt = new Date();
         if(aurl.indexOf("?")>=0){// já tem parametros
             return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());
         }else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}
     }
}


function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - altera o innerHTML de um select independente se é FF ou IE
* Corrige o problema de não ser possível usar o innerHTML no IE corretamente
* Veja o problema em: [url="http://support.microsoft.com/default.aspx?...kb;en-us;276228"]http://support.microsoft.com/default.aspx?...kb;en-us;276228[/url]
* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
* Versão: 1.0 - 06/04/2006
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* Parametros:
* objeto(tipo object): o select a ser alterado
* innerHTML(tipo string): o novo valor do innerHTML
*******/
     objeto.innerHTML = ""
     var selTemp = document.createElement("micoxselect")
     var opt;
     selTemp.id="micoxselect1"
     document.body.appendChild(selTemp)
     selTemp = document.getElementById("micoxselect1")
     selTemp.style.display="none"
     if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
         innerHTML = "<option>" + innerHTML + "</option>"
     }
     innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")
     selTemp.innerHTML = innerHTML
     for(var i=0;i<selTemp.childNodes.length;i++){
         if(selTemp.childNodes[i].tagName){
             opt = document.createElement("OPTION")
             for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){
                 opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))
             }
             opt.value = selTemp.childNodes[i].getAttribute("value")
             opt.text = selTemp.childNodes[i].innerHTML
             if(document.all){ //IEca
                 objeto.add(opt)
             }else{
                 objeto.appendChild(opt)
             }                    
         }    
     }
     document.body.removeChild(selTemp)
     selTemp = null
}

function extraiScript(texto){
//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum
//http://-- link para outro fórum não permitido --.com.br/index.php?showtopic=165277&
     // inicializa o inicio ><
     var ini = 0;
     // loop enquanto achar um script
     while (ini!=-1){
         // procura uma tag de script
         ini = texto.indexOf('<script', ini);
         // se encontrar
         if (ini >=0){
             // define o inicio para depois do fechamento dessa tag
             ini = texto.indexOf('>', ini) + 1;
             // procura o final do script
             var fim = texto.indexOf('</script>', ini);
             // extrai apenas o script
             codigo = texto.substring(ini,fim);
             // executa o script
             //eval(codigo);
             /**********************
             * Alterado por Micox - micoxjcg@yahoo.com.br
             * Alterei pois com o eval não executava funções.
             ***********************/
             novo = document.createElement("script")
             novo.text = codigo;
             document.body.appendChild(novo);
         }
     }
}


O arquivo completo com essa função você encontra em http://www.esnips.com/web/Klawdyo


Té mais, galera e bom uso dela. Aqui não deu problema. Testado em ie6 e ff2.

Valeu

Você gostou? Comente no fórum!

Comentários:

Micox disse:

Perfect eleven clap.gif

Valeus pelo help, agora vai ter que responder dúvidas dos outros também rindo.gif
hauehuae

Linkarei no blog. Parabéns cara. joia.gif

Micox disse:

Opa Cláudio, já que você fez a atualização do Post.
Bora finalizar logo a função completa, que tal?

1) Guentar get ou post
2) guentar nome ou referencia dos elementos (nome_form, elemento_retorno)
3) o exibe_carregando permitir html
4) uma função de callback (para ser chamada após o fim do carregamento)
5) A submissão de um form ser opcional.
6) Aplicar formatação CSS também (além do extraiScript)

Working...

Micox disse:

Uma prévia ainda não testada e sem os créditos corretamente:

CODE
function ajaxVai(url_ou_form){
    //opcional: ajaxDo(url_ou_form,elemento_retorno,html_carregando,callback)
    var url,o_form,method,elemento_retorno, html_carregando,callback,parameters='';
    var loads = ['|','/','-','\\'],loadpos=0;
    
    //pegando se é url direta ou form
    if(typeof(url_ou_form)=='string'){
        if(url_ou_form.indexOf('http://')>=0){ //é url
            url = url_ou_form;
            method = 'GET';
        }else{
            o_form = document.getElementsById(url_ou_form);
            if(o_form){
                url = o_form.action;
                method = o_form.method;
            }else{ //form não existe
                alert('Reveja sua chamada ao ajaxVai. O form ' + url_ou_form + ' informado, não existe');
            }
        }
    }else if(typeof(url_ou_form.nodeType)!='undefined'){ //form passado como referencia ao objeto html
        o_form = url_ou_form;
        url = o_form.action;
    }else{
        alert('Reveja sua chamada ao ajaxVai. O primeiro parâmetro url_ou_form é obrigatório');
    }
    delete url_ou_form; //não precisamos mais dela
    
    //pegando os opcionais.
    if(arguments[1]){ //elemento_retorno ou pode ser a callback
        if(typeof(arguments[1].nodeType)!='undefined'){ //elemento_html passado como referencia ao objeto
            elemento_retorno = arguments[1];
            
        }else if(typeof(arguments[1])=='string'){ //passou só o id
            elemento_retorno = document.getElementById(arguments[1]);
            if(!elemento_retorno){
                alert('Reveja sua chamada ao ajaxVai. O elemento ' + arguments[1] + ' informado, não existe'); }
                
        }else if(typeof(arguments[1])=='function'){ //é a callback
            callback = arguments[1];
            
        }
        
        if(elemento_retorno){ //se há elemento retorno então pode haver html_carregando ou callback
            if(typeof(arguments[2])=='string'){ //html_carregando
                html_carregando = arguments[2];
            }else if(typeof(arguments[2])=='function'){ //callback
                callback = arguments[2];
            }
        }
    }

    
    
    var ajax1 = pegaAjax(); //capturando um objeto xmlHttpRequest

    if(ajax1){
    
        if(o_form){
            parameters = camposForm(nome_form);
        }
        
        url = antiCacheRand(url);
        ajax1.onreadystatechange = ajaxOnReady
        ajax1.open(method, url ,true);
        ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ajax1.setRequestHeader("Content-Type", "text/html; charset=utf-8");
        ajax1.setRequestHeader("Cache-Control", "no-cache");
        ajax1.setRequestHeader("Pragma", "no-cache");
        if(html_carregando){ put(pegaloads() + html_carregando)    }
        ajax1.send(parameters)
        return true;
        
    }else{
        return false;
    }
    
    //funções extra
    
    function ajaxOnReady(){ //executada a cada alteração no status http
        if (ajax1.readyState==4){
            if(ajax1.status == 200){
                var texto=ajax1.responseText;
                if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");
                //texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp
                put(texto);
                extraiScript(texto);
                extraiStyle(texto);
                if(callback){ callback(texto); }
            }else{
                if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}
            }
            ajax1 = null
        }else if(html_carregando){//para mudar o status de cada carregando
            put(pegaloads() + html_carregando)
        }
    }
    function pegaloads(){
        if(loadpos>loads.length - 1){ loadpos = 0; }
        return loads[loadpos++] + ' ';
        
    }
    function put(valor){ //coloca o valor no elemento de retorno, se houver este
        if(elemento_retorno){
            if(elemento_retorno.tagName.toLowerCase()=="input"){
                valor = escape(valor).replace(/\%0D\%0A/g,"")
                elemento_retorno.value = unescape(valor);
            }else if(elemento_retorno.tagName.toLowerCase()=="select"){        
                select_innerHTML(elemento_retorno,valor)
            }else if(elemento_retorno.tagName){
                elemento_retorno.innerHTML = valor;
                //alert(elemento_retorno.innerHTML)
            }  
        }
    }
    function pegaAjax(){ //instancia um novo xmlhttprequest
        //baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original
        if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}
        var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
        for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }
        return null;
    }
    function httpStatus(stat){ //retorna o texto do erro http
        switch(stat){
            case 0: return "Erro desconhecido de javascript";
            case 400: return "400: Solicita&ccedil;&atilde;o incompreensível"; break;
            case 403: case 404: return "404: N&atilde;o foi encontrada a URL solicitada"; break;
            case 405: return "405: O servidor n&atilde;o suporta o m&eacute;todo solicitado"; break;
            case 500: return "500: Erro desconhecido de natureza do servidor"; break;
            case 503: return "503: Capacidade m&aacute;xima do servidor alcançada"; break;
            default: return "Erro " + stat + ". Mais informa&ccedil;&otilde;es em http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html"; break;
        }
    }
    function antiCacheRand(aurl){
        var dt = new Date();
        if(aurl.indexOf("?")>=0){// já tem parametros
            return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());
        }else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}
    }
}


function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - corrige o bug do InnerHTML em selects no IE
* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Versão: 2.1 - 04/09/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* @objeto(tipo HTMLobject): o select a ser alterado
* @innerHTML(tipo string): o novo valor do innerHTML
*******/
    objeto.innerHTML = ""
    var selTemp = document.createElement("micoxselect")
    var opt;
    selTemp.id="micoxselect1"
    document.body.appendChild(selTemp)
    selTemp = document.getElementById("micoxselect1")
    selTemp.style.display="none"
    if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
        innerHTML = "<option>" + innerHTML + "</option>"
    }
    innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span")
    selTemp.innerHTML = innerHTML
      
    
    for(var i=0;i<selTemp.childNodes.length;i++){
  var spantemp = selTemp.childNodes[i];
  
        if(spantemp.tagName){    
            opt = document.createElement("OPTION")
    
   if(document.all){ //IE
    objeto.add(opt)
   }else{
    objeto.appendChild(opt)
   }      
    
   //getting attributes
   for(var j=0; j<spantemp.attributes.length; j++){
    var attrName = spantemp.attributes[j].nodeName;
    var attrVal = spantemp.attributes[j].nodeValue;
    if(attrVal){
     try{
      opt.setAttribute(attrName,attrVal);
      opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
     }catch(e){}
    }
   }
   //getting styles
   if(spantemp.style){
    for(var y in spantemp.style){
     try{opt.style[y] = spantemp.style[y];}catch(e){}
    }
   }
   //value and text
   opt.value = spantemp.getAttribute("value")
   opt.text = spantemp.innerHTML
   //IE
   opt.selected = spantemp.getAttribute('selected');
   opt.className = spantemp.className;
  }
}    
document.body.removeChild(selTemp)
selTemp = null
}

function extraiScript(texto){
//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum
    var ini = 0;
    // loop enquanto achar um script
    while (ini!=-1){
        // procura uma tag de script
        ini = texto.indexOf('<script', ini);
        // se encontrar
        if (ini >=0){
            // define o inicio para depois do fechamento dessa tag
            ini = texto.indexOf('>', ini) + 1;
            // procura o final do script
            var fim = texto.indexOf('</script>', ini);
            // extrai apenas o script
            codigo = texto.substring(ini,fim);
            // executa o script
            /**********************
            * Alterado por Micox - micoxjcg@yahoo.com.br
            * Alterei pois com o eval não executava funções.
            ***********************/
            novo = document.createElement("script")
            novo.text = codigo;
            document.body.appendChild(novo);
        }
    }
}
function extraiStyle(texto){
//baseada na função anterior
    var ini = 0;
    // loop enquanto achar um script
    while (ini!=-1){
        // procura uma tag de script
        ini = texto.indexOf('<style', ini);
        // se encontrar
        if (ini >=0){
            // define o inicio para depois do fechamento dessa tag
            ini = texto.indexOf('>', ini) + 1;
            // procura o final do script
            var fim = texto.indexOf('</style>', ini);
            // extrai apenas o script
            codigo = texto.substring(ini,fim);
            // executa o style
            novo = document.createElement("style")
            novo.text = codigo;
            document.body.appendChild(novo);
        }
    }
}


function camposForm(fform){
/**************************************************
* Autor: José Cláudio Medeiros de Lima
* Data: 17/12/2007
* Objetivos: Pega todos os campos de um formulário, seus valores
      e junta tudo em um formato de querystring,
      por exemplo: var1=valor1var2=valor2
* Parâmetros: nomeForm - O nome do formulário qualquer.
**************************************************/
    var buff = [];
    var contador = 0; //viabiliza a contagem de laços do for,  
    //pois sem ele dá "undefined" nos checkboxes
    //ou radiobuttons que não estão marcados
    
    for (i=0; i< fform.length;i++)  {
        var campo = fform.elements[i];
        
        if(campo.type=="checkbox" || campo.type=="radio"){
            if(campo.checked){
                buff[contador] = campo.name + "=" + campo.value;
                contador ++; //incrementa 1 ao contador
            }
        }else{
            buff[contador] = fform.elements[i].name + "=" + fform.elements[i].value;
            contador++;
        }
    }
    return buff.join("&");
}

Micox disse:

Ae Klaudio, fiz uma pequena alteração na sua função dos forms lá:
Dá uma bizuiada:

CODE
function camposForm(fform){
/**************************************************
* Autor: José Cláudio Medeiros de Lima (pequenas alterações by Micox - 28/12/07)
* url: http://forum.ievolutionweb.com/index.php?showtopic=18264
* Versão: 1.5 - 28/12/2007
* Objetivos: Pega todos os campos de um formulário, seus valores
      e junta tudo em um formato de querystring,
      por exemplo: var1=valor1var2=valor2
* Parâmetros: fform - a referencia a um objeto html-form.
**************************************************/
    var buff = [];
    for (i=0; i< fform.length;i++)  {
        var campo = fform.elements[i];
        
        if((campo.type=="checkbox" || campo.type=="radio")){
            if(campo.checked==true && campo.name){
                buff.push(campo.name + "=" + encodeURI(campo.value));
            }
        }else if(campo.name){ //campos que não tenham name não vão.
            buff.push(campo.name + "=" + encodeURI(campo.value));
        }
    }
    return buff.join("&");
}

1) Encodei as variáveis
2) simplifiquei o esquema do buffer + contador

Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).

Mais recentes em JavaScript e Ajax

Select dinâmico de estados e cidades
Por DGmike - Uma das dúvidas mais comuns para quem está começando...
Selecionar dinâmicamente um option de um select
Por Manito - Dica para quem fizer um form usando ajax...
Validador de fomulários v0.1 rc0 beta alpha
Por PXzin - [versÃo de teste em jquery]...
Como bloquear imagens do site
Por Lucasbr - E ai galera, blz? - se que é impossivel proteger realmente...
Validador de formulário
Por carlosmborgesjr - Boa tarde, - cara, seu validador ficou muito bom, muito...

Ver mais Artigos de JavaScript e Ajax.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com