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

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){  
      }
});

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 :

| "no-cache"
| "no-store"
| "max-age" "= " delta-secondes
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| " only-if -cached"
| "cache-extension"

rereréponse :

| "public"
| "privé " [ "= " <"> nom-champ <"> ]
| "pas de cache" [ "=" <"> nom-champ <"> ]
| "pas de magasin"
| "pas de transformation"
| "doit-revalider"
| "proxy-revalidate"
| "max-age" "=" delta-secondes
| "s- maxage" "=" delta-seconds

Description :

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

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

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();
}

添加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();
}

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

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

推荐阅读：

$.ajax()的使用方法（附代码）

ajax怎么实现远程通信功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!