Uso de Ajax

Que tal, despues de tanto tiempo acabo de hacer un gran borron y cuenta nueva.

El por que hago esto, bueno, hay que empezar de cero si quieres cambiar...

Esta vez les traigo un ejemplo del uso de AJAX.

Primero que nada, si apenas etas empezando en algun lenguaje de entorno web, te encontraras con diversos ID'S que te facilitarán la edicion de los mismos ejemplo de ello, Sublime-Text, Notpad++, AptanaStudio entre otros, sin embargo les recomiendo que empiecen con alguno que no les brinde mas que el cambio de color en el texto ya que de esa manera agarran la mania de cerrar las llavez y etiquetas.

En el pasado, me encontraba anonadado con el tema de php, sin embargo el uso esclusivo de este lenguaje, te limita a lo propio de si mismo.


Resientemente me encuentro trabajando en el desarrollo de un analizador de ventas a pronostico, en entorno web, y resientemente me encuentro a gusto con las ventajas de AJAX, HTML5, PHP, y Java, todo mesclado en el mismo proyecto, sin embargo el tema no es de lo que estoy haciendo si no mas bien de las ventajas del lenguaje.


Simulando el tener un servicio PHP y un consumidor en HTML5 con jQuery y AJAX.

Para el ejemplo realizaremos una Calculadora, la cual se ejecuta en el lado del cliente y consume un servicio en PHP.


Codigo HTML

----------------------------------------------------------
<br />
<div class="container">
<input id="val1" type="text" />
   <input id="val2" type="text" />
   <button id="btn1">+</button>
   <button id="btn2">-</button>
   <button id="btn3">/</button>
   <button id="btn4">*</button>
   <button id="btn5">err</button>
</div>
<div id="resultado">
</div>
----------------------------------------------------------
Explicando el codigo.

Si mas adelante le quieres dar un estilo, es por ello que se ponen los componentes dentro de un container.

Ambos input seran los que contengan los valores a calcular.

Los buttons llaman a las funciones en jQuery para la ejecucion del codigo.

Codigo jQuery
----------------------------------------------------------
<script>
//inicializamos el documento
$('document').ready(function($) {
 //funcion que es llamada al hacer click en el boton 1
 $('#btn1').click(function(){
  llamado('sumax');
 });
 //funcion que es llamada al hacer click en el boton 2
 $('#btn2').click(function(){
  llamado('restass');
 });
 //funcion que es llamada al hacer click en el boton 3
 $('#btn3').click(function(){
  llamado('dv');
 });
 //funcion que es llamada al hacer click en el boton 4
 $('#btn4').click(function(){
  llamado('mul');
 });
 //funcion que es llamada al hacer click en el boton 5
 //en particular solo es para mostrar que se puede
 //retornar un error
 $('#btn5').click(function(){
  llamado('c');
 });
});
/*
* las funciones anteriores son al hacer click en cada uno de los
* botones, sin embargo todas llaman a una en particular la cual es
* llamado teniendo un parametro el cual indica la operacion que se
* quiere efectuar, funciona para cada una de las operaciones.
*/
function llamado(acciones){

 $.ajax({ url: 'directorio/nombre_de_mi_servicio.php',
 data: {action: acciones,  /*nombre de la accion a efectuar suma,resta,divicion,multiplicacion*/
 val1: $('#valor1').val(), /*Primer valor a evaluar*/
 val2: $('#valor2').val()  /*Segundo valor a evaluar*/
 }, type: 'POST', /*Tipo de peticion que se hace al servicio*/
 beforeSend: function () {
  //Mientras se espera la respuesta del servicio se pone un mensaje
  $("#resultado").html("Trabajando espere...");
 },success: function(vRetorno) {
   //Al resibir un valor devuelto este se agrega al div que lo contendra
   $('#resultado').html(vRetorno);
  }
 });
}
</script>
----------------------------------------------------------
Codigo PHP
----------------------------------------------------------
 //se guarda el valor obtenido del jQuery en variables de tipo PHP
 $action = $_POST['action'];
 $v1 = $_POST['val1'];
 $v2 = $_POST['val2'];
 //se evalua la accion que se quiere calcular
 switch ($action) {
  case 'sumax':
    //se imprime el resultado de la operacion
    echo sumass($v1,$v2);
   break;
  case 'restass':
    //se imprime el resultado de la operacion
    echo restax($v1,$v2);
   break;
  case 'dv':
    //se imprime el resultado de la operacion
    echo divs($v1,$v2);
   break;
 
  case 'mul':
    //se imprime el resultado de la operacion
    echo multiplica($v1,$v2);
   break;
  default:
    //en caso de no coincidir la accion con ningun caso
    //se imprime un error
    echo 'Valor Invalido';
   break;
 }
 //funcion de suma
 //valor retorno el resultado de la suma
 function sumass($val1, $val2){
  $resultado = $val1 + $val2;
  return $resultado;
 }
 //funcion resta
 //retorna el resultado de la resta
 function restax($val1, $val2){
  $resultado = $val1 - $val2;
  return $resultado;
 }
 //funcion divicion
 //retorna el resultado de la divicion
 function divs($val1, $val2){
  //se evalua si el valor 2 es mayor a 0
  //esto para evita rque se tenga que hacer una divicion sobre 0
   if($val2 &gt; 0){
    $resultado = $val1 / $val2;
    return $resultado;
   }else{
    return 'Error al dividir sobre 0';
   }
 }
 //funcion multiplicacion
 //retorna el resultado de la multiplicacion
 function multiplica($val1, $val2){
  $resultado = $val1 * $val2;
  return $resultado;
 }
----------------------------------------------------------

Perdonen por el diseño, pero como les dije parrafos atras, no hablamos de estilos mas que de la funcionalidad del lenguaje.

Por el momento es todo lo que puedo ofrecerles por hoy, sin mas, me despido esperando sus comentarios y que esto les funcione tanto como a mi me ha ayudado.


hasta pronto.