Heim >Web-Frontend >js-Tutorial >Eine kurze Diskussion über Ajax-Anfragen und Browser-Caching
Der folgende Editor bietet Ihnen eine kurze Diskussion über Ajax-Anfragen und Browser-Caching. Der Herausgeber findet es ziemlich gut, deshalb teile ich jetzt den Ajax-Quellcode mit Ihnen und gebe ihn als Referenz. Wenn Sie sich für Ajax interessieren, folgen Sie dem Editor, um einen Blick darauf zu werfen.
In modernen Webanwendungen wird der Front-End-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 werden, um die Reaktionsgeschwindigkeit des Programms zu verbessern.
1. Ajax-Anfrage
Mit dem jQueryFramework können Ajax-Anfragen sehr bequem erfolgen :
$.ajax({ url : 'url', dataType : "xml", cache: true, success : function(xml, status){ } });
ist sehr einfach. Beachten Sie die 4. Codezeile: cache: true, die ausdrücklich erfordert, dass, wenn die aktuelle Anfrage einen Cache hat, der Cache direkt verwendet werden muss. Wenn das -Attribut auf „false“ gesetzt ist, wird erzwungen, dass angeforderte Seiten nicht vom Browser zwischengespeichert werden. Wenn der Cache auf „false“ gesetzt wird, wird auch ein Abfragezeichenfolgenparameter „_=[TIMESTAMP]“ an die URL angehängt.
Es gibt nur so viel Arbeit am Frontend. Können Ajax-Anfragen auf diese Weise 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-ControlCache-Control wird zur Steuerung des HTTP-Cache verwendet (es ist möglicherweise nicht teilweise in HTTP/1.0 implementiert, sondern nur Pragma ist implementiert: kein 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
| „public“
| „private " [ "= " 9dfc9fa07ac339f3d4fe03717423126e Feldname 9dfc9fa07ac339f3d4fe03717423126e ]| "no-cache" [ "=" 9dfc9fa07ac339f3d4fe03717423126e feldname 9dfc9fa07ac339f3d4fe03717423126e ]
| „no-store“
|. „no-transform“
| |. "s- maxage" "=" delta-seconds
|. "cache-extension"
Beschreibung:
-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). -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. AblaufdatumFormat: Expires = "Expires" ":" HTTP-DatumBeispiel: Läuft ab: Do, 01. Dezember 1994 16:00:00 GMT
Zuletzt geändert
3. Mein Problem
Als ich dieser Tage am Web-Frontend arbeitete, stellte ich fest, dass jede Ajax-Anfrage vom Client Daten vom Server erstellt werden und die Unmittelbarkeit dieser Daten nicht so hoch ist, besteht keine Notwendigkeit, sie jedes Mal anzufordern.Nachdem ich den Cache für Ajax explizit auf „true“ gesetzt hatte, stellte ich fest, dass das Problem weiterhin bestand. Daher vermutete ich, dass es sich um ein Problem auf der Serverseite handelte. Der Server verwendete Jersey, um einen Restful-basierten Dienst aufzubauen. Der Codeausschnitt lautet wie folgt:
@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等等。
相关推荐:
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Ajax-Anfragen und Browser-Caching. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!