Audiencia de este artículo:
Ingeniero de desarrollo front-end/back-end; Diseñador de aplicaciones web; Gerente de proyecto; Gerente de producto, etc.
Por qué quieres saber?
Comprender los fundamentos de la interacción front-end y back-end es muy importante para las personas que trabajan en roles relacionados con el desarrollo web. Esto incluye desarrolladores front-end, desarrolladores back-end, desarrolladores full-stack, diseñadores de aplicaciones web, gerentes de proyectos y gerentes de productos, entre otros. Ya sea que trabaje en desarrollo, diseño o administración, comprender los fundamentos de las interacciones front-end y back-end lo ayudará a comprender e impulsar mejor el desarrollo y la entrega de aplicaciones web.
Sus principios básicos generalmente incluyen los siguientes aspectos, y este artículo también desarrollará sus respectivas funciones y el significado de estos aspectos
protocolo HTTP
tecnología AJAX
Formato y transmisión de datos
Métodos de comunicación front-end y back-end
Diseño y especificación de la interfaz
Intercambio de recursos de origen cruzado (CORS) y seguridad
protocolo HTTP
En la interacción front-end y back-end, el protocolo HTTP (protocolo de transferencia de hipertexto) es uno de los protocolos más utilizados. HTTP es un protocolo de capa de aplicación que se utiliza para transferir datos entre aplicaciones web. Define las reglas y convenciones para la comunicación entre clientes y servidores.
Los siguientes son algunos conceptos y puntos clave del protocolo HTTP:
Solicitudes y respuestas: la comunicación HTTP se realiza a través de solicitudes y respuestas. El cliente envía una solicitud HTTP al servidor, y el servidor procesa la solicitud y devuelve una respuesta HTTP al cliente.
Método: HTTP define varios métodos de solicitud, los más comunes son GET, POST, PUT, DELETE, etc. Se utilizan diferentes métodos para realizar diferentes operaciones, como obtener recursos, enviar datos, actualizar recursos y eliminar recursos.
URL: URL (Localizador uniforme de recursos) se utiliza para identificar la ubicación del recurso al que se accede. Consiste en el tipo de protocolo, la dirección del servidor, la ruta y los parámetros de consulta opcionales.
Encabezado de solicitud: una solicitud HTTP incluye un encabezado de solicitud, que se utiliza para pasar metadatos sobre la solicitud, como el método solicitado, el recurso solicitado, el tipo de contenido solicitado, etc.
Cuerpo de solicitud: algunas solicitudes, como las solicitudes POST, pueden contener un cuerpo de solicitud. El cuerpo de la solicitud se utiliza para pasar datos al servidor, como datos de formulario, datos JSON, etc.
Código de estado de respuesta: una respuesta HTTP incluye un código de estado que indica el resultado del procesamiento de la solicitud. Los códigos de estado comunes incluyen 200 para éxito, 404 para recurso no encontrado y 500 para errores internos del servidor.
Encabezado de respuesta: la respuesta HTTP también incluye un encabezado de respuesta, que se usa para pasar metadatos sobre la respuesta, como el tipo de contenido de la respuesta, la longitud de la respuesta, etc.
Cuerpo de la respuesta: el cuerpo de la respuesta es el contenido de los datos reales devueltos por el servidor al cliente, que pueden ser diferentes tipos de datos, como HTML, JSON e imágenes.
Cookie y Sesión: El protocolo HTTP admite el uso de Cookie y Sesión para mantener el estado. El servidor puede almacenar cierta información del estado del cliente configurando una cookie en la respuesta, y el cliente guarda la cookie y la envía al servidor en solicitudes posteriores.
El protocolo HTTP es un protocolo sin estado, cada solicitud y respuesta son independientes entre sí y el servidor no retiene información de estado sobre el cliente. Para resolver este problema, a menudo se utilizan mecanismos como Cookie, Sesión y Token para implementar la autenticación de usuarios y la gestión de sesiones.
Al seguir el protocolo HTTP, el front-end y el back-end pueden realizar operaciones como la interacción de datos, la adquisición de recursos y la gestión de estado para realizar una lógica compleja de interacción entre el front-end y el back-end.
tecnología AJAX
AJAX (JavaScript asíncrono y XML) es una tecnología para la interacción asíncrona de datos en aplicaciones web. Actualiza parte del contenido de la página intercambiando datos con el servidor en segundo plano sin actualizar toda la página.
Estos son los puntos clave de las técnicas AJAX:
Comunicación asíncrona: AJAX utiliza un mecanismo de comunicación asíncrona , es decir, en el proceso de envío y recepción de datos en segundo plano, no bloqueará la carga de la interfaz de usuario ni de toda la página. Esto permite que las páginas sigan respondiendo al mismo tiempo que permite que los datos se procesen en segundo plano.
Objeto XMLHttpRequest: AJAX utiliza el objeto XMLHttpRequest para lograr la interacción de datos con el servidor. Permite enviar solicitudes al servidor a través de código JavaScript, y recibir y procesar los datos devueltos por el servidor.
Formato de datos: AJAX no se limita al intercambio de datos utilizando el formato XML, aunque XML se usaba comúnmente en las primeras aplicaciones de AJAX. Ahora, los formatos de datos comunes son JSON (Notación de objetos de JavaScript) y XML, y se debe seleccionar el formato de datos adecuado de acuerdo con los requisitos de la aplicación.
Programación dirigida por eventos: AJAX se basa en un modelo de programación dirigida por eventos. Al escuchar varios eventos del objeto XMLHttpRequest (como la finalización de la solicitud, el cambio de estado, etc.), las operaciones correspondientes se pueden realizar en el momento adecuado, como la actualización del contenido de la página, el procesamiento de los datos devueltos, etc.
Solicitud entre dominios: debido a las restricciones de la política del mismo origen del navegador, AJAX generalmente no puede solicitar datos entre dominios. Para evitar esto, se pueden usar técnicas como el Intercambio de recursos de origen cruzado (CORS) o JSONP para permitir solicitudes de origen cruzado.
Consideraciones de seguridad: dado que las solicitudes de AJAX se realizan en segundo plano, es necesario tener en cuenta las consideraciones de seguridad. Especialmente cuando se maneja la entrada del usuario o se envían datos confidenciales, se requieren medidas de protección y validación adecuadas para evitar violaciones de seguridad.
La aplicación de la tecnología AJAX puede mejorar la experiencia del usuario, mejorar el rendimiento y la eficiencia de las aplicaciones web. Al actualizar parcialmente el contenido de la página, se puede reducir el uso del ancho de banda de la red, se puede mejorar la velocidad de carga de la página y se puede realizar la función de actualización de datos en tiempo real. AJAX se usa a menudo para implementar escenarios como el envío de formularios sin actualizar, la búsqueda en tiempo real y la carga dinámica de contenido.
Los marcos y bibliotecas front-end modernos, como React, Angular y Vue, también brindan herramientas y tecnologías más avanzadas para simplificar y optimizar las operaciones de AJAX, lo que permite a los desarrolladores front-end manejar más fácilmente las interacciones de datos asincrónicos.
Formato y transmisión de datos
En las interacciones front-end y back-end, el formato de datos y el método de transmisión son aspectos muy importantes, que determinan la estructura de los datos y cómo transferirlos entre diferentes sistemas.
Formato de datos:
JSON (Notación de objetos de JavaScript): JSON es un formato de intercambio de datos liviano ampliamente utilizado en la interacción de datos de front-end y back-end. Basado en la notación literal de objetos de JavaScript, es fácil de leer y escribir, así como fácil de analizar y generar. JSON admite la representación de tipos de datos primitivos (cadenas, números, booleanos, nulos), objetos y matrices.
XML (Lenguaje de marcado extensible): XML es un lenguaje de marcado de propósito general que se utiliza para representar datos estructurados. Puede describir estructuras de datos complejas y relaciones jerárquicas, y tiene una buena escalabilidad. El formato estricto de XML requiere el uso de etiquetas para definir la estructura y la semántica de los datos.
método de transferencia:
HTTP (Protocolo de transferencia de hipertexto): HTTP es el protocolo de transferencia más utilizado para transferir datos entre aplicaciones web. A través del protocolo HTTP, puede utilizar métodos como GET y POST para enviar solicitudes y recibir respuestas.
WebSocket: WebSocket es un protocolo de comunicación full-duplex que permite una conexión persistente entre un cliente y un servidor y una comunicación bidireccional en tiempo real. En comparación con las solicitudes HTTP, WebSocket proporciona una latencia más baja y un rendimiento más alto, y es adecuado para escenarios que requieren comunicación en tiempo real .
RESTful API: REST (Representational State Transfer) es un estilo de diseño para crear servicios web escalables. La API RESTful usa el protocolo HTTP y sigue un conjunto de principios y convenciones unificados, lo que hace que la comunicación entre el front-end y el front-end sea más fácil y confiable.
GraphQL: GraphQL es un lenguaje de consulta y un entorno de tiempo de ejecución para API que permite a los clientes solicitar explícitamente los datos que necesitan. En comparación con la API RESTful tradicional, GraphQL puede evitar el problema de la obtención excesiva o la falta de datos y proporcionar una transmisión de datos más precisa.
Socket.IO: Socket.IO es un marco de aplicación en tiempo real basado en el protocolo WebSocket y proporciona una comunicación bidireccional confiable . Puede transferir datos en tiempo real entre el cliente y el servidor, y manejar problemas de desconexión y reconexión.
La elección de un formato de datos y un método de transmisión adecuados depende de los requisitos específicos de la aplicación y la pila de tecnología . JSON suele ser el formato de datos preferido en las interacciones de front-end y back-end, mientras que HTTP es el método de transmisión más utilizado. Sin embargo, para la comunicación en tiempo real o escenarios altamente escalables, es posible que sea necesario considerar otros transportes y protocolos.
Métodos de comunicación front-end y back-end
En la comunicación front-end y back-end, hay muchas formas de realizar la interacción de datos. Estos son algunos métodos comunes de comunicación de front-end y back-end:
AJAX
API RESTful
WebSocket
GráficoQL
Server-Sent Events (SSE): Server-Sent Events es una tecnología de comunicación unidireccional basada en HTTP que permite que el servidor envíe datos al cliente. El cliente recibe el flujo de eventos del servidor al establecer una conexión HTTP persistente, dándose cuenta de la capacidad del servidor para enviar datos de forma activa al cliente.
Messaging Queue: Message Queue Server es un mecanismo de comunicación asincrónica que permite el intercambio de datos entre front-end y back-end mediante la publicación y suscripción de mensajes. Los sistemas comunes de colas de mensajes incluyen RabbitMQ y Apache Kafka, etc., que se pueden usar para desacoplar la comunicación de front-end y back-end para lograr una entrega de mensajes confiable.
La elección de un método de comunicación front-end y back-end adecuado depende de los requisitos específicos de la aplicación y la pila de tecnología. En general, la API RESTful y AJAX son las formas más comunes de transferir y recuperar datos. Si se requiere una comunicación en tiempo real o un control de datos más detallado, se pueden considerar tecnologías como WebSocket y GraphQL.
Diseño y especificación de la interfaz
El diseño y la especificación de la interfaz cubren muchos aspectos, aquí hay algunos puntos comunes de diseño y especificación de la interfaz:
Entrada y salida: defina claramente la entrada y la salida de la interfaz, incluidos los tipos, formatos y restricciones de los parámetros, y la estructura y el formato de los valores devueltos. Especificar entradas y salidas claras facilita el uso adecuado de las interfaces y la entrega precisa de datos.
Métodos y operaciones: defina los métodos y operaciones admitidos por la interfaz, incluida la obtención de datos, la creación de recursos, la actualización de recursos, la eliminación de recursos, etc. Cada método debe tener un propósito y un comportamiento claros, para que la persona que llama pueda entender claramente cuándo usar qué método.
Manejo de errores: define el comportamiento de la interfaz cuando ocurre un error o una condición excepcional. Incluyendo la especificación del código de error, el formato y el contenido del mensaje de error y el método de manejo de errores sugerido, para que la persona que llama pueda manejar correctamente la situación de error.
Autenticación y permiso: si la interfaz requiere autenticación y control de permisos, especifique claramente el método de autenticación, el método de transferencia de token y los requisitos de permiso de acceso. Asegúrese de que solo los usuarios autorizados puedan acceder a las interfaces protegidas y proporcione los mecanismos de autenticación y autorización adecuados.
Seguridad y cifrado: especifique los requisitos de seguridad y el mecanismo de cifrado de la interfaz, como el uso del protocolo HTTPS para la transmisión de datos, el cifrado de información confidencial y la prevención de ataques de secuencias de comandos entre sitios, etc. Garantizar la seguridad y confidencialidad de las interfaces y los datos.
Control de versiones: si es probable que la interfaz cambie, considere usar un mecanismo de control de versiones para administrar la evolución y la compatibilidad con versiones anteriores de la interfaz. Al agregar el número de versión en la URL o en el encabezado de la solicitud, se garantiza que las diferentes versiones de la interfaz puedan coexistir y brindar compatibilidad con versiones anteriores.
Documentación de la interfaz: escriba documentación detallada de la interfaz, incluidas descripciones de la interfaz, ejemplos de uso, descripciones de parámetros, descripciones de valores de retorno, definiciones de códigos de error, etc. La documentación de la interfaz ayuda a los desarrolladores a comprender y utilizar las interfaces correctamente y proporciona referencias y orientación de la interfaz.
Rendimiento y optimización: optimice el rendimiento y la eficiencia de la interfaz, considerando el volumen de datos de solicitudes y respuestas, retrasos en la red, capacidades de procesamiento concurrente, etc. Diseñe razonablemente el modo de transmisión de datos y la estructura de datos de la interfaz para proporcionar servicios de interfaz eficientes.
Consistencia y estandarización: mantenga la consistencia y la estandarización en el diseño de la interfaz, siga las mejores prácticas de la industria y del equipo. Unifique la convención de nomenclatura, el método de paso de parámetros, la estructura de respuesta, etc. para mejorar la comprensión y la facilidad de uso de la interfaz.
Manejo de excepciones: defina cómo maneja la interfaz cuando ocurren condiciones anormales, como errores de red, errores de base de datos, etc. Maneje razonablemente las excepciones y proporcione mensajes de error claros para que la persona que llama pueda comprender con precisión el problema y tomar las medidas correspondientes.
De acuerdo con los requisitos y los escenarios de aplicación específicos, también pueden estar involucrados otros aspectos del diseño y la especificación. Es importante asegurarse de que el diseño de la interfaz sea claro, consistente y completamente comunicado y negociado con los equipos relevantes para garantizar el uso efectivo y la interacción exitosa de la interfaz.
Intercambio de recursos de origen cruzado (CORS) y seguridad
Intercambio de recursos de origen cruzado (CORS)
El intercambio de recursos de origen cruzado (CORS) es un mecanismo que permite el uso de encabezados HTTP adicionales en el navegador para permitir que el servidor decida si permite el acceso a solicitudes de origen cruzado. CORS se utiliza principalmente para resolver las restricciones de política del mismo origen de los navegadores, de modo que las aplicaciones front-end en diferentes dominios puedan comunicarse con los servidores back-end de forma segura en todos los dominios.
La política del mismo origen es una política de seguridad del navegador que restringe el acceso entre páginas de diferentes orígenes (protocolos, nombres de dominio, puertos). Por ejemplo, si una página se carga desde el nombre de dominio ejemplo.com, su código JavaScript solo puede acceder a los recursos del mismo nombre de dominio y no puede acceder directamente a los recursos de otros nombres de dominio.
CORS funciona de la siguiente manera:
Cuando un navegador inicia una solicitud entre dominios, agregará un campo Origen al encabezado de la solicitud para indicar la fuente (dominio) de la solicitud.
Después de que el servidor reciba la solicitud de dominio cruzado, verificará el campo Origen y agregará algunos campos de encabezado CORS específicos en el encabezado de respuesta para indicarle al navegador si debe permitir el acceso a la solicitud de dominio cruzado.
Después de que el navegador reciba la respuesta, juzgará de acuerdo con el campo de encabezado CORS en el encabezado de respuesta. Si el servidor permite el acceso entre dominios, el navegador continuará procesando la respuesta; de lo contrario, arrojará un error.
La seguridad de CORS está controlada por el servidor El servidor puede especificar las fuentes de solicitud entre dominios permitidas, los métodos HTTP permitidos, los encabezados personalizados permitidos, etc., configurando el campo de encabezado CORS en el encabezado de respuesta.
seguridad
Durante el proceso de diseño y desarrollo, es necesario tener en cuenta las siguientes consideraciones relacionadas con la seguridad:
Restricción del acceso entre dominios: el servidor puede configurar el campo de encabezado CORS para restringir el acceso de las solicitudes entre dominios según las necesidades reales. Por ejemplo, puede especificar que solo se permita el acceso a nombres de dominio específicos o que solo se permitan métodos HTTP específicos.
Autenticación y autorización: las solicitudes entre dominios pueden incluir datos u operaciones confidenciales, por lo que la autenticación y la autorización deben realizarse en el lado del servidor para garantizar que solo los usuarios autorizados puedan realizar solicitudes entre dominios.
Evite los ataques de falsificación de solicitudes entre sitios (CSRF): CORS no puede evitar por completo las solicitudes entre dominios, por lo que al diseñar aplicaciones web, se deben tomar otras medidas de seguridad, como el uso de protección de token CSRF para evitar ataques de falsificación de solicitudes entre sitios.
Transmisión segura: para las solicitudes entre dominios que involucran datos confidenciales, se debe usar el protocolo HTTPS para la transmisión segura a fin de proteger la confidencialidad y la integridad de los datos.
A través de la configuración y el uso razonables de CORS y otras medidas de seguridad, se puede garantizar la seguridad de las solicitudes entre dominios, y el intercambio de datos entre dominios requerido se puede realizar en las interacciones de front-end y back-end.
- FIN -
Acerca de Qi Wu Troupe
Qi Wu Troupe es el equipo front-end más grande de 360 Group y participa en el trabajo de los miembros de W3C y ECMA (TC39) en nombre del grupo. Qi Wu Troupe otorga gran importancia a la capacitación de talentos y tiene varias direcciones de desarrollo, como ingenieros, profesores, traductores, personas de interfaz comercial y líderes de equipo para que los empleados elijan, y brinda el curso de capacitación técnica, profesional, general y de liderazgo correspondiente. Qi Dance Troupe da la bienvenida a todo tipo de talentos destacados para que presten atención y se unan a Qi Dance Troupe con una actitud abierta y de búsqueda de talentos.
