Jump to content


Photo

Classe Ajax


  • Faça o login para participar
Nenhuma resposta neste tópico

#1 carneiro

carneiro

    programador web

  • Usuários
  • 155 posts
  • Sexo:Não informado
  • Localidade:cascavel - pr
  • Interesses:programação e design para web

Posted 22/11/2006, 13:55

========================================

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.

Descrição
Alexandre Magno Semmer
www.alexandresemmer.com
Programador Web

Programação
ASP, PHP, JavaScript, CSS, SQL, JAVA, C, Paschal, Ajax, XML
Usuário
Posted Image
Links
Ajax Online - FireBug (Firefox) - Documentação PHP - Documentação Prototype - Documentação jQuery - Script.Aculo.Us




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq