Explication détaillée de l'utilisation d'Ajax et du cache du navigateur-js tutoriel-php.cn

Explication détaillée de l'utilisation d'Ajax et du cache du navigateur

php中世界最好的语言

Libérer： 2018-04-04 09:34:12

original

1321 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation d'Ajax et du cache du navigateur. Quelles sont les précautions lors de l'utilisation d'Ajax et du cache du navigateur. Voici des cas pratiques, jetons un coup d'œil.

Dans les applications Web modernes, le code frontal est inondé d'un grand nombre de requêtes Ajax. Si le cache du navigateur peut être utilisé pour les requêtes Ajax, les requêtes réseau peuvent être considérablement réduites et la vitesse de réponse du programme peut être réduite. amélioré.

1. Requête Ajax

L'utilisation de jQueryframework peut effectuer des requêtes Ajax très facilement. L'exemple de code est le suivant. :

$.ajax({
  url : 'url',
  dataType : "xml",
  cache: true,
  success : function(xml, status){  
      }
});

Copier après la connexion

est très simple. Faites attention à la 4ème ligne de code : cache: true, qui nécessite explicitement que si la requête actuelle a un cache, utilisez le cache directement. Si cette propriété est définie sur false, elle demandera au serveur à chaque fois. Les commentaires de Jquery sont les suivants :

Si elle est définie sur false, les pages demandées ne seront pas mises en cache par le navigateur. ajoute également un paramètre de chaîne de requête, "_=[TIMESTAMP]", à l'URL.

Il n'y a qu'une quantité limitée de travail sur le front-end. De cette façon, les requêtes Ajax peuvent-elles tirer parti du cache du navigateur ?

Continuez à regarder.

2. Protocole Http

La partie en-tête du protocole HTTP définit si le client doit mettre en cache et comment le mettre en cache. Pour plus de détails, voir 14.9 Cache-Control et 14.21 Expire les définitions de champ d'en-tête HTTP. Voici une brève explication :

Cache-Control

Cache-control est utilisé pour contrôler le cache HTTP (il peut ne pas être partiellement implémenté dans HTTP/1.0, mais seulement Pragma est implémenté : no-cache)

Format dans le paquet :

Cache-Control : cache-directive

cache-directive peut être le suivant :

Utilisé lors de la demande :

rereréponse :

| "cache-extension"

Description :

-Public indique que la réponse peut être mise en cache par n’importe quelle zone de cache.

-Privé indique que tout ou partie du message de réponse d'un seul utilisateur ne peut pas être partagé traitement du cache

. Cela permet au serveur de décrire uniquement une réponse partielle d'un utilisateur qui n'est pas valide pour les demandes des autres utilisateurs.

-no-cache indique que le message de demande ou de réponse ne peut pas être mis en cache (HTTP/1.0 est remplacé par le no-cache de Pragma

-no-store est utilisé pour empêcher les informations importantes d'être mises en cache). être libéré involontairement. L'envoyer dans le message de demande entraînera l'utilisation de la mise en cache par les messages de demande et de réponse.

-max-age Indique que le client peut recevoir des réponses avec une durée de vie ne dépassant pas le temps spécifié en secondes.

-min-fresh indique que le client peut recevoir des réponses avec un temps de réponse inférieur à l'heure actuelle plus l'heure spécifiée.

-max-stale indique que le client peut recevoir des messages de réponse au-delà du délai d'attente. Si une valeur de message périmée maximale est spécifiée, le client peut

recevoir des messages de réponse qui se situent dans la valeur spécifiée du délai d'expiration.

Expires

Expires représente le temps effectif du Cache, permettant au client de ne pas envoyer de requêtes avant ce délai, ce qui équivaut à l'effet de max-age. Mais s'ils existent en même temps, ils seront remplacés par l'âge maximum de Cache-Control.
Format : Expire = "Expire" : "Date HTTP

Exemple : Expire : jeu. 01 décembre 1994 16:00:00 GMT

Dernière modification

Last-Modified用GMT格式表明了文档的最后修改时间，客户端第二次请求此URL时，会在头部加入一个属性，询问该时间之后文件是否有被修改过。如果服务器端的文件没有被修改过，则返回状态是304，内容为空，这样就节省了传输数据量。

3. 我的问题

这几天在做Web前端的时候，发现客户端的每次Ajax都会从服务器端请求数据，而这些数据的即时性没有那么高，没必要每次都请求。

在显式的给Ajax加上cache为true后，发现问题依旧。于是怀疑是服务端的问题，服务端使用 jersey 搭建了基于Restful的服务，代码片段如下：

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     return response.build();
}

Copier après la connexion

添加Cache控制后，进行测试，一切OK。

最后的代码如下：

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     // Expires 3 seconds from now..this would be ideally based
     // of some pre-determined non-functional requirement.
     Date expirationDate = new Date(System.currentTimeMillis() + 3000);
     response.expires(expirationDate);
     return response.build();
}

Copier après la connexion

以上只是示例代码，还可以进行更精细的控制，例如使用CacheControl、Last-Modified等等。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！