Buenas,
te dejo las funciones que venían con un libro que usé para aprender AJAX... a mi me dieron bastante buen resultado.
Código:
myreq=new AJAXREQ(); //creamos un objeto AJAXREQ
//constructor para AJAXREQ
function AJAXREQ(){
this.req=createREQ();
this.onreadystatechange=null;
this.check=function(){if(!this.req){/*sitio sin ajax*/}};
this.check();
}
//función que crea el request
function createREQ(){
try{
req=new XMLHttpRequest();
}catch(err1){
try{
req=new ActiveXObject("Msxml2.XMLHTTP");
}catch (err2){
try{
req=new ActiveXObject("Microsoft.XMLHTTP");
}catch (err3){
req=false;
}
}
}
return req;
}
//función que envía el request
function requestPOST(url, query, req){
req.open("POST", url, false);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(query);
}
//función para lanzar AJAX
function doAjax(url,query,getxml,dtc,ev){
myreq.req.onreadystatechange=function(){
if(myreq.req.readyState==4){
if(myreq.req.status==200){
var item=myreq.req.responseText;
if(getxml==1){
item=myreq.req.responseXML;
}
print(item, dtc,ev);
}
}else{
printWait(dtc,0);
}
};
requestPOST(url, query, myreq.req);
}
//función para evaluar el resultado
function print(item, dtc, ev){
if(ev==1){
eval('('+item+')');
}else{
document.getElementById(dtc).innerHTML=item;
}
}
//función que muestra mensajes de espera
function printWait(dtc,i){
if(printMessage(i)!=document.getElementById(dtc).innerHTML){
document.getElementById(dtc).innerHTML='';
document.getElementById(dtc).innerHTML=printMessage(i)
}
}
//función para mostrar mensajes
function printMessage(i){
l='';
l=navigator.userLanguage;
if(l==null){
l=navigator.language;
}
t=['Cargando...', 'Su navegador no permite AJAX', 'Error inesperado'];
if(l.indexOf('es') == -1){
t=['Loading...', "Your browser doesn't allow AJAX", 'Unexpected error'];
}
return ''; //aquí pones un código html, como una imagen y el texto "t[i]"
}
Entonces, para hacer una llamada AJAX, harías:
Código:
doAjax('url_de_destino', 'datos_post', 0, 'div_a_cambiar', 0);
Donde:
- url_de_destino: pagina php donde tratas la base de datos
- datos_post: datos post en forma "var=val&var2=val2
- 0/1: para saber si la respuesta es texto (0) o XML (1)
- div_a_cambiar: div (u otro elemento) en el que pondremos el contenido arrojado por la petición. Debe ser un ID
- 0/1: indicamos si el resultado será tal cual (0), o bien será evaluado por "eval()" (1).
Creo que no tendrás problema para adaptar esto a tus necesidades.
Saludos!