Título: Classe AJAX
Versão: 1.0
--------------------------------------------------------------------
Nome: ajax.js
Versão: 1.0
Funcionalidade: Fazer a conexão com o AJAX de uma maneira dinânica
Comentários: Opa beleza... vim aqui contribuir com nossa comunidade..
Na verdade essa classe eu peguei do livro "AJAX - Guia Prático para Windows". É muito simples de usar e bem funcional..
1º) Código da classe ajax.js
/*************************** * Classe Ajax * - Cria o objeto ajax * - Faz a busca em uma página * - Retorna o resultado * * Parametros * url : url que o ajax ira executar * metodo : tipo de envio de dados, por padrão é GET * params : parametros com os dados de envio, somente se o metodo for POST , por padrão é null * processa : resultado * modo : Tipo de arquivo que o ajax ira retornar X para 'xml' e T para 'texto' *****************************/ function AJAX(url, metodo, params, processa, modo) { this.url = url; this.metodo = (metodo) ? metodo : 'GET'; this.params = (metodo='GET') ? null : params; this.processaresultado = processa; this.modo = (modo) ? modo : 'T'; /* T = Text , X = XML */ if( this.modo != 'T' && this.modo != 'X' ){ this.modo = 'T'; } this.conectar(); } AJAX.prototype = { /* Cria o método conecter() Responsavel pela criação do objeto Ajax ( httprequest ) */ conectar: function(){ /* Verifica se URL é válda */ if( this.url == undefined || this.url == ''){ return; } /* Cria o objeto httpRequest */ this.httprequest = null; /* Mozilla, Safari, FireFox ... */ if( window.XMLHttpRequest ){ this.httprequest = new XMLHttpRequest(); /* IE */ } else if( window.ActiveXObject){ try{ this.httprequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ this.httprequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if(this.httprequest != null && this.httprequest != undefined ){ var obj = this; this.httprequest.onreadystatechange = function(){ obj.processaretorno.call(obj); } this.httprequest.open(this.metodo,this.url, true); this.httprequest.send(this.params); } }, // fim conectar /* Cria o método processaretorno() recebe a resposta do responseText ou responseXML */ processaretorno: function(){ if( this.httprequest.readyState == 4 ){ if( this.httprequest.status == 200 ){ var resp = ( this.modo == 'T' ) ? this.httprequest.responseText : this.httprequest.responseXML; if( this.processaresultado != null ){ //alert(resp); this.processaresultado(resp); } else { alert("erro="+resp); } } else { this.processaerro(); } } }, // fim processaretorno /* Cria o método processaerro() Retorna um alert de erro, caso houver */ processaerro: function(){ alert(this.httprequest.status + '-' + this.httprequest.statusText + ' :-> ' + this.url); } }
O código esta bem comentado, qualquer dúvida só postar aqui..
Exemplo de utilização da classe
2º) Códigos Exemplos exemplo01.html
1º funcao trabalha com Text
2º funcao trabalha com XML
<!-- Inclui a classe Ajax na pagina --> <script type='text/javascript' src='scripts/ajax.js'></script> <script language='javaScript' > /* Retorna um texto por ajax */ function retornaTextoAjax(valor){ // Instancia a classe ajax var ajx = new AJAX(); // Define a url ajx.url = 'pagina.php?valor='+valor; // Define o modo (Text) ajx.modo = 'T'; // Processa o resultado e retorna na variavel r ajx.processaresultado = function(r){ // Coloca o resultado na div 'retorno' document.getElementById('retorno').innerHTML= r; } // Conecta ao Ajax ajx.conectar(); } /* Retorna um XML por ajax */ function retornaXMLAjax(valor){ // Instancia a classe ajax var ajx = new AJAX(); // Define a url ajx.url = 'pagina.php?valor='+valor; // Define o modo (XML) ajx.modo = 'X'; // Processa o resultado e retorna o objeto xml (r) ajx.processaresultado = function(r){ // Recebe o objeto xml var obj = r; /* Depois que receber o objeto xml, é só tratar conforme as suas necessidades no exemplo a baixo, é a inclusao de campos <option> em um select */ // Recebe num vetor todos nodos do xml com o nome 'options' var dataArray = obj.getElementsByTagName('options'); // Percorre todos os nodos verificando seus filhos for(var i = 0; i < dataArray.length; i++) { var item = dataArray[i]; var value = item.getElementsByTagName('value')[0].firstChild.nodeValue; var id = item.getElementsByTagName('id')[0].firstChild.nodeValue; var o = document.createElement ('option'); o.setAttribute ('value', value); o.setAttribute ('id', id); var t = document.createTextNode (id); o.appendChild (t); document.getElementById('select').appendChild (o); } } // Conecta ao Ajax ajx.conectar(); } </script>
Duvidas, critícas e melhoramentos.. soh postar ai
[]'s
Edição feita por: carneiro, 22/11/2006, 15:57.