Tutorial de como consumir un Web Api REST desde jQuery

May 7, 2020June 29, 2020 steven.checo.19

Aquí aprenderás a como consumir un web Api REST utilizando Ajax desde jQuery, este tipo de consultas nos facilita bastante a la hora de consumir este tipo de servicios ya que nos permite hacer una consulta de manera asíncrona y sin la necesidad de tener que refrescar toda nuestra web para poder actualizar nuestro contenido.

Para empezar el tutorial deberemos tener a mano la siguiente librería de jQuery agregada en nuestro archivo.

Puedes descargarlas desde jQuery o bien puedes agregar el CDN de la librería:

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

Vamos a buscar un la pagina JSON Place Holder, para obtener un ejemplo de una estructura json tal como si fuera un web api, al hacer click en el enlace, veremos algo como esto.

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },

Ya aqui tenemos lo necesario para empezar a trabajar nuestro archivo que consumira nuestro Web Api de ejemplo.

Bien este tipo de archivos debemos de colocarlo en algun ambiente servidor que tengamos disponible, ya sea uno contratado o en nuestra misma computadora, yo en este caso utilizo apache, pueden instalarlo a través de AppServer para que les instale el servicio Apache para el servidor, MySQL y PHP.

Luego de tenerlo instalado, nos dirigimos a la ruta C:\AppServ\www\ y crearemos una carpeta nueva, pueden utilizar el nombre que mas les guste, yo utilizare EjemploWebApi.

Dentro de la carpeta crearemos un archivo HTML, puede ser Index o como gusten.

Abrimos el archivo en nuestro editor de texto avanzado (Utilizo Sublime Text).

Haremos nuestro ezquema HTML tal cual se muestra en la imagen:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	
	<script
	src="https://code.jquery.com/jquery-3.4.1.js"
	integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
	crossorigin="anonymous"></script>

</head>
<body >
	<table id="tabla" border=1>
		<thead>
			<tr>
				<th>Id</th>
				<th>Title</th>
				<th>Body</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>
	<script> 

	</script>
</body>
</html>

Ya luego de tener eso, vamos a crear nuestro script jQuery para poder consultar nuestro WebApi.

Debajo del cierre de nuestro archivo, tenemos un bloque <script></script> abierto, aqui insertaremos el codigo siguiente.

$(document).ready(function () {  
     $.ajax({  
         type: "GET",  
         url: "https://jsonplaceholder.typicode.com/posts/",    
         dataType: "json", 
         success: function (data) {  
               $.each(data, function(i,item){
                     var row = "<tr>"+
                     "<td>" + item.id + "</td>" + 
                     "<td>" + item.title + "</td>" +
                     "<td>" + item.body + "</td>" +
                     "</tr>";						 
                    $("#tabla>tbody").append(row);
                });
         }, //End of AJAX Success function  
     });         
});

Para empezar nuestro script ajax en jQuery, tan solo debemos de colocar $.ajax({}); dentro de esos corchetes ira nuestra configuración que nos permitirá acceder al web api, la configuración es la siguiente:

TYPE: Aquí vamos a especificar el tipo de request que haremos al servidor o Web Api que vamos a utilizar, en este caso solo estamos utilizando método GET, bien pueden utilizar (GET, POST, DELETE,PUT).

GET: lo utilizamos para simplemente obtener datos del Web Api.
POST: lo utilizamos para poder enviar datos al Web Api o mejor dicho en caso que queramos insertar algún registro nuevo.
DELETE: Se utiliza para indicar al Web Api que estamos requiriendo eliminar un registro.
PUT: Con este le indicamos al Web Api que queremos actualizar un registro.

URL: Aquí colocaremos la dirección de nuestro Web Api, al que vamos a acceder, en el ejemplo tiene colocado la dirección que suministre mas arriba de JSON Place Holder.

DATATYPE: Con esto le indicamos a nuestro script el tipo de formato que estaremos recibiendo o consultando, mejor dicho el retorno de nuestro Web Api, en este caso seria “JSON”.

SUCCESS: En esta sección se lanza cuando el script ha completado el request al servidor, utilizamos esta sección para capturar nuestros datos a través de una función, en la que especificamos una variable para capturar nuestro retorno, dentro de la misma función, podemos indicar donde queremos mostrar la data o cualquier evento que vayamos a utilizar, en nuestro ejemplo definimos una estructura para el cuerpo de la tabla.

Como indicamos anteriormente, dentro de la función que agregamos al evento Success, colocamos la variable “data”, la misma, nos servirá para poder capturar los datos que nos devuelve nuestro web api, para obtener los datos en caso de que sea una colección de registros, debemos utilizar un bucle para poder recorrer de manera completa nuestra colección y mostrarla donde queramos.

En el ejemplo que tenemos, utilizamos un bucle “Each”, este tipo de bucle es propio de jQuery.

Trabaja con dos secciones $.each(primea,segunda):

En la primera sección la utilizamos para indicarle la variable que vamos a recorrer, en este caso “data”.
En la segunda sección le asignamos una función para poder capturar el record de cada registro uno por uno.

Esta función utiliza dos parámetros function(parámetro1,parametro2){},

Parametro1: captura la posición de la fila recorrida 0,1,2,3,4,5 etc…
Parámetro2: Captura el record de cada fila que el bucle esta recorriendo, para pode acceder a los datos, solo debemos de indicar el nombre de esta variable como se ve en el ejemplo “item” + punto + nombre de la seccion o variable del json que nos retorna el web api, en este caso serian.
item.id
item.title
item.body

Hasta aquí este pequeño tutorial de como consumir un web api rest desde jQuery con Ajax, te dejo un video de mi canal mas abajo explicando este mismo tutorial.