El archivo index.php es la vista de nuestra aplicación donde creamos nuestro código html. En él incluimos el archivo ajax.js donde está la función ajax, que se ejecuta cada vez que seleccionamos una opcion del select. Esto gracias al evento onchange() de javascript.
Archivo index.php
<!DOCTYPE>
<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
numero 1 <input type="text" id="num1" /><br />
numero 2 <input type="text" id="num2" /><br />
<select id="ope" onchange="load()">
<option value="">Seleccione</option>
<option value="suma">Suma</option>
<option value="mult">Multiplicacion</option>
<option value="resta">Resta</option>
</select>
<div id="myDiv">Resultado</div>
</body>
</html>
El archivo ajax.js es un archivo javascript que contiene la función load(). Ésta se encarga de capturar lo que ingresen en las cajas de texto, la operación a realizar y enviar los valores a un archivo php. Aquí es donde aparece nuestra imagen gif, decimos que si la respuesta del servidor está lista para ser procesada (if (xmlhttp.readyState==4 && xmlhttp.status==200)) se envíe a la vista sino que por mientras muestre una imagen de espera (document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />';). El anterior código dice que dentro del div con id=MyDiv ubicado en index.php cargue temporalmente una imagen. Cuando la respuesta está lista la imagen desaparece.
Archivo ajax.php
function load()
{
var xmlhttp;
var n1=document.getElementById('num1').value;
var n2=document.getElementById('num2').value;
var ope=document.getElementById('ope').value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}else{
document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />';
}
}
xmlhttp.open("POST","proceso.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("n1="+n1+"&n2="+n2+"&ope="+ope);
}
Finalmente el archivo proceso.php recibe (captura) los valores enviados desde la función y en base a ellos realiza la operación escogida mostrando los debidos resultados.
Archivo proceso.php
<?php
$num1=$_POST['n1'];
$num2=$_POST['n2'];
$ope=$_POST['ope'];
if($ope=='suma'){
echo 'La suma es: '.($num1+$num2);
}
if($ope=='resta'){
echo 'La resta es: '.($num1-$num2);
}
if($ope=='mult'){
echo 'La multiplicacion es: '.($num1*$num2);
}
?>
Demo/código fuente
muy buen ejemplo para entender el procesamiento de Ajax me ha servido de mucho gracias por compratir el ejemplo ya varios de esta pagina que me han sido útiles
ResponderBorrargracias
ResponderBorrar