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.
