Muy buena amigo yo creo que quedaria mejor algo asi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enviar POST y GET con ajax</title>
<!--jQuery JavaScript Library v1.4.2-->
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<Script>
function toggle(what) {
var aobj = document.getElementById(what);
if( aobj.style.display == 'none' ) {
aobj.style.display = '';
} else {
aobj.style.display = 'none';
}
}
function CrearXMLHttp(){
XMLHTTP=false;
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
// suponiendo que tu div se llama loading
function OpenPage(url,id,loading,variables,metodo){
//alert(url+' '+id);
req=CrearXMLHttp();
if(req){
req.onreadystatechange = function() { manejador(id,loading); }; // aca cambie
if(metodo == 'post'){
req.open("post",url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
req.send(variables);
}else{
req.open("get",url+'?'+variables,true);
req.send(null);
}
toggle(loading); // ojo aqui
}
}
function manejador(id,loading){
if(req.readyState == 4){
if(req.status == 200){
toggle(loading); // ojo aca
document.getElementById(id).innerHTML=req.response Text;
}else{
//alert("Error"+req.statusText)
alert("Error: es posible que tu navegador no sea compatible con las funciones de esta pagina, proba ingresando de nuevo desde Internet Explorer.");
}
}
}
function CargaContenido(contenedor,metodo,url,variables){
OpenPage(url,contenedor,'loading',variables,metodo );
}
</Script>
</head>
<body onload="$('loading').hide();">
<form id="form" name="form">
<input type="text" id="a" name="a" />
<input type="text" id="b" name="b" />
</form>
<input name="btn_form" type="button" value="Enviar Formulario" onclick="CargaContenido('contenedor','post','ajaxp ostrecibe.php',''+$('form').serialize()+'');" />
<input name="btn_parametro" type="button" value="Enviar Un dos" onclick="CargaContenido('contenedor','get','ajaxpo strecibe.php','a=2&b=4');" /><br /><br />
<div id="contenedor">
</div>
<div id="loading" style="background-color:#FFFFFF; width:80px; color:#FFFFFF; font-weight:bold; display:none;"><img src="load.gif" />Cargando..</div>
</body>
</html>
y en un lugar ajaxpostrecibe.php
Variable 1: <? echo $_REQUEST['a']; ?><br />
Variable 2:<? echo $_REQUEST['b']; ?><br />
<br />
URL:
<span class="Estilo1"><? echo $_SERVER['REQUEST_URI']; ?></span>
y para el estilo de nuestro loading
.loading
{
position:absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; border:0px solid #1c5889; background-color:#0000000;
color:#333; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; width:auto; height:auto;
}