• 12 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/27/18

El método $.ajax()

Log in or subscribe for free to enjoy all this course has to offer!

En el capítulo anterior vimos qué es Ajax y realizamos algunas peticiones al servidor. En este capítulo, vamos a ver otra de las formas más comunes de realizar llamadas Ajax con jQuery.

El método $.ajax()

jQuery proporciona otro método para realizar peticiones Ajax al servidor, la diferencia es que este método se puede utilizar para peticiones get o post, y para elegir entre muchas opciones diferentes que vamos a explicar a continuación.

Para seleccionar entre las distintas opciones, se utiliza un objeto configurable. El objeto configurable es sólo un objeto de JavaScript con un montón de valores que sirven para configurar las necesidades de nuestra petición Ajax. Podemos imaginarnos un ejemplo como el siguiente:

var configuracion = { 
    nombre: "Triángulo",
    tamañoLado: 20,
    color: "azul"
};

Las propiedades del objeto describen una serie de opciones, en este caso el nombre, tamaño del lado o el color. A través de las propiedades podemos especificar un montón de opciones diferentes, lo que hace que el método  $.ajax()  sea mucho más versátil.

El método  $.ajax()  cuenta con dos sintaxis posibles:

$.ajax(url, { objeto-configurable } );

// o

$.ajax( { objeto-configurable } );

En la primera sintaxis, se especifica la url a la que enviar la petición Ajax, y luego se pasa el objeto configurable, y en la segunda, se pasa directamente el objeto, que también contendrá la dirección url de la petición.

El objeto configurable contendrá uno o varios de los parámetros siguientes:

  • type : tipo de la petición, GET o POST (GET por defecto).

  • url : dirección a la que se envía la petición.

  • data : datos a enviar al servidor.

  • dataType : tipo de datos que esperas obtener del servidor (si no se especifica, jQuery intenta averiguar de qué tipo se trata).

  • success : función que se ejecuta cuando se obtiene una respuesta con éxito.

  • error : función que se llama si la petición no tiene éxito.

Hay muchas otras opciones que pueden ser pasadas como parámetro del objeto. Puedes encontrar la lista completa en la documentación oficial de jQuery.

Una petición  get  a nuestro servidor puede hacerse de la siguiente forma:

$.ajax({
    url: 'https://reqres.in/api/users'
});

Se pasa un objeto configurable muy básico, con sólo una propiedad, la url a la que enviar la petición. SIn embargo, faltaría añadir al menos, la forma en la que gestionar la información que retorna del servidor. Podemos hacer esto, añadiendo la propiedad  success , un método que se ejecuta cuando se obtiene una respuesta con éxito del servidor.

En el siguiente ejemplo, enviamos una petición  get  al servidor, y si obtenemos una respuesta con éxito, la mostramos por la consola del navegador. Si hubiera un error en la petición y no se consiguiese obtener la información del servidor, se ejecutaría la función  error  , añadida en el objeto configurable.

$.ajax({
	url: 'https://reqres.in/api/users',
	success: function(respuesta) {
		console.log(respuesta);
	},
	error: function() {
        console.log("No se ha podido obtener la información");
    }
});

La consola del navegador muestra la información obtenida del servidor a través de la petición Ajax:

Respuesta del servidor con la información de los usuarios
Respuesta del servidor con la información de los usuarios

Ahora que ya sabes cómo utilizar el método  $.ajax() junto con un objeto configurable., vamos a realizar un ejemplo para actualizar la página de forma dinámica. En este caso, no mostraremos la respuesta por la consola, sino que representaremos la información en la página añadiendo elementos al DOM.

<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>$.ajax jQuery</title>
	</head>

	<body>
        <button id="boton-usuarios">Obtener usuarios</button>
        <div id="lista-usuarios"></div>
	</body>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="scripts.js"></script>
</html>

Empecemos por crear una pequeña página HTML con un botón y un  div . El botón se encargará de lanzar una petición Ajax para obtener una lista de usuarios. Una vez que el servidor retorne esta información, se insertará en el elemento  div  con  id   "lista-usuarios".

El código JavaScript que contiene la lógica de la aplicación es el siguiente:

$("#boton-usuarios").on("click", getUsers);

function getUsers() {
  $.ajax({
    url: 'https://reqres.in/api/users',
    success: function(respuesta) {

      var listaUsuarios = $("#lista-usuarios");
      $.each(respuesta.data, function(index, elemento) {
        listaUsuarios.append(
            '<div>'
          +     '<p>' + elemento.first_name + ' ' + elemento.last_name + '</p>'
          +     '<img src=' + elemento.avatar + '></img>'
          + '</div>'
        );    
      });
    },
    error: function() {
      console.log("No se ha podido obtener la información");
    }
  });
}

La propiedad  success se ejecuta cuando se recibe la información del servidor. En ella, se recorre con un bucle  each cada uno de los elementos del array  data  obtenido en la respuesta, y se inserta cada uno de los elementos del array en la página, con ayuda del método  append . Puedes ver el ejemplo aquí

Como has podido ver en este capítulo, el método  $.ajax()  te será útil cuando quieras tener control sobre todos los parámetros de la petición. Sin embargo, existen otras muchas formas de realizar peticiones Ajax. Dependiendo de tus necesidades, podrás utilizar el método  $.ajax()  para realizar peticiones a medida, o un método más sencillo pero menos versátil.

Example of certificate of achievement
Example of certificate of achievement