Cargando

Ir a contenido


 


Comunicación HTTP con AngularJS

En este tutorial vamos a ver cómo se da la comunicación HTTP cuando estamos trabajando con una aplicación hecha en AngularJS.


Escrito por el sep 19 2014 03:27 angularjs


Cuando trabajamos con Javascript lo normal es que si queremos obtener datos desde un servidor debemos hacer peticiones vía Ajax esto nos hace tener que manipular los diferentes métodos HTTP para poder tener las respuestas adecuadas desde el servidor.

AngularJS no es diferente en este enfoque y por lo tanto necesita hacer peticiones a servidores vía HTTP para poder obtener la información con la cual poder llenar los modelos de datos, esto es la base de cualquier aplicación.

La petición


En la antigüedad teníamos que manipular de forma directa el objeto XMLHttpRequest dentro de nuestros documentos con Javascript de forma que pudiéramos poder obtener los datos y enviar las diferentes peticiones, esto resultaba en código extremadamente largo, repetitivo y poco legible, para una muestra veamos un esquema de petición estándar de épocas pasadas:


Como vemos primero debíamos definir cómo manejar la respuesta a la petición, estableciendo los métodos estándar y también debíamos manejar los errores de forma manual, finalmente abríamos la conexión al servidor y enviábamos los datos. Esto en su momento fue algo revolucionario, sin embargo lo engorroso de su aplicación hizo que se llevara a cabo una modernización de todo esto.

Ahora nos movemos unos 10 años hacia adelante y tenemos a AngularJS quien nos simplifica la forma en la que nos comunicamos con los servidores vía HTTP, para ello contamos con la interfaz XHR que nos permite hacer llamadas asíncronas a los diferentes servidores y con los diferentes métodos HTTP, esto hace que la implementación anterior se vea simplificada y nos facilite el desarrollo como podemos notar en el siguiente ejemplo:


Aquí vemos como con el método get() llamado con la variable $http, podemos invocar a una ruta de un servidor y además pasar parámetros de forma sencilla, luego si tenemos una respuesta de éxito podremos ejecutar alguna acción y en caso de tener una respuesta de error podemos ejecutar otra diferente.

Comparación
Si comparamos las formas entre lo antiguo y lo que se ha logrado con AngularJS, vemos que no hay puntos apenas en común más que la funcionalidad, por supuesto la forma vieja es lo que dio paso a todo lo que podemos tener en nuestros días para poder hacer un desarrollo más rápido y menos confuso.


Otros métodos HTTP


En el ejemplo anterior apenas vimos cómo hacer una petición vía GET, sin embargo podemos utilizar todos los métodos disponibles en HTTP, veamos los que tenemos disponibles:
  • GET
  • HEAD
  • POST
  • DELETE
  • PUT
  • JSONP
Como vemos tenemos varios de donde escoger, el uso de uno u otro vendrá dado de nuestro requerimiento, así si queremos consultar algo utilizaremos GET, si queremos enviar un dato utilizaremos POST, veamos en el siguiente ejemplo como hacer una petición POST:


Vemos cómo podemos pasar variables que contengan diferentes datos dentro de la petición y utilizamos el método post() en este caso para hacer referencia al método HTTP deseado.

Con esto finalizamos este tutorial, hemos visto cómo podemos manejar los diferentes métodos en AngularJS y la mejora que se ha vivido a lo largo de los años respecto a formas anteriores de lograr la comunicación vía HTTP con los servidores.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 19 2014 03:27
  •   Actualizado sep 19 2014 10:48
  •   Visitas 841
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse