29 - $.ajax

Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y enviar datos al servidor utilizando ajax:

  1. Método load
  2. Funciones $.get y $.post
  3. $.getJSON

Existe otra función llamada $.ajax que es la más completa de todas, pero como desventaja es más compleja su empleo.

La sintaxis de la función $.ajax es:

ajax([objeto literal])

Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.

Con un ejemplo veremos las propiedades principales que podemos configurar en el parámetro a enviar.

Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.ajax

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <form action="pagina1.php" method="post" id="formulario">
    Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br>
    <input type="submit" value="Calcular el cuadrado" id="enviar">
    <div id="resultados"></div>
  </form>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#enviar");
  x.click(presionSubmit);
}

function presionSubmit() {
  let v = $("#nro").val();
  $.ajax({
    async: true,
    type: "POST",
    dataType: "html",
    contentType: "application/x-www-form-urlencoded",
    url: "pagina1.php",
    data: "numero=" + v,
    beforeSend: inicioEnvio,
    success: llegadaDatos,
    timeout: 4000,
    error: problemas
  });
  return false;
}

function inicioEnvio() {
  let x = $("#resultados");
  x.html('<img src="cargando.gif">');
}

function llegadaDatos(datos) {
  $("#resultados").text(datos);
}

function problemas() {
  $("#resultados").text('Problemas en el servidor.');
}

pagina1.php

<?php
$cuadrado=$_REQUEST['numero'] * $_REQUEST['numero'];
echo $cuadrado;
?>

Veamos que datos podemos enviarle a la función $.ajax:

function presionSubmit() {
  let v = $("#nro").val();
  $.ajax({
    async: true,
    type: "POST",
    dataType: "html",
    contentType: "application/x-www-form-urlencoded",
    url: "pagina1.php",
    data: "numero=" + v,
    beforeSend: inicioEnvio,
    success: llegadaDatos,
    timeout: 4000,
    error: problemas
  });
  return false;
}

Hemos inicializado las siguientes propiedades:

  • async : Indica si la comunicación será asincrónica (true) o sincrónica (false)
  • type : Indica el método que se envían los datos (pudiendo ser GET o POST)
  • dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser "html","xml","json","script")
  • contentType : Indicamos como se empaquetan los datos para enviarlos al servidor (normalmente "application/x-www-form-urlencoded")
  • url : Indicamos el nombre de la página que procesará la petición de datos.
  • data : Indicamos los datos a enviar al servidor.
  • beforeSend : Indicamos el nombre de la función que se ejecutará previo al envío de datos (en nuestro ejemplo mostramos el gif animado que indica que se inició el pedido de datos al servidor)
  • success : Indicamos la función que se ejecuta cuando finalizó el envío de datos del servidor y además ocurrió todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la página)
  • timeout : El tiempo máximo a esperar por la petición de datos.
  • error : El nombre de la función que se ejecuta si los datos no llegan del servidor.


Retornar