Laboratorio Peticiones Ajax PDF

Preview

Summary

Download Laboratorio Peticiones Ajax PDF

Description

29-4-2020

LABORATORIO Laboratorio Programación en el Cliente Web

JAIME EDUARDO FALLA CARDOZO CARLOS ALBERTO HERNANDEZ RINCON JESSON EMBER BEJARANO MOSQUERA MAESTRÍA EN INGENIERÍA DE SOFTWARE Y SISTEMAS INFORMÁTICOS

INTRODUCCION En este laboratorio se realizaron peticiones desde un cliente web a un servidor mediante estándares web, las respuestas obtenidas se muestran en el navegador mostrando la evolución en la manera de realizar dichas peticiones.

OBJETIVOS Trabajar con estándares web relacionados con conexiones AJAX, funciones asíncronas y componentes.

INSTALACIONES DE EXTENSIONES REQUERIDAS EN Visual Studio Code

Antes de iniciar con los ejercicios, se instalaron sobre Visual Studio Code las siguientes extensiones. HTML Boilerplate

Bootstrap 4 Snippets Year 2020

Estas extensiones permitieron generar código HMTL y Bootstrap de forma rápida

DESARROLLO DEL LABORATORIO Fuente de Información El actor y experto en artes marciales Carlos Ray Norris (mundialmente conocido como Chuck Norris), ha servido desde hace mucho tiempo como fuente de inspiración de cientos de chistes respecto a su fortaleza, coraje y determinación. Tal es así, que incluso existe una base de datos oficial (ICNDB) de estos chistes. Además, esta base de datos posee un API REST muy fácil de usar. Lo que vamos a implementar es precisamente el consumo de los servicios que ofrece esta API y traernos esos chistes para mostrarlos en un navegador, lo divertido será darnos un paseo a través de la historia de la manera como fue evolucionando la manera de realizar las peticiones. Para empezar, se crea en Visual Studio Code una Carpeta ChistesChuck que contendra paginas html que contendrán cada una de la forma de peticiones solicitadas. Resolución del ejercicio a la manera de 2005 El

objeto

20120117/)

XMLHttpRequest nos

permite

hace

(https://www.w3.org/TR/2012/NOTE-XMLHttpRequest1peticiones

AJAX

( https://developer.mozilla.org/en-

US/docs/Web/Guide/AJAX) de manera bastante cómoda. Para este efecto se crea una página html llamada Chuck2005.html. A continuación, vemos el contenido html y dentro de la sección script la respetiva llamada solicitada

Como se observa se instancia un objeto de tipo XMLHttpRequest en cual permitirá obtener un llamada tipo GET al api http://api.icndb.com/jokes/random/ y de esta manera obtener aleatoriamente un chiste, a continuación vemos la ejecución sobre el navegador Chrome aplicamos elemento Jumbotron.

Bootstrap para estilizar la visualización y mostramos sobre un

Resolución del ejercicio a la manera de 2006 A principios de 2006 nació jQuery (https://jquery.org/) de la mano de John Resig. Todo empezó en un sencillo e inocente post en su blog. Entre otras muchas cosas increíbles, el framework jQuery incorpora una nueva instrucción $. Ajax (…) muy útil. Para el desarrollo de esta actividad se creó una página Chuck2006.tml a continuación se observa el código html y el respectivo script que realiza la magia

$.get("http://api.icndb.com/jokes/random", var

textoChiste

(response)

=>

{

=response.value.joke;

$('h1').text(textoChiste); })

En el código anterior podemos observar cómo se realiza una petición GET a la API, luego a la variable textoChiste se le asignar el valor de la respuesta que viene el path value. joke (que es el chiste) y al final a la etiqueta le asigna este valor. Ahora observemos la ejecución sobre el navegador Chrome.

¿Qué diferencias ves con respecto al ejercicio anterior? Básicamente se pasó de un bloque extenso para realizar el consumo del API a tres líneas que son de fácil entendimiento. ¿Cómo simplifica la vida jQuery? JQuery simplifica la forma en las que se realizan las tareas tales como seleccionar elementos o realizar peticiones AJAX además es Cross browser lo cual garantiza su funcionamiento en la mayoría de los navegadores actuales. ¿Qué ocurre si tenemos varios tags h1? Le asignara el valor del chiste a todos los que tengamos.

Se han pintado 5 más como se ve en la imagen ahora veamos la salida en el navegador

Resolución con plugin de jQuery (hasta 2014) jQuery no tardó en tener soporte para plugins (¡apenas unas semanas tras su nacimiento!). Ahora se crea una nueva página html Chuck2014.html, en el cual se pintará el código html y en el script accederemos al API con plugin jQuery de ICNDB, se presenta a continuación el código html y respectivo script de acceso al API

$. icndb. getRandomJoke((response) => { var textoChiste = response.joke; });

Con el código anterior se está realizando una petición GET a la librería icndb, posteriormente en la variable textoChiste se recupera el valor del response. joke que no es otra que el chiste dicho valor finalmente se asigna a un . Ahora ejecutamos y visualizamos la salida sobre el navegador Chrome.

Ahora se va a modificar el ejercicio anterior usando el método s. icndb. getRandomJokes y se mostraran los elementos en una lista ordena (tag ) para tal fin se crea una nueva página html Chuck2014-2.html y se elimina el jumbotron del body

Adicional dentro del script al response se invoca un ForEach para iterar y mostrar los chistes como elementos de la lista. A continuación, se observa la salida en el navegador

¿cómo se escribían las funciones en las versiones de ECMAScript previas a la versión 6?

Principalmente las funciones se definían con la palabra Function, hoy ante la evolución a TypeScript se pueden definir con Function Flecha. //ES5function(){ . ..} //ES6()=> { . ..}

Resolución en 2014 A partir de finales de 2013 y predominantemente en 2014, contamos con el API fetch, que permite hacer llamadas AJAX de manera muy limpia «a la jQuery».

¿Qué es el WHATWG? El ( Grupo de trabajo de tecnología de aplicaciones de hipertexto web) por sus siglas en inglés WHATWG es una organización que mantiene y desarrolla HTML y APIs para las aplicaciones Web. Antiguos empleados de Apple, Mozilla y Opera establecieron el WHATWG en el 2004. Los editores de especificación en el WHATWG investigan y recopilan comentarios para los documentos de especificación. El grupo también tiene un pequeño comité de miembros invitados y autorizados para anular o reemplazar editores de especificación. Puedes unirte como un colaborador registrándote en la lista de correo. De acuerdo con su sitio web , WHATWG es una respuesta al W3C's lento progreso en los estándares Web, especialmente HTML, que el W3C dejó de desarrollar para concentrarse en XHTML.

El WHATWG mantiene especificaciones para HTML, DOM, y JavaScript. Repitiendo el ejercicio anterior, pero teniendo en cuenta el API Fetch se crea la página Ejercicio.Fetch.html. A continuación, se observa cómo queda estructurada la página.

A continuación, se muestra la salida en el navegador Chrome.

Invocación por Node-Fetch Para este ejercicio, se realizó la instalación del paquete nuget node-fetch, por consola de comandos utilizando el comando @npm install node-fetch El resultado completo del ejercicio se anexa al presente documento con el nombre Ejercicio.node.Fetch.js y sus correspondientes referencias o módulos relacionados.

Resolución del ejercicio con Web Components (presente) Y por fin llegamos a la forma de resolver este ejercicio de la manera más elegante posible: con Web Components. Vamos a usar el componente descrito aquí. Este módulo no se trata de un script de JavaScript o un CSS a la antigua usanza, sino de un web component moderno. Para usarlo, se necesita la nueva directiva import definida en las últimas especificaciones del W3C (https://www.w3.org/TR/html-imports/).

Creamos una página

ChuckWebComponetns2016.html y se usa el GitHub como CDN, a continuación, se muestra la estructura de la página, se mostrará la salida de datos pintando una tabla con skeleton

A continuación, se muestra la salida en el navegador Google Chrome...