Angular de 0 a 100

Aplicaciones web del lado del cliente

Las aplicaciones web del lado del cliente (también conocidas como aplicaciones de página única o SPA, para abreviar) son un fenómeno más reciente, y la industria informática se está moviendo más hacia este modelo. Aquí, gran parte de la aplicación aún se ejecuta en el servidor, pero también se ejecuta algún código en el cliente (el navegador web) para evitar la regeneración frecuente de páginas. Cuando el usuario realiza una acción en el cliente, envía una solicitud al servidor, que hace algo y devuelve información sobre el resultado, no una página HTML completamente nueva. El código del lado del cliente escucha una respuesta del servidor y decide qué hacer como respuesta sin generar una nueva página. Las aplicaciones web del lado del cliente tienden a ser más interactivas y flexibles porque pueden responder más rápidamente al usuario, no tienen que esperar en el servidor para enviar tanta información. Solo tienen que esperar a que el servidor responda con un resultado, en lugar de una página HTML completa.

Ni blanco ni negro

Así que básicamente hay dos tipos de aplicaciones web: lado servidor y lado cliente (SPA).
Si se piensa que son en blanco y negro, su aplicación web debe estar en algún lugar en el medio, en el área “gris”.
El lado del servidor debe seguir siendo el repositorio de las cosas inteligentes: las reglas comerciales, el almacenamiento de datos y la configuración deben permanecer en el servidor y ser invocadas o recuperadas del lado del cliente cuando sea necesario.
El lado del cliente (navegador) debe utilizar la tecnología más moderna del lado del cliente para evitar actualizaciones de página completa. Sin embargo, no debe ser demasiado inteligente. Debe saber lo suficiente como para hacer su trabajo de interacción con el usuario y nada más. Debe invocar código en el lado del servidor para hacer cosas inteligentes o realizar procesos de negocios. No debería tener demasiada lógica de negocios, datos internos del sistema (datos que no sean los datos que el usuario puede ver o modificar) o información codificada porque se administra mejor en el servidor.

Creando aplicaciones web con AJAX

AJAX significa JavaScript asíncrono y XML. AJAX es una técnica para crear mejores aplicaciones web, más rápidas y más interactivas con la ayuda de XML, HTML, CSS y JavaScript.
Cuando una aplicación web del lado del cliente necesita comunicarse con el servidor, utiliza AJAX para enviar algo y espera que el resultado regrese. Recuerde, obtiene un resultado que solo contiene datos, no una página web completamente nueva. Además, el código del lado del cliente no deja de ejecutarse mientras está esperando, porque todavía tiene que mostrar la interfaz de usuario y responder al usuario. Esta es la parte asíncrona de AJAX.
Las aplicaciones web del lado del cliente utilizan JavaScript para invocar la solicitud AJAX y responder a ella. Esta es la parte de JavaScript de AJAX.
Las solicitudes de AJAX se utilizaron para usar XML (Extensible Markup Language) como el formato para la solicitud de datos y resultados que van y vienen entre el cliente y el servidor. Hoy en día, AJAX tiende a usar JSON (Notación de objetos de JavaScript) como formato de datos en lugar de XML. Esto se debe a que JSON es mucho más compacto y se asigna más directamente a las estructuras de datos utilizadas en los lenguajes de programación modernos. Pero tanto XML como JSON son formatos comúnmente utilizados para transferir datos en forma de texto.

Anteriormente, utilicé el término asíncrono. Puedes pensar en asíncrono de esta manera: Usted llama a su cónyuge para pedir un favor. Su teléfono está ocupado, así que deja un mensaje pidiéndoles que se detengan en el supermercado y le compren una caja de cereal. Mientras tanto, sigue viendo televisión, porque estas cosas están sucediendo de forma asíncrona. Los resultados de este proceso incluirían lo siguiente:

  • Éxito: el cónyuge te devuelve la llamada y te dice que el cereal está en camino.
  • Fracaso: el cónyuge le devuelve la llamada y le dice que la tienda estaba cerrada.

En AJAX, el código del lado del cliente no deja de ejecutarse mientras espera la respuesta del servidor, al igual que usted no dejó de mirar televisión mientras esperaba que su cónyuge se comunicara con usted. ¿Es simple de entender verdad?.[/vc_column_text][vc_column_text css=”.vc_custom_1546125525562{margin-top: 44px !important;}”]

Callbacks

Normalmente, cuando hace una llamada AJAX, debe decirle qué hacer mientras se recibe la respuesta del servidor. Al código que AJAX debe disparar cuando se recibe la respuesta se conoce como Callback.
Hay dos tipos de Callback:

  • Éxito: la devolución de llamada exitosa (o hecha) se invoca si el servidor responde correctamente y el cliente recibe la respuesta sin error.
  • Error: la devolución de llamada de error o error es opcional y se invoca si el servidor responde con un error (o si la llamada AJAX no puede comunicarse con el servidor).
[/vc_column_text][vc_column_text css=”.vc_custom_1546128692681{margin-top: 44px !important;}”]

Promesas

Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca. Una promesa, como su propio nombre lo dice, es simplemente un objeto que puede o no devolver algún valor en la línea de tiempo presente y futuro. Me gusta describir una promesa como lo que se conoce como Karma: Tú haces algo, y en consecuencia obtendrás algo, ahora o en un futuro.[/vc_column_text][vc_column_text css=”.vc_custom_1546224028955{margin-top: 44px !important;}”]

Analizando JSON

A menudo, recibirá respuestas largas JSON del servidor y deberá recorrer estos datos para extraer solo los datos que necesita. Los datos de respuesta pasarán como llamada exitosa AJAX como un argumento. Aquí hay algunos consejos para examinar estos datos:
Convertirlo en una cadena: puede llamar a la función JSON.stringify para convertir los datos de respuesta en una cadena. Esto le permitirá enviarlo a la consola en su devolución de llamada exitosa, como se muestra aquí:

function success(data){

console.log(‘success – data:’ + JSON.stringify(data));

//

// do something with data 

//

}

Copie los datos JSON fuera de la consola: para copiar los datos JSON en su portapapeles, haga lo siguiente:
1. Abra su navegador.
2. Ve al menú de herramientas para desarrolladores.
3. Haga clic en la consola opeion.
4. Seleccione texto JSON.
5. Haga clic derecho y seleccione Copiar.

Formatee los datos JSON para que sean más legibles: ahora que tiene los datos JSON en su portapapeles, puede copiarlos y pegarlos en un sitio web para que sean más legibles:

1. Abra su navegador.

2. Vaya a https://jsonformatter.curiousconcept.com (o un servicio similar, hay muchos de estos).

3. Pegue el JSON en el cuadro de texto grande.

4. Haga clic en el botón Procesar. El sitio web le mostrará los datos JSON en una página web validada, formateada y fácil de leer, como se muestra en la Figura 1-8. Incluso puede ver la pantalla completa JSON.

5. Copie los datos JSON y péguelos en su editor: luego puede aplicar los comandos de formato de su editor. Es posible que primero deba guardar el archivo como un archivo .js para asegurarse de que lo formateé como JavaScript.