ajaxpostenvia.php :
Código HTML:
<!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>
<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.responseText;
}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 enviardato(url,metodo){
// variables
var variable1 = document.getElementById('variable').value;
var nomvariable1= 'variable='+variable1;
var variable2 = document.getElementById('variable2').value;
var nomvariable2= 'variable2='+variable2;
variables = nomvariable1+'&'+nomvariable2;
//alert(variables);
// enviando
OpenPage(url,'contenedor','loading',variables,metodo);
}
</Script>
</head>
<body>
<input name="variable" type="text" id="variable" value="texto de prueba 1" />
<input name="variable2" type="text" id="variable2" value="texto de prueba 2" />
<input name="post" type="button" value="Enviar POST" onclick="enviardato('ajaxpostrecibe.php','POST');" />
<input name="get" type="button" value="Enviar GET" onclick="enviardato('ajaxpostrecibe.php','GET');" /><br /><br />
<div id="contenedor"><div id="loading" style="background-color:#FF0000; width:80px; color:#FFFFFF; font-weight:bold; display:none;">Cargando...</div></div>
</body>
</html> ajaxpostrecibe.php :
Código HTML:
<style type="text/css">
<!--
.Estilo1 {color: #FF0000}
-->
</style>
<div id="loading" style="background-color:#FF0000; width:80px; color:#FFFFFF; font-weight:bold; display:none;">Cargando...</div>
Variable POST 1: <span class="Estilo1"><?php echo $_POST['variable']; ?></span><br />
Variable POST 2: <span class="Estilo1"><?php echo $_POST['variable2']; ?></span><br />
<br />
Variable GET 1: <span class="Estilo1"><?php echo $_GET['variable']; ?></span><br />
Variable GET 2: <span class="Estilo1"><?php echo $_GET['variable2']; ?></span><br />
<br />
URL:
<span class="Estilo1"><?php echo $_SERVER['REQUEST_URI']; ?></span>