Que tal de nuevo, hoy aprenderemos a usar el método .ajax() de jQuery con el cual podemos hacer peticiones en segundo plano desde nuestra aplicación web hacia un servicio web o API REST. Para este ejemplo lo que haremos será crear una petición a un servidor de pruebas que nos entregará un JSON ficticio elcual contiene una lista de 100 posts. Con el resultado de esta petición haremos una lista que contendra esos registros.

El servicio que utilizaremos será jsonplaceholder.

Bien, comencemos por explicar como funciona el método .ajax(); este es muy extenso y cuenta con una gran cantidad de opciones y configuraciones, pero como en el título dice, solo veremos lo básico.

La sintaxis:

$.ajax({
    url: "",
    success:function(data){
        // En este punto la petición se ejecuto correctamente
        // podemos hacer algo aquí con data
    },
    error: function( jqXHR, textStatus, errorThrown ) {
        // Si ocurre un error se ejecuta esta función
    })
});

Lo primero que haremos será definir un div en el cual agregaremos el contenido resultante desde el servidor, así como un botón que ejecutará la petición.

<input type="button" id="btnLoad" value="Obtener datos"/>
<div id="lista"></div>

Ahora declaramos el evento click para nuestro botón:

Aquí vimos más acerca del evento click.

$("#btnLoad").click(function(){
  // indicamos que se inició la carga de datos
  $("lista").html("Cargando datos...");
  // procedemos a hacer la petición ajax
  $.ajax({
    // el primer parametro es la url de la petición
    url: "https://jsonplaceholder.typicode.com/posts",
    /* podemos ejecutar una funcion cuando el servidor
    * responde correctamente con success.*/
    success: function(data){
      // data contiene el JSON enviando por el servidor
      var json = data;
      // almacenamos los posts en una variable con html
      var html = "<ul>";
      // iteramos el objeto json que contiene los posts
      $.each(json, function(index, value) {
          // agregamos un nuevo elemento a la lista
          html += "<li>"+value.title+"</li>";
      });
      // cerramos la lista
      html += "</ul>";
      // agregamos la lista completa a nuestro div
      $("#lista").html(html);
    },
    error: function( jqXHR, textStatus, errorThrown ) {
        $("#lista").html( "error:"+jqXHR.status);
    }
  });
});

Por último podemos agregar el metodo error para identificar cuando nuestra petición ajax falló.

Como puedes observar es bastante sencillo. Puedes ver un ejemplo funcionando Aquí.

Un gran saludo! hasta la próxima. 🙂