Ausführliche Erläuterung der Verwendung von Ajax und Browser-Cache

Dieses Mal werde ich Ihnen die Verwendung von Ajax und dem Browser-Cache ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax und dem Browser-Cache? Hier sind praktische Fälle.

In modernen Webanwendungen wird der Frontend-Code mit einer großen Anzahl von Ajax-Anfragen überflutet. Wenn der Browser-Cache für Ajax-Anfragen verwendet werden kann, können Netzwerkanfragen erheblich reduziert und die Antwortgeschwindigkeit des Programms erhöht werden verbessert.

1. Ajax-Anfrage

Mit dem jQuery

Framework können Ajax-Anfragen sehr bequem erfolgen :

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

ist sehr einfach. Achten Sie auf die 4. Codezeile:

cache: true, die ausdrücklich erfordert, dass, wenn die aktuelle Anfrage einen Cache hat, der Cache direkt verwendet wird. Wenn diese Eigenschaft auf „false“ gesetzt ist, wird der Server jedes Mal angefragt. Die Kommentare von Jquery lauten wie folgt:

Wenn sie auf „false“ gesetzt ist, werden angeforderte Seiten nicht vom Browser zwischengespeichert Hängt außerdem einen Abfragezeichenfolgenparameter „_=[TIMESTAMP]“ an die URL an.

Es gibt nur eine begrenzte Menge Arbeit am Frontend. Können Ajax-Anfragen also den Browser-Cache nutzen?

Schau weiter.

2. HTTP-Protokoll

Der Header-Teil des HTTP-Protokolls definiert, ob und wie der Client zwischenspeichern soll. Einzelheiten finden Sie unter 14.9 Cache-Kontrolle und 14.21 Abläufe von HTTP-Header-Felddefinitionen. Hier eine kurze Erklärung:

Cache-Control

Cache-Control wird zur Steuerung des HTTP-Cache verwendet (es ist möglicherweise nicht teilweise in HTTP/1.0 implementiert, sondern nur Pragma ist implementiert: no-cache)

Format im Paket:

Cache-Control: Cache-Direktive

Cache-Direktive kann das sein Folgendes:

Wird bei der Anfrage verwendet:

| „no-cache“

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

re

re

sponse:

| „public“

| „private " [ "= " <"> Feldname <"> ]
| "no-cache" [ "=" <"> feldname <"> ]
| „no-store“
|. „no-transform“
| |. "s- maxage" "=" delta-seconds
|. "cache-extension"


Beschreibung:

-Public gibt an, dass die Antwort zwischengespeichert werden kann durch einen beliebigen Cache-Bereich. -Private gibt an, dass die Antwortnachricht für einen einzelnen Benutzer ganz oder teilweise nicht geteilt werden kann

Cache-Verarbeitung

. Dadurch kann der Server nur eine Teilantwort eines Benutzers beschreiben, die für die Anfragen anderer Benutzer nicht gültig ist.

-no-cache gibt an, dass die Anforderungs- oder Antwortnachricht nicht zwischengespeichert werden kann (HTTP/1.0 wird durch Pragmas No-Cache ersetzt). -no-store wird verwendet, um zu verhindern, dass wichtige Informationen gespeichert werden unbeabsichtigt freigelassen werden. Das Senden in der Anforderungsnachricht führt dazu, dass sowohl die Anforderungs- als auch die Antwortnachrichten Caching verwenden.

-max-age Gibt an, dass der Client Antworten mit einer Lebensdauer empfangen kann, die nicht größer als die angegebene Zeit in Sekunden ist.

-min-fresh gibt an, dass der Client Antworten mit einer Antwortzeit erhalten kann, die kürzer ist als die aktuelle Zeit plus die angegebene Zeit.

-max-stale gibt an, dass der Client über den Timeout-Zeitraum hinaus Antwortnachrichten empfangen kann. Wenn ein maximal veralteter Nachrichtenwert angegeben ist, kann der Client

Antwortnachrichten empfangen, die innerhalb des angegebenen Werts des Timeout-Zeitraums liegen.

Ablaufdatum

Ablaufdatum stellt die effektive Zeit des Caches dar, sodass der Client vor diesem Zeitpunkt keine Anfragen senden kann, was dem Effekt von max-age entspricht. Wenn es jedoch gleichzeitig vorhanden ist, wird es durch das maximale Alter von Cache-Control überschrieben. Format: Expires = "Expires" ":" HTTP-DatumBeispiel: Läuft ab: Do, 01. Dezember 1994 16:00:00 GMT

Zuletzt geändert

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怎么实现远程通信功能

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Ajax und Browser-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!