Ajax fácil, primera parte

Bueno, para entender lo que es ajax, primero que nada es importante aclarar que esta tecnología no es un lenguaje de programación como puede serlo Javascript, o PHP, de hecho es un conjunto de tecnologías que permite comunicar a Javascript con otros lenguajes de servidor, en este caso PHP, aunque también puede ser cualquier otro.

Muchas veces se suelen utilizar formularios web que necesitan enviar determinados datos al servidor para probar por ejemplo si el nombre de un usuario de una persona, que intenta registrarse, existe en la base de datos. Como Javascript no puede conectarse a una base de datos, sí en cambio por ejemplo PHP puede hacerlo, pero para ello hay que enviar datos al servidor, lo que implica recargar la página.

Por suerte existe ajax que nos permite enviar datos al servidor desde Javascript y esperar una respuesta sin que el navegador del usuario deba moverse de dónde está.

Bien, muchos al comenzar a ver ajax se complican demasiado (yo), sin embargo ajax es más fácil de lo que parece y más fácil es con la ayuda de Jquery.

El siguiente ejemplo que voy a mostrar a continuación es muy simple. Habrá un campo de texto donde debemos ingresar un número de legajo y si ese número le pertenece a un empleado nos devolverá una cadena con los datos del mismo.

Para eso usaremos un campo de texto de entrada, un botón y un div vacío para mostrar la respuesta que nos devolvió el servidor:

<form action="javascript:void(0);">
    <label> Buscar empleado por legajo: </label>
    <input type="text" name="legajo" id="legajo" />
    <input type="submit" id="boton_buscar_legajo" />
    <div id="respuesta"></div>
</form>

Un código html muy sencillo, sin embargo tal vez notaron algo muy particular en el form, y es que el atributo action no se envía a ningún lado, sino que en su lugar hay una función javascript que en realidad no hace nada. Esto lo utilizo porque este formulario no se enviará al servidor de la forma tradicional, sino que utilizaremos ajax para no tener que recargar la página.

Bien, para usar ajax, tendremos que recurrir al método de Jquery .ajax(). Este método recibirá un parámetro que será un json, donde debemos indicarle los datos necesarios, como por ejemplo a que dirección se enviará la petición y que dato será enviado a la misma.

Este Json como cualquier json tiene propiedades y métodos para su funcionamiento. En este caso no usaremos todos, solamente los necesarios para mostrar este ejemplo:

<!-- Importación de la librería de jquery. -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript"> 
    //Función que envía la petición ajax.
    function buscar_legajo(){
       $.ajax({
          url: 'buscar_empleado.php',
          type: 'POST',
          timeout: 10000,
          data: {legajo: $("#legajo").val()},
          beforeSend: function(){
             $("#respuesta").html('Buscando legajo...');
          },
          error: function(){
             $("#respuesta").html('');
                alert('Ha surgido un error.')
             },
          success: function(respuesta){
             $("#respuesta").html(respuesta);
          }
       })
    } 
    $(document).ready(function(){
       $("#boton_buscar_legajo").click(function(){
          buscar_legajo();
       });
    });
</script>

Bueno, seguramente notaste que dentro del método .ajax() incluimos un parámetro json (Los llaves aclaran que es un json), con algunas propiedades y métodos. Explico a continuación la función de cada uno.

  • url: Es la dirección donde irá la petición. Esto es el equivalente del atributo action de la etiqueta form.
  • type: De qué forma enviará los datos al servidor, si por GET o POST. En nuestro caso será POST. Y es el equivalente del atributo method de la etiqueta form.
  • timeout: Es la cantidad de tiempo que se espera una respuesta del servidor y se cuenta en milisegundos. En nuestro caso es 10 segundos, al pasar esos 10 segundos la petición será cancelada.
  • data: Son los nombres de variables y sus valores que se enviarán al servidor. Es un json en donde sus propiedades se separan por coma, en este ejemplo sólo hay un dato, pero nosotros podríamos tener algo como: data: {dato1: ‘Algo1’ , dato2: ‘Algo 2’} y al llegar al servidor se recuperarán como $_POST[‘dato1’] y $_POST[‘dato2’] y los valores serán obviamente ‘Algo 1’ y ‘Algo 2’ respectivamente.
  • beforeSend(): Este método o función puede ser muy útil por ejemplo para poner un gif animado con una imagen de precarga. En nuestro caso solamente muestra un mensaje dentro del div que dice ‘Buscando legajo…’ pero también podría tener una imagen de precarga.
  • error(): Este método es muy importante ya que se disparará en caso de que haya algún problema en el envío de la petición. Ejemplo, la petición ajax se envía al servidor, pero ésta nunca llega o no devuelve una respuesta. Por ejemplo, si la máquina del usuario se queda sin conexión, la petición no irá a parar a ningún lado y este método le avisará que algo salió mal.
  • success(): En caso de que la petición haya llegado al servidor y este haya devuelto una respuesta, se disparará este método y no el anterior. El mismo recibe un parámetro con un nombre inventado por nosotros que será la respuesta del servidor. Por ejemplo si utilizamos como lenguaje de servidor php, la salida realizada por echo ‘Algo’ nos permite recuperar esa cadena ‘Algo’ a través de ese parámetro.

El código debería quedar más o menos así:

<!DOCTYPE html>
<html>
 <head> 
 <!-- Importación de la librería de jquery. -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript">
       //Función que envía la petición ajax.
       function buscar_legajo(){
          $.ajax({
             url: 'buscar_empleado.php',
             type: 'POST',
             timeout: 10000,
             data: {legajo: $("#legajo").val()},
             beforeSend: function(){
                $("#respuesta").html('Buscando legajo...');
             },
             error: function(){
                $("#respuesta").html('');
                alert('Ha surgido un error.')
             },
             success: function(respuesta){
                $("#respuesta").html(respuesta);
             }
          })
       } 
       $(document).ready(function(){
          $("#boton_buscar_legajo").click(function(){
          buscar_legajo();
       });
    });

 </script>
 </head>
 <body> 
    <form action="javascript:void(0);">
       <label> Buscar empleado por legajo: </label>
       <input type="text" name="legajo" id="legajo" />
       <input type="submit" id="boton_buscar_legajo" />
       <div id="respuesta"></div>
    </form> 
 </body>
</html>

Bueno, ahora a continuación mostraré la otra parte del ejemplo, que será la respuesta del servidor. Vale aclarar que para tratar de hacer este ejemplo lo más sencillo posible no utilizaré una conexión a base de datos, sino que voy a utilizar un array estático para simular una consulta a una base de datos. Pero vos podés probarlo conectando a una base de datos, en definitiva el script de php es como cualquier script. Crear un archivo a la misma altura que el anterior con el nombre ‘buscar_empleado.php’

<?php 
 if(isset($_POST['legajo'])){ 
    //Guarda el legajo que llego vía ajax. en una varibale.
    $legajo = $_POST['legajo'];
    //Lista de empleados.
    $empleados = array(
       array('legajo' => '10001', 'nombre' => 'Cosme', 'apellido' => 'Fulanito', 'departamento' => 'Estadisticas'),
       array('legajo' => '10002', 'nombre' => 'Lola', 'apellido' => 'Landa', 'departamento' => 'Recursos humanos'),
       array('legajo' => '10003', 'nombre' => 'Cornelio', 'apellido' => 'Del Rancho', 'departamento' => 'Sistemas')
    );
    //Variable que guardará los datos del empleado a buscar. Por defecto guardará null.
    $empleado = null;
    foreach($empleados as $item){
       //Verifica si el legajo es uno de los que está en la lista.
       if($item['legajo'] == $legajo){
       //Guarda los datos del empleado que fue encontrado y finaliza el ciclo del foreach.
          $empleado = $item;
          break;
       }
    }
    //Devuelve la respuesta de si lo encontró o no
    if($empleado){
        //Lo encontró así que devuelve los datos del empleado en forma de cadena.
        echo 'Nombre y apellido: ' . $empleado['nombre'] . ' ' . $empleado['apellido'] . ' / Departamento: ' . $empleado['departamento'];
    }else{
       //No encontró al usuario.
       echo 'El numero de legajo no le corresponde a ningun empleado';
    }

 }else{
    echo ':(';
 }

?>

Ahora ejecutá en tu localhost el primer archivo, el que contiene el código html/javascript e ingresa en el campo de formulario un número de legajo. Los que encontrará son 10001, 10002 y 10003.

¿Fácil no?

Si no te les ha ido tan bien, por acá me preguntan.

Saludos.

Siguiente: Ajax fácil, segunda parte


9 Respuestas a “Ajax fácil, primera parte”

  1. ya casi termino con jquery.
    todos los ejemplos se entienden ala perfección.
    me mató este parte del codigo:
    else{
    echo ‘:(‘; la carita jajajjaja
    }

    saludos!!

  2. Muy agradecido termine tu curso de jquery, solo una duda más 🙂
    en el archivo buscar-empleado.php colocas :

    if(isset($_POST[‘legajo’])){
    aca siempre me entraba en el if, cuando colocaba el input vacio mostraba esto: echo ‘El numero de legajo no le corresponde a ningun empleado’;
    }

    no me funciono, asi coloce if(!empty($_POST[‘legajo’])){
    aca funciono todo correcto, si no se ingresa nada en el input me muestra la carita :
    echo ‘:(‘;
    Bueno disculpa la molestia de preguntar, es que me rompi la cabeza con isset.

    Gracias.

    1. El proceso indica que para que ese script se ejecute, debe venir por POST, una variable con ese nombre, ‘legajo’. De no ser así, ese script no tiene por qué ejecutarse, por eso el if preguntando si la variable existe.

      Saludos!

  3. Hermano como haría si lo que quiero es ingresar varios datos como los de un formulario estoy usando ajax y laravel 5.1

  4. Excelente… muchisimas gracias. estoy dandome cabezasos con este y otros 13546513546514354321 tutoriales mas he podido ir armando mi pagina !!! 😀

  5. una pregunta!! … en otro tutorial que lei usaban un “filtro anti-XSS?” que es eso? o mejor dicho que es un XSS? supongo que es un tipo de ataque pero de que trata?

    1. No recuerdo haber hablado alguna vez de ese tema. Pero básicamente consiste en ataques del cliente a una aplicación web por medio de herramientas como Javascript, sin embargo si tu aplicación web filtra datos maliciosos en el servidor esto puede evitarse.

      Saludos!