Programando con Rupert

Cuando la programación es una forma vida...

Tag: AJAX (page 1 of 2)

AngularJS: Routing

Con este artículo voy a dejar descansar esta serie de AngularJS y me centraré de nuevo en Ionic Framework, ahora que ya conocemos lo básico del funcionamiento. En el artículo anterior vimos cómo realizar peticiones asíncronas mediante el servicio $http. En este caso vamos a ver cómo funciona el Routing dentro de una aplicación AngularJS.

Objetivo del ejemplo

Hemos de tener en cuenta que AngularJS basa su infraestructura en las SPA (Single Page Application), es decir, que todo va a ocurrir dentro de la misma página y el módulo de AngularJS y sus controladores serán los encargados de ir mostrando unas u otras vistas. Pero todo ejecutado desde la misma página.

Para ello, en este ejemplo, vamos a tener un Layout con un menú que nos permitirá navegar a través de las diferentes vistas, un main.js que se encargará de definir y configurar el módulo y sus rutas, y una serie de vistas que representarán cada una de las páginas.

Preparación del ejemplo

Para poder trabajar con el Routing de AngularJS, hemos de añadir una referencia a angular-route:

El Contenedor

La página layout.html será la encargada de crear “el marco” de la aplicación. Tiene un menú a través del cual iremos cargando las diferentes vistas en el layout. Las url a las que vamos a apuntar han de comenzar por # (que representa la raíz de la aplicación).

Las vistas se cargarán en el elemento que contenga la etiqueta ng-view.

Por lo tanto, layout.html quedaría más o menos así:

layout.html

Las Vistas

Las vistas en este ejemplo serán páginas creadas dentro de una carpeta views. El contenido de estas vistas sólo ha de tener el html que se quiera cargar, con su respectivo acceso al Modelo.

views/inicio.html
views/gatos.html
views/acercade.html
views/error.html

El Módulo AngularJS

En este caso, estamos hablando de cuatro vistas (inicio, gatos, acercade, error), por lo tanto vamos a tener cuatro rutas diferentes y cuatro controladores diferentes. Lo primero es definir el módulo e inyectarle el módulo ngRoute, que nos permitirá configurar posteriormente las rutas de la aplicación.

Definimos los cuatro controladores, contando con que cada uno tendrá su propio scope:

Por último, se definen las rutas mediante la función config del módulo. El parámetro que recibe es el servicio $routeProvider, que nos permite definir rutas mediante el método when (para rutas definidas) y el método otherwise (para las rutas no definidas). Aparte del controlador y la plantilla, es posible utilizar redirectTo para indicar una redirección.

De esta manera, nuestra configuración de routing quedaría así:

Con esto ya hemos visto cómo funciona de manera básica el routing de AngularJS, teniendo en cuenta que Ionic Framework utiliza el mismo sistema.

¡Hasta la próxima!

Rupert.

AngularJS: Peticiones por AJAX

¡Hola de nuevo! Tras un largo periodo en que mi vida personal y laboral ha dado un giro de 180º, es momento de desempolvar el blog y continuar escribiendo algo.

En el último artículo de AngularJS vimos una pequeña introducción a la Inyección de Dependencias. Esta vez, siguiendo el “hilo argumental”,  y antes de volver a la serie de Ionic Framework, vamos a ver cómo podemos realizar peticiones por AJAX desde un controlador de AngularJS.

Objetivo del ejemplo

En este sencillo ejemplo vamos a ver cómo realizar peticiones asíncronas por medio del servicio $http. Al hacer click sobre un botón, se lanzará una petición contra el servicio localizado en http://www.programandoconrupert.com/ws/servicio-gatos.php. Dicho servicio contiene el siguiente código:

Por lo tanto, recuperaremos un array en formato JSON, que nosostros mostraremos en nuestro HTML.

Preparación del ejemplo

Para comenzar con este ejemplo vamos a tener un módulo llamado AppGatos y un controlador llamado ControladorGatos. En el $scope de ese controlador tendremos una colección que llamaremos gatos, además de una función llamada obtenerGatos, que llamaremos desde un botón en el HTML.

Y este sería el HTML que utilizaremos para llamar a la función obtenerGatos y mostrar el modelo gatos:

Servicio $http

Para realizar la llamada por AJAX al servicio que devolverá el JSON con el array, utilizaremos el servicio de AngularJS $http. Se trata de una API que permite realizar peticiones asíncronas al servidor por medio de XMLHttpRequest o por medio de JSONP.

Para utilizarlo necesitamos inyectarlo al controlador:

Llamada explícita

Como en la mayoría de frameworks Javascript con soporte AJAX, disponemos de una función general donde se pueden específicar todas las peculiaridades de la petición, y por otro lado disponemos de métodos de abreviatura que nos permiten realizar llamadas más genéricas pero de una manera más rápida.

Para utilizar la función general, se le pasa un objeto de configuración con ciertas propiedades, entre las que pueden estar:

  • method – Método HTTP con el que se realiza la petición
  • url – URL a la que realizamos la petición
  • params – Listado de parámetros GET
  • data – Listado de parámetros que se envían en la petición
  • headers – Cabeceras de la petición
  • withCredentials – Indica si la petición requiere credenciales
  • responseType – Tipo de datos que se esperan en la respuesta

Mediante el método .then() especificamos los callbacks que recibirán la respuesta, bien de success o bien de error. El objeto que recibimos tiene estas propiedades:

  • data – Contenido de la respuesta
  • status – Código de estado HTTP
  • headers – Getter del Header
  • config – Objecto de configuración que se utilizó para crear la petición
  • statusText – Texto de estado

De esta manera, en nuestro ejemplo, la llamada para recibir el listado de gatos sería así:

Métodos abreviados

Por el lado contrario tenemos los métodos abreviados para realizar peticiones. Estos métodos ahorran bastante tiempo de desarrollo, permitiendo además añadir el objeto de configuración para especificaciones adicionales. Estos métodos son:

  • $http.get
  • $http.post
  • $http.put
  • $http.delete
  • $http.head
  • $http.jsonp

Con esto hemos visto lo básico para poder comunicarnos con el servidor desde nuestra aplicación Ionic mediante AngularJS.

¡Hasta la próxima!

Rupert.

Consumir Servicios Web REST con JQuery

Este artículo lo escribo como segunda parte del artículo Crear un Servicio Web REST con ASP .NET. Aquí veremos cómo consumir Servicios Web REST desde JQuery. Podéis ver algunos tutoriales de JQuery en este mismo blog.

En el artículo anterior creamos un servicio que desplegaba dos funcionalidades para recuperar información de Clientes según la URL sobre la que se realice la petición:

http://localhost:50316/api/clientes/ – Listará todos los clientes

http://localhost:50316/api/clientes/44444444K – Devolverá la información del cliente con el D.N.I.  44444444K

En este tutorial crearemos una página que recupere mediante JQuery esta información.

Preparación del Ejemplo

Partimos de una página (en mi caso ListadoClientes.aspx) con la siguiente estructura:

La idea es que al cargar la página, se deben rellenar las filas de la tabla tablaClientes, con un DNI y un enlace “Ver Detalle“, que llamará a una función Javascript. Dicha función enviará al servidor el DNI seleccionado y recuperará su información.

GetJSON()

Para lo que queremos conseguir, utilizaremos la función $.getJSON(), que toma como parámetros la url, como dato opcional los parámetros que se envían, y por último una función callback para recuperar la respuesta del servidor. De tal manera que el código Javascript sería el siguiente:

Con este ejemplo simple ya hemos visto cómo recuperar datos desde un servicio REST.

¡Hasta la próxima!
Rupert.

Crear un Servicio Web REST con ASP .NET Web Forms

Tras una serie de cambios en mi vida personal y laboral, que me han mantenido ocupado, vuelvo a tomar las riendas de este blog. En este artículo veremos cómo podemos desplegar servicios web REST dentro de una aplicación basada en ASP .NET.

En uno de los artículos anteriores escribí acerca de las características de los Servicios Web SOAP y los Servicios Web REST. En las aplicaciones de ASP .NET es relativamente fácil crear un Servicio Web SOAP, ya que bastaría con añadir un elemento de tipo “.asmx” y especificarle los Métodos Web que va a tener. Como expliqué en el artículo que he mencionado, la URL que se va a desplegar es el propio fichero .asmx y éste ya contiene tódos los métodos web asignados.

Cuando creamos un Servicio Web REST, sin embargo, se establece una URL base y somos nosotros los encargados de decidir el formato de URL que vamos a aceptar. Dependiendo de si el formato de la URL es uno u otro, ejecutaremos una funcionalidad u otra. Las llamadas esta vez se hacen sobre un método en particular.

En este ejemplo, crearemos un Servicio Web REST que devuelva la información de un Cliente a través de su DNI o bien que devuelva un listado con todos los Clientes.

Formatos de URL

Nuestro Servicio Web REST tendrá la siguiente URL base:

http://localhost:50316/api/clientes

A partir de aquí, dependiendo del formato de la URL a la que llamen, podremos ejecutar 2 funcionalidades:

http://localhost:50316/api/clientes/ – Listará todos los clientes
http://localhost:50316/api/clientes/44444444K – Devolverá la información del cliente con el D.N.I.  44444444K

Preparación del Ejemplo

He creado una aplicación web basada en Web Forms y he añadido una página ListadoClientes.aspx. Esta página de momento sólo tendrá la estructura inicial que luego rellenaremos consumiendo los servicios.

Al cargar la página, llamaremos al servicio REST para que nos devuelva todos los clientes y rellenaremos la tabla tablaClientes. Incluyendo en la columna acción un enlace que permita imprimir en el div detalleCliente los datos completos del cliente seleccionado.

Crear el mapeo de ruta

En el resto de elementos de ASP .NET Web Forms, muchos de los elementos que creamos son accesibles directamente (.aspx, .asmx…). Sin embargo, cuando hablamos de un Servicio REST, podemos especificar el formato de la URL que nos interese. Así que necesitamos decirle a ASP .NET que si detecta una URL específica y con unos parámetros específicos.

Para ello, abrimos el archivo Global.asax (si no existe lo creamos) y escribimos los siguiente en el método Application_Start (independientemente de lo que ya tenga escrito):

Con esto le estamos diciendo que si la URL empieza por api (en vez de “api” podéis poner la palabra clave que queráis) no se trata de un recurso normal, si no que lo tiene que mapear. Depués va el nombre del controlador y por último, puede tener o no un parámetro dni.

Crear el controlador REST

Ahora que ya hemos especificado el mapeo de ruta, vamos a crear el código que se ejecutará cuando se detecten las URL previstas. Para ello crearé una Clase de controlador de Web API y la llamaré ClientesController (El nombre ha de terminar en Controller, ya que .NET quitará Controller para determinar el nombre del controlador en la URL)

Esta clase representará un Servicio REST, que podrá aceptar diferentes protocolos HTTP, así que aparecerán los métodos Get, Post, Put y Delete. Se pueden eliminar los que no interesen. En mi caso, como sólo se van a poder recuperar Clientes, me quedaré con los métodos Get.

Para ello, voy a definir el modelo de datos en un fichero Cliente.cs, será una clase con las propiedades DNI, Nombre y Apellidos (IMPORTANTE: Para que la serialización sea correcta, se ha de añadir el atributo DataContract a la clase y DataMember a las propiedades)

Después, en la clase ClientesController, defino un array que simbolizará el repositorio de clientes y rellenaré el método Get(), que devolverá todos los clientes, y el método Get(String dni), que acepta un parámetro dni

Pues con esto ya podemos probar las URL y ver qué nos devuelve el navegador.

URL: http://localhost:55626/api/clientes

URL: http://localhost:55626/api/clientes/44444444K

En la siguiente entrada veremos cómo podemos consumir este servicio mediante JQuery.

¡Hasta la próxima!

Rupert.

Motor de AJAX – AJAX Parte II

En el artículo anterior expuse una introducción a lo que se va a conseguir si implantamos AJAX en nuestras aplicaciones. Resumiendo, lo que vamos a conseguir es combinar la funcionalidad del servidor con la potencia de JavaScript a la hora de modificar el documento HTML.

Lo que voy a hacer en este capítulo es explicar cómo crear el Motor AJAX por medio de JavaScript. Efectivamente, los frameworks actuales de Javascript como JQuery o Dojo, ya lo tienen implementado en sus funciones de AJAX, pero siempre está bien conocer “el interior” de estos métodos.

Para este artículo propondré dos ejemplos, uno de ellos cargará por medio de AJAX una página en una etiqueta div. El otro generará un desplegable dinámicamente según un XML devuelto desde el servidor.

IMPORTANTE: Para trabajar con AJAX, es necesario un servidor que acepte peticiones HTTP (Apache, Apache Tomcat, IIS…)

Cargar el contenido de una página

En este ejemplo vamos a tener una página principal con dos botones y una etiqueta <div>. Además tendremos otras dos páginas llamadas Contenido1.html y Contenido2.html que tendrán un contenido diferente. Al hacer click en uno de los botones el Motor AJAX solicitará la página de contenido correspondiente y la cargará en el div.

contenido1.html

Esta página únicamente contendrá un contenido HTML

contenido2.html

Esta página únicamente contendrá un contenido HTML diferente a contenido1.html

index.html

Esta página contendrá dos botones (“Cargar Contenido 1” y “Cargar Contenido 2“) y una capa <div>. Dependiendo del botón que se pulse, el Motor AJAX solicitará al servidor la página correspondiente y cargará la respuesta en la capa.

La parte HTML de la página tendría entonces este aspecto:

Como vemos, los dos botones llaman a una misma función que crearemos ahora en la sección de script. Crearemos una función llamada MotorAJAX que recibirá una url por parámetro.

Vamos a explicar el código que acabamos de escribir. Tenemos que tener en cuenta que el núcleo del Motor de AJAX es el objeto de tipo XMLHttpRequest que, dependiendo del navegador, se iniciará como un ActiveXObject.

Una vez creada la petición, se abre la petición mediante el método open(), pasándole la url, el método HTTP y se le indica si la llamada es asíncrona. Por último se envía la petición mediante el método send().

Al ser una tarea asíncrona, hemos de tener en cuenta que la respuesta la recogeremos por medio de un Callback, es decir, una función que se encargue de manejar la respuesta cuando llegue. Para ello, el objeto XMLHttpRequest pasará por cuatro estados (readyState):

  1. El objeto se ha abierto (open) pero no se ha enviado (send)
  2. El objeto se ha enviado (send)
  3. Se está procesando la petición
  4. Respuesta recibida

El que suele interesar tratar es el estado 4. Por eso, antes de abrir la petición establecemos el evento onreadystatechange.

Por último cargamos la propiedad responseText en la capa “contenido”.

Cargar datos de un XML

En este ejemplo no vamos a cargar el contenido de una página, si no que lo que vamos a hacer es leer datos de un XML. Tendremos por un lado un archivo xml con datos y por otro una página con una etiqueta <select>.

cargaXML.html

Esta página únicamente tendrá un desplegable que cargará los datos de lenguajes.xml por medio de AJAX, por lo que el código del Motor AJAX, será muy parecido al anterior. Con una diferencia, en vez de recuperar “responseText“, recuperaremos “responseXML

Con estos dos ejemplos ya hemos visto cómo funciona el motor de AJAX, aunque, como he dicho, los frameworks de Javascript existentes ya tienen este motor integrado, pero siempre nos dejarán acceder al objeto XMLHttpRequest, por lo que conocerlo nos facilitará mucho las cosas.

¡Hasta la próxima!

Rupert.

Entradas anteriores

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑