trabaja duro
Tabla de contenido
1. Mejorar la experiencia del usuario y lograr un efecto de actualización parcial
2. Mejore el rendimiento y reduzca el consumo de ancho de banda
El proceso de trabajo de Ajax se divide en los siguientes pasos:
La demostración de código Ajax más básica:
Análisis de parámetros en la función abierta:
La diferencia entre readyState y state en Ajax
La diferencia entre readyState y status en Ajax:
¿Qué es el código de estado de respuesta http?
¿Por qué necesitas Ajax?
Ajax (Asynchronous JavaScript and XML) es una tecnología para la transmisión asíncrona de páginas web a través de JavaScript y XML. Su aparición resuelve principalmente los siguientes dos problemas:
1. Mejorar la experiencia del usuario y lograr un efecto de actualización parcial
En una aplicación web tradicional, cuando el usuario interactúa con el servidor, la página debe recargarse, lo que genera una experiencia de usuario deficiente. Sin embargo, con la tecnología Ajax, parte del contenido de la página se puede actualizar sin actualizar toda la página, lo que mejora la experiencia del usuario.
Por ejemplo, en un sitio web de comercio electrónico, cuando un usuario hace clic en el botón "Agregar al carrito", puede usar Ajax para agregar artículos al carrito de compras y mostrar dinámicamente la cantidad de artículos en el carrito de compras en la página sin actualizar toda la página.
2. Mejore el rendimiento y reduzca el consumo de ancho de banda
En las aplicaciones web tradicionales, cada interacción con el servidor requiere que se vuelva a cargar toda la página, lo que genera un desperdicio de rendimiento y consumo de ancho de banda. Con la tecnología Ajax, los datos requeridos se pueden obtener sin actualizar toda la página, mejorando así el rendimiento y reduciendo el consumo de ancho de banda.
Por ejemplo, en un sitio web de noticias, cuando un usuario hace clic en una determinada etiqueta de categoría, se puede usar Ajax para obtener la lista de noticias de esta categoría, y solo se puede mostrar la parte requerida de la lista sin recargar toda la página.
En resumen, los métodos tradicionales que usamos, como una etiqueta (hipervínculo) para acceder al servidor para obtener recursos, no pueden lograr el efecto de actualización parcial de la página, pero Ajax puede lograr el efecto de actualización parcial de la página;
que es ajax
Ajax: JavaScript asíncrono y XML, Ajax es una tecnología para crear páginas web rápidas y dinámicas. Ajax permite que las páginas web se actualicen de forma asíncrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que una determinada parte de la página web puede actualizarse sin recargar toda la página web, mientras que las páginas web tradicionales que no usan Ajax deben recargar toda la página web si es necesario actualizar el contenido.
Cómo funciona Ajax
El principio de funcionamiento de Ajax consiste en agregar una capa intermedia (motor Ajax) entre el usuario y el servidor, lo que hace que las operaciones del usuario y las respuestas del servidor sean asincrónicas, no todas las solicitudes de los usuarios se envían al servidor. Parte de la validación y el procesamiento de datos se entregan al propio motor Ajax. Solo cuando se determina que es necesario leer nuevos datos del servidor, el motor Ajax envía una solicitud al servidor en su nombre.
El proceso de trabajo de Ajax se divide en los siguientes pasos:
El usuario interactúa con el navegador, desencadenando eventos (como hacer clic en un botón).
Se ejecuta el código JavaScript, se crea un objeto XMLHttpRequest y se especifica una función de devolución de llamada.
El objeto XMLHttpRequest inicia una solicitud asincrónica al servidor y envía datos.
El servidor recibe la solicitud y procesa los datos y devuelve el resultado al objeto XMLHttpRequest.
El objeto XMLHttpRequest pasa la respuesta del servidor a la función de devolución de llamada para su procesamiento.
La función de devolución de llamada actualiza el contenido de la página para mostrar los datos más recientes.
La demostración de código Ajax más básica:
//new XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//调用回调函数
xhr.onreadystatechange = function(){
if (this.readyState == 4) {
if (this.status == 200) {
var jsonobj = JSON.parse(this.responseText);
jsonstr.success(jsonobj)
} else {
alert(this.status)
}
}
}
//打开通道并传入必要参数（请求方式、url、是否支持异步）
xhr.open("method"," url"，async)
//发送数据
xhr.send()Análisis de parámetros en la función abierta:
1. El parámetro de método es el método HTTP utilizado para la solicitud. Los valores incluyen GET, POST, HEAD, PUT, DELETE (no distingue entre mayúsculas y minúsculas)
2. El parámetro url es el cuerpo de la solicitud. La mayoría de los navegadores implementan una política de seguridad del mismo origen y requieren que esta URL tenga el mismo nombre de host y puerto que el texto que contiene el script.
3. El parámetro async indica que el uso de la solicitud debe realizarse de forma asíncrona. Si este parámetro es falso, la solicitud es síncrona y las llamadas posteriores a send() se bloquearán hasta que la respuesta se acepte por completo; si este parámetro es verdadero o se omite, la solicitud es asíncrona y, por lo general, requiere un controlador de eventos onreadystatechange.
La diferencia entre readyState y state en Ajax
En Ajax, los términos correctos son readyState y status not state. readyState se refiere al estado actual del objeto XMLHttpRequest y su valor varía de 0 a 4, lo que indica diferentes etapas de la solicitud (inicialización, carga de datos, procesamiento de datos y finalización de la solicitud). El estado es el código de estado de la respuesta HTTP, que indica la información de estado devuelta por el servidor, por ejemplo, 200 significa éxito y 404 significa que no se encontró el recurso solicitado.
Diferencia detallada:
La diferencia entre readyState y status en Ajax:
| Atributos | describir |
|---|---|
| listoestado | El estado actual del objeto XMLHttpRequest, que va de 0 a 4. |
| 0 (SIN ENVIAR) | Se creó XMLHttpRequest, pero no se abrió (no se llamó al método abierto). |
| 1 (ABIERTO) | Se ha llamado al método abierto, pero no se ha llamado al método de envío. |
| 2 (CABEZAS_RECIBIDAS) | Se ha llamado al método de envío y el encabezado y el estado están disponibles. |
| 3 (CARGANDO) | Descargando; la propiedad responseText ya contiene algunos datos. |
| 4 (TERMINADO) | La operación solicitada se ha completado. Esto significa que los datos de respuesta se han recibido por completo. |
| estado | Código de estado de respuesta HTTP, que indica la información de estado devuelta por el servidor. |
| 200 | "DE ACUERDO". La solicitud fue exitosa. |
| 404 | "Extraviado". El recurso solicitado no existe. |
| 500 | "Error Interno del Servidor". El servidor encontró un error. |
Tenga en cuenta que "estado" no es el término correcto en Ajax, se debe usar "estado", que corregí en el formulario.
¿Qué es el código de estado de respuesta http?
Un código de estado de respuesta HTTP es un código de 3 dígitos enviado por un servidor web a un cliente (como un navegador) para indicar el resultado de una solicitud HTTP en particular. Son generados por servidores web para indicar si la solicitud se completó con éxito y para decirle al cliente qué hacer con los datos de respuesta.
Los códigos de estado de respuesta HTTP se dividen en 5 categorías:
1xx (informativo): la solicitud ha sido aceptada y debe procesarse más.
2xx (Successful): el servidor ha recibido, entendido y aceptado correctamente la solicitud.
3xx (Redireccionamiento): se requiere una acción adicional por parte del cliente para completar la solicitud.
4xx (Error del cliente): la solicitud del cliente contenía errores de sintaxis o no pudo completar la solicitud.
5xx (Error del servidor): el servidor no pudo completar una solicitud aparentemente válida.
Los códigos de estado de respuesta HTTP comunes incluyen 200 OK, que indica una solicitud exitosa, 404 Not Found, que indica que el recurso solicitado no existe, y 500 Internal Server Error, que indica un error interno del servidor.