And After - Design e Tecnologia por sua conta

Função AJAX

Função AJAX

BomEste texto foi classificado como Bom
Em Internet, Programação
Por Guilherme Serrano
25 de Setembro de 2007

Aí está a função em AJAX que uso aqui no And After, tem algumas alterações mas a base dela é toda na função do MICOX . Simples e fácil de aplicar.

RSS Acompanhe o And After por Feeds RSS!


Aí está a função AJAX que utilizo aqui no And After, com a mínima alteração em cima da função do Micox

 function ajaxGet(url,elemento_retorno,exibe_carregando){
/******
* ajaxGet - Coloca o retorno de uma url em um elemento qualquer
* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
* Versão: 1.2 - 20/04/2006
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* Parametros:
* url: string; elemento_retorno: object||string; exibe_carregando:boolean
*  - 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){
         url = antiCacheRand(url)
         ajax1.onreadystatechange = ajaxOnReady
         ajax1.open("GET", url ,true);
         //ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");
         ajax1.setRequestHeader("Cache-Control", "no-cache");
         ajax1.setRequestHeader("Pragma", "no-cache");
         if(exibe_carregando){ put("Carregando ...")    }
         ajax1.send(null)
         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 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 - 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: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* 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);
         }
     }
}

function carrega(pagina, div) {
    ajaxGet(pagina,document.getElementById(div),false)
}

 

A parte em vermelho é a única coisa que adicionei, com o intuito apenas de facilitar a aplicação da função. Algumas opções são perdidas, mas no meu caso era exatamente o que eu precisava... então vamos lá, como usar?

O link para a função vai ter o seguinte:

onclick="carrega('pagina_para_abrir.html','div_destino'); return false;"

Você pode em um link páginas em mais de uma div, para isso é só repetir a função "carrega" no javascript.

Simples e muito útil, lembro que a função pode ser carregada no body também, que funciona para quem quer carregar dinamicamente páginas dentro de divs. Só não recomendo essa técnica por causa dos crawlers, que vão bloquear e no fim pode ser perdido muito conteúdo para indexação...

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: programacao, internet, javascript, ajax

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti
O Autor

[@]
[www]

Graduando em design estou desenvolvendo meu TCC sobre usabilidade - focando no And After! ;)

Viciado design e web, adoro desenvolvimento, design, mashups, usabilidade, o universo e tudo mais.

Status
Karma: 11173
Opiniões: 30

Mais deste autor
Comentários

accommodation in edinburgh
[www] 7/10/2008 10:59:00

What a best way to describe your view. Thanks for sharing with us. Really like your informative article. Hopefully we will get more interesting topic from you in future.

[Responder este comentário]

Chris Benseler
7/10/2008 11:54:00

Ainda usa essa função, @gserrano? Nada de uar essas bibliotecas mágicas ae...? hehe

[Responder este comentário]

Guilherme Serrano

7/10/2008 13:18:00

hahaha... não, agora eu "invoco" o jQuery pra resolver meus problemas...

Chris Benseler
7/10/2008 13:19:00

jQuery? Equinha! haha

[Responder este comentário]
Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 6 + 5?




Assinar o Feed RSS Assinar por e-mail
Login
Últimos aprovados
Eu Compraria! Produtos legais para geeks e designers. O Desenvolvedor Comprar Apple Macbook