enviar post y get con la misma funcion ajax... aporte..

farra · #1 (**permalink**) 17/06/2009, 08:34

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>

Ixtleco · #2 (**permalink**) 11/09/2009, 18:53

podrias explicarla un poco mejor porfavor, se agradece de antemano

xtywo · #3 (**permalink**) 16/06/2010, 15:45

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>


<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;
}