/**
*Clase que implementa una llamada mediante AJAX, a travez de los metodos Get y Post
*Metodo Constructor
*@version beta
*@copyright Enzo lepe
*@author Enzo Lepe
*@param String - direccion : Contiene la URL de la pagina que será llamada
*@param String - callback  : Contiene el nombre de la funcion que recibira la respuesta a la peticion
*@link http://www.cristalab.com/tutoriales/178/precarga-preloader--en-ajax
*/
var Request = function(direccion, funcion){
  this.ajax = this.createXMLHttpRequest();
  this.async = true;
  this.Method = "GET";
  this.callback = funcion;  
  this.Id = "";
  this.direccion  = direccion;	
  this.parametros = "";
  this.countParametros = 0;
}
/**
*Metodo que crea el objeto XMLHttpRequest, con el cual se realizan las llamadas
*@return XMLHttpRequest object;
*/
Request.prototype.createXMLHttpRequest = function(){
 var xmlhttp = false;
	try 
	{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} 
	catch (e) 
	{
	 try 
	  {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} 
	 catch (E) 
	  {xmlhttp = false;}
	}

 if(!xmlhttp && typeof XMLHttpRequest!='undefined') 
   {xmlhttp = new XMLHttpRequest();}
 return xmlhttp; 	
}
/**
*Metodo que setea el sincronismo de la peticion
*@param Bool - Value : Contiene el sincronismo de la peticion true, es asincronico, false sincronico
*/
Request.prototype.setAsync = function(value){
  this.async = value;		
}
/**
*Metodo que entrega el valor de async
*@return Bool: true, en caso de ser asincrono, false en caso de ser sincrono
*/
Request.prototype.getAsync = function(){
  return this.async;		
}
/**
*Metodo que setea el metodo que es utilizado para hacer la peticion
*@param String - value: Contiene el nombre del metodo puede ser GET o POST
*/
Request.prototype.setMethod = function(value){
  this.Method = value;		
}
/**
*Metodo que porporciona el nombre del metodo que es utilizado para hacer la peticion
*@return String : Con el nombre del metodo 
*/
Request.prototype.getMethod = function(){
  return this.Method;		
}
/**
*Metodo que setea el id del campo en donde sera recibido la respuesta a la peticion
*@param String - value: Contiene el id donde sera depositada la respuesta
*/
Request.prototype.setId = function(value){
  this.Id = value;		
}
/**
*Metodo que proporciona el identificador del campo
*@return String : Contiene el Identificador del campo
*/
Request.prototype.getId = function(){
  return this.Id;		
}
/**
*Metodo que agrega pares valor a la direccion
*@param string nombre: Contiene el nombre del parametro
*@param string valor : Contiene el valor que se le asigna al parametro
*/
Request.prototype.addParam = function(nombre, valor){
 if(this.countParametros==0)
   {
    this.parametros = nombre + "=" + valor;	
   }
 else
 	 {
 	 	 this.parametros = this.parametros + "&" + nombre + "=" + valor;	
 	 }
  this.countParametros++;  
}
/**
*Metodo que propororciona un string con el enlace y los parametros para el metodo GET
*@return String : Con el contenido del string
*/
Request.prototype.getLinkGet = function(){
	var texto = this.direccion;	
	if(this.countParametros>0)
	 {
	 	texto = texto + '?' + this.parametros;	 	
	 }
	return texto;
 }
/**
*Metodo que propororciona un string con los parametros para el metodo POST
*@return String : Con el contenido del string
*/
Request.prototype.getLinkPost = function(){	
	return this.parametros;
 } 
/**
*Metodo que porporciona la peticion generica
*/ 
Request.prototype.callRequest= function (){
  if(this.getMethod().toUpperCase()=="GET")
  {
   this.callGet();	  	
   return;
  }	
  if(this.getMethod().toUpperCase()=="POST")
  {
   this.callPost();	
   return;
  }
}
/**
*Metodo que implementa la peticion a travez del metodo GET
*/
Request.prototype.callGet = function(){   
  //Creacion del objeto XMLHttpRequest
  var ajax = this.createXMLHttpRequest();
  var Id   = this.getId();
  var callback = this.callback;
  //Ingreso de variable aleatoria de manera de engañar el cacheo de internet explorer
  this.addParam("ajaxCache",Math.random());  
  //Envio de la peticion
  ajax.open(this.getMethod(), this.getLinkGet(), this.getAsync());    
  ajax.onreadystatechange = function() {    
	if (ajax.readyState==4) {					  		
	  responseAjaxRequest(ajax, Id, callback)
	}
  }	
  ajax.send(null)		
 }
/**
*Metodo que implementa la peticion a travez del metodo POST
*/
Request.prototype.callPost = function(){
  	//Creacion del objeto XMLHttpRequest
    var ajax = this.createXMLHttpRequest();
    var Id   = this.getId();
    var callback = this.callback;
	ajax.open(this.getMethod(), this.direccion ,this.getAsync());
    ajax.onreadystatechange = function() {    
	if (ajax.readyState==4) {					  		
	  responseAjaxRequest(ajax, Id, callback)
	  }
	}
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ajax.send(this.getLinkPost())
}
/**
*Funcion que analiza la respuesta a la peticion
*@param XMLHttpRequest - xmlHttp : Contiene el objeto que implementa la peticion
*@param String id - Contiene el id del campo en donde se cargara la respuesta
*@Param String callback - Contiene el nombre de la funcion que sera ejecutada para acomodar los datos
*/
function responseAjaxRequest(xmlHttp, Id, callback)
{
 var val = "";
 for(i in xmlHttp) {
	try {
	val+="xmlHttp."+i+"="+xmlHttp[i]+"\n"
	} catch(e) {}
 }
 if(xmlHttp.status==404) {
	alert("Al parecer la pagina a la cual esta accediendo no existe")
 }
 try
	{
	 var texto = new String(xmlHttp.responseText);
	 var contenido = new String();
     contenido = texto.replace(/(·)/g,"\"");
     callback(contenido, Id)	 
	}
 catch(e) {alert(e.name+" - "+e.message);} 
}

El modo de uso es el siguiente:
function cargarContenido()
{
 var p = new Request("prueba2.asp",respuesta);
 p.setMethod("GET"); 
 p.addParam("saludo",$("txtSaludo").value); 
 p.addParam("telefono",$("txtTelefono").value); 
 p.callRequest();    
}
function respuesta(texto, id)
{
 /*Utilizando JSON*/	
 var resultados = eval(texto)
 document.getElementById("saludo").textContent = resultados.saludo;
 document.getElementById("telefono").textContent = resultados.telefono;
}

function $(id)
{
 return document.getElementById(id);	
}

Javascript Ajax Object

ajax, object

JavaScript