Primero que nada agradecer por la respuesta que me puedan brindar, estoy aprendiendo ajax pero sin usar alguna librería que existe para ello me estoy guiando de algunos tutoriales y me propuse hacer las 4 operaciones, es decir me cargue un index.html y que luego según se halla seleccionado me muestre el resultado pero no he podido lograrlo porque parece que no llego a enviar los datos al servidor por ajax pero si lo hago sin ajax si logro mostrar los datos, por favor ayúdenme para solucionar este problema que tengo.
Index.html
<html >
<head>
<title>Operaciones Matemáticas</title>
<script language="javascript" type="text/javascript">
function obtenerXmlHttp()
{
var oXmlHttp;
try
{
oXmlHttp = new XMLHttpRequest(); /* p.e. Firefox */
}
catch(err1)
{
try
{
oXmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
/* algunas versiones IE */
}
catch(err2)
{
try
{
oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
/* algunas versiones IE */
}
catch(err3)
{
oXmlHttp = false;
}
}
}
return oXmlHttp;
}
var ajax = obtenerXmlHttp();
function ejecutarAjax()
{
var n1 = document.getElementById('numero1').value;
var n2 = document.getElementById('numero2').value;
var op = document.getElementById('operacion').value;
ajax.open("POST","operaciones.php",true);
ajax.onreadystatechange=obtenerResultado;
ajax.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
ajax.send("numero1="+n1+"&numero2="+n2+"&operacion ="+op);
}
function obtenerResultado()
{
if(ajax.readyState==4)
{
if (ajax.status==200)
{
document.getElementById('resultado').innerHTML = ajax.responseText;
}
else
{
document.getElementById('resultado').innerHTML='A ocurrido un error, '+ajax.statusText;
}
}
else
{
document.getElementById('resultado').innerHTML='Pr ocesando...';
}
}
</script>
</head>
<body>
<center>
<h2>Operaciones Matemáticas</h2>
<form action="javascript
:ejecutarAjax();" method="post">
Número 1: <input type="text" id="numero1" name="numero1" /><br /><br />
Número 2: <input type="text" id="numero2" name="numero2"/><br /><br />
Operación
<select name="operacion" id="operacion">
<option value="suma">Suma</option>
<option value="resta">Resta</option>
<option value="multiplicacion">Multiplicación</option>
<option value="division">Division</option>
</select>
<input type="button" name="calcular" value="Calcular" onclick="javascript
:ejecutarAjax();"/>
</form><br />
<div id="resultado" style="color: #CC0033"></div>
</center>
</body>
</html>
operaciones.php
<?php
$num1 = $_POST["numero1"];
$num2 = $_POST["numero2"];
$oper = $_POST["Operacion"];
$respuesta=0;
switch($oper)
{
case "suma":
$respuesta = $num1 + $num2;
break;
case "resta":
$respuesta = $num1 - $num2;
break;
case "multiplicacion":
$respuesta = $num1 * $num2;
break;
case "division":
$respuesta = $num1 / $num2;
break;
}
echo $respuesta;
?>
Quiero enviar los datos por el método POST, y al hacer clic solo muestra el valor por defecto que puse en la variable respuesta.