Social Icons

twitter facebook google plus linkedin

miércoles, 18 de enero de 2017

Enviar datos a Azure Mobile Apps usando jQuery

Hola Mundo:

Este artículo es un tanto distinto a los que siempre se publican. Esta vez es sobre desarrollo, pero
consumiendo servicios publicados en Microsoft Azure.

Azure Mobile Apps es un servicio de Microsoft Azure que permite levantar, sin mayor esfuerzo, un backend para aplicaciones móviles. Este backend puede estar construido con ASP.NET o Node.js.
De cualquier manera, provee las herramientas para generar una REST API lista para ser consumida desde las aplicaciones cliente.

Me refiero a aplicaciones cliente y no móviles, porque estos servicios pueden ser consumidos desde cualquier lugar. Incluso desde un sistema web usando Javascript.

En este caso puntual, compartiré una ayuda de memoria para enviar datos usando jQuery usando el método AJAX:
$.ajax({
 type: "POST",
 contentType: "application/json; charset=UTF-8",
 url: "https://xxxxxxx.azurewebsites.net/tables/xxxxxx",
 headers: {'ZUMO-API-VERSION': '2.0.0', 'Content-Type': 'application/json'},
 data: JSON.stringify({
  "Campo1": "Valor1",
    "Campo2": "Valor2"
 }),
 dataType: "json",
 accept:  "json",
 success: function(datos){
   console.log(datos)
   alert('Datos reportados correctamente')
 },
 error: function(jqXHR, estado, error){
   console.log(estado)
   console.log(error)
 },
 complete: function(jqXHR, estado){
   console.log(estado)
 },
 timeout: 1000000000
});

Lo relevante:

  • El type es POST. No olvidar que estamos enviando datos al servidor. Si tienes duda sobre esto, revisa este link: http://www.restapitutorial.com/lessons/httpmethods.html
  • contentType debe ser "application/json; charset=UTF-8". El servidor recibe datos en formato JSON. De otra forma, arrojará error 500.
  • La url es la dirección web del servicio. Esta es la forma más estándar si es que no han creado una personalizada.
  • La cabecera de la petición se indica en headers. Siempre debe estar incluido 'ZUMO-API-VERSION': '2.0.0' y  'Content-Type': 'application/json'. En el caso que alguno falte, la consola indicará que hace falta una de las dos y arrojará un error 500 o 400.
  • En data se indican los datos que se enviarán. El método stringify del objeto JSON es el encargado de hacer que los datos que estamos enviando sigan el formato de JSON.  Recuerden que en contentType y en la cabecera se indica que estamos enviando datos en formato JSON. Si esto no está, recibirán un error 400.
  • El atributo accept le indica al servidor el formato en el que se requiere la respuesta.
  • El atributo dataType es usado por jQuery para "formatear" la respuesta antes de dejarla disponible para el trabajo con ella.
  • Success indica la función que se ejecutará cuando los datos se reporten correctamente.
  • Error indica la función que se ejecutará cuando se produzca un error en el reporte de datos.
  • Complete indica la función que se ejecutará luego de la ejecución de lo indicado en Success o Error.
  • Timeout indica el tiempo total de espera, en milisegundos, antes de cancelar la operación. Previene una ejecución casi infinita de la solicitud.
Nada más quería estar a la moda y jugar un rato con Javascript y Azure.

Espero que les sea de su total utilidad.