El caché de Ajax es mantenido por el navegador. Para una determinada URL enviada al servidor, AJAX solo interactúa con el servidor durante la primera solicitud. En las solicitudes posteriores, AJAX ya no envía una solicitud al servidor, sino que extrae datos directamente del caché.
En algunos casos, necesitamos obtener datos actualizados del servidor cada vez. La idea es hacer que la URL se solicite de manera diferente sin afectar la aplicación normal: agregue contenido aleatorio después de la URL.
p.ej
url = url+"&"+math.random ();
Puntos clave:
1. La URL solicitada cada vez es diferente (Ajax Cache no funciona)
2. No afecta la aplicación normal (más básica)
Aquí tenemos dos conclusiones:
1: Ajax Cache y HTTP Cache son los mismos
Los mecanismos HTTP y el almacenamiento en caché de los navegadores modernos son mucho peores que los del objeto xmlhttprequest de Ajax, por lo que no reconoce ni se preocupa por las solicitudes de AJAX. Simplemente sigue las reglas ordinarias de almacenamiento en caché HTTP y las almacena en caché a través del encabezado de respuesta devuelto por el servidor.
Si ya tiene una comprensión del caché HTTP, puede usar el conocimiento del caché HTTP para comprender Ajax Cache. La única diferencia es que la forma de establecer los encabezados de respuesta será diferente de la de los archivos ordinarios.
Los siguientes encabezados de respuesta pueden hacer que su Ajax se pueda almacenar en caché:
Expira: este elemento debe establecerse en un punto de tiempo adecuado en el futuro. La configuración del punto de tiempo depende de la frecuencia de los cambios de contenido. Por ejemplo, si la cantidad de inventario solicitada, el valor de expiras puede ser 10 segundos después. Si la foto solicitada, el valor de expiras puede ser más largo porque no cambiará con frecuencia. El encabezado Expires permite que el navegador reutilice los datos en caché locales durante un período de tiempo, evitando así cualquier interacción innecesaria con los datos del servidor.
Último modificado: configurar este elemento es una buena opción. A través de él, el navegador usará si modificado es modificado en el encabezado de solicitud para verificar el contenido en caché local al enviar una solicitud de obtención condicional. Si no es necesario actualizar los datos, el servidor devolverá un estado de respuesta 304.
Control de caché: en el caso de las circunstancias apropiadas, este valor debe establecerse en público para que todos los proxy y caché intermedios se puedan guardar y compartir con otros usuarios. En Firefox, también admite caché para las solicitudes HTTPS.
Por supuesto, si usa el método de publicación para enviar AJAX, no se puede almacenar en caché, porque las solicitudes de publicación nunca se almacenarán en caché. Si su solicitud AJAX tendrá otros efectos (como transferencias entre cuentas bancarias), utilice la solicitud de publicación.
Configuramos una demostración (esta demostración ya no se puede ver (□) ノ) para aclarar cómo funcionan estos encabezados. En httpwatch, puede ver que establecemos los tres encabezados de respuesta anteriores en la información del encabezado de respuesta.
Si hace clic en el botón 'Ajax Update' regularmente, los cambios de tiempo tienden a ser cada dos minutos. Porque el encabezado de respuesta expirada se establece en el siguiente minuto. En la captura de pantalla a continuación, puede ver: cuando hace clic en el botón Actualizar repetidamente, la solicitud AJAX leerá el caché local del navegador sin generar actividad de red (los valores de las barras de envío y transferencia son 0)
La solicitud AJAX enviada por el último clic a la transmisión de datos de red generada por la hora generada por el tiempo porque los datos almacenados en caché habían excedido un minuto. El servidor devolvió 200 estado de respuesta para indicar que se obtuvo una nueva copia de los datos.
Supongo que esta demostración debe ser un botón, obtener el tiempo actual cada vez que haga clic y luego regrese a la página actual.
2: IE El navegador no actualizará el contenido obtenido a través de AJAX antes de que expire el tiempo expire.
A veces, AJAX se usa para llenar ciertas partes de la página (como una lista de precios) cuando la página está cargada. No es activado por el evento de un usuario (como hacer clic en un botón), sino que se envía a través de JavaScript cuando la página está cargada. Es como si las solicitudes de Ajax fueran las mismas que los recursos integrados (como JS y CSS).
Si desarrolla dicha página, al actualizarla, es posible que desee actualizar el contenido de solicitud de AJAX incrustado. Para los recursos integrados (archivos CSS, imágenes, etc.), el navegador enviará automáticamente los siguientes tipos diferentes de solicitudes si el usuario lo actualiza es F5 (actualización) o Ctrl+F5 (Force Active):
1.f5 (actualizar): si el contenido de la solicitud tiene un último encabezado de respuesta modificado, el navegador enviará una solicitud de actualización condicional. Utiliza el encabezado de solicitud de IF IF-Since para comparar, para que el servidor pueda devolver un estado 304 para evitar la transmisión de datos innecesarios.
2.CTRL+F5 (Force Refresh): le dice al navegador que envíe una solicitud de actualización incondicional, y el control de caché del encabezado de solicitud se establece en 'No-Cache'. Esto le dice a todos los proxy y caché intermedios: el navegador necesita obtener la última versión, independientemente de si se ha almacenado en caché.
Firefox propaga este método de actualización a aquellas solicitudes de AJAX enviadas cuando la página está cargada, y trata estas solicitudes de AJAX como recursos integrados. A continuación se muestra una captura de pantalla de HTTPWatch en Firefox, que muestra el efecto de las solicitudes AJAX cuando se actualiza (F5):
Firefox asegura que la solicitud iniciada por AJAX sea condicional. En este ejemplo, si los datos se almacenan en caché por menos de 10 segundos, el servidor devuelve 304, si supera los 10 segundos, el servidor devuelve 200 y retransmite los datos.
En IE, la solicitud AJAX iniciada cuando se carga la página se considera que no tiene nada que ver con refrescar otras partes de la página, y no se verá afectada por el método de actualización del usuario. Si los datos AJAX en caché no han expirado, no se enviarán solicitudes al servidor. Leerá los datos directamente desde el caché, y desde httpwatch es el resultado (caché). La siguiente figura es presionar F5 para actualizar si el caché no está expirado en IE:
Incluso si se ve obligado a actualizar a través de CTRL+F5, los datos obtenidos a través de AJAX se leerán desde el caché:
Esto significa que cualquier cosa obtenida a través de AJAX no se actualizará en IE si no ha expirado, incluso si usa CTRL+F5 para forzar la actualización. La única forma de asegurarse de obtener los últimos datos es borrar manualmente el caché. Puede usar la barra de herramientas httpwatch:
Tenga en cuenta que el resultado del caché y el resultado 304 son diferentes. El caché es en realidad 200 (caché), 304 significa 304. El caché en realidad no envía una solicitud al servidor. Puede ver en Chrome que su tiempo es 0, y la respuesta también está vacía. Sin embargo, 304 es diferente.
La solicitud 304 es una solicitud condicional iniciada por el navegador. Esta solicitud conlleva el encabezado de solicitud de IF-Modified-Since. Si el archivo no se ha modificado después de que el navegador envía la hora, el lado del servidor devolverá un estado 304 y le dirá al navegador que use su contenido de caché local. No es tan rápido como la solicitud se envía al lado del servidor, pero el lado del servidor no envía datos.
Puede consultar la página de inicio de Taobao, que tiene 200 (caché) y 304. Puede verificar sus diferencias.
Resumir:
Todos sabemos que la razón principal por la que Ajax puede aumentar la velocidad de la carga de la página es que reduce la carga de datos duplicados a través de AJAX, y realmente logra la adquisición a pedido. Dado que este es el caso, cuando escribimos el programa AJAX, podríamos enviarlo al oeste y almacenarlo en caché nuevamente en el cliente para mejorar aún más la velocidad de carga de datos. Eso es para almacenar en caché los datos en la memoria del navegador al cargar los datos. Una vez que se cargan los datos, siempre que la página no se actualice, los datos se almacenarán en caché en la memoria para siempre. Cuando el usuario vuelve a ver los datos, no es necesario obtener datos del servidor, lo que reduce en gran medida la carga del servidor y mejora la experiencia del usuario.