Der Cache von Ajax wird vom Browser aufrechterhalten. Für eine bestimmte URL, die an den Server gesendet wird, interagiert AJAX nur während der ersten Anfrage mit dem Server. In nachfolgenden Anforderungen legt AJAX keine Anforderung mehr an den Server vor, sondern extrahiert Daten direkt aus dem Cache.
In einigen Fällen müssen wir jedes Mal aktualisierte Daten vom Server abrufen. Die Idee ist, die URL anders angefordert zu machen, ohne die normale Anwendung zu beeinflussen: Fügen Sie nach der URL zufällige Inhalte hinzu.
z.B
url = url+"&"+math.random ();
Schlüsselpunkte:
1. Die gewünschte URL ist unterschiedlich (Ajax -Cache funktioniert nicht)
2. Es wirkt sich nicht auf die normale Anwendung aus (am einfachsten).
Hier haben wir zwei Schlussfolgerungen:
1: Ajax Cache und HTTP -Cache sind gleich
Die HTTP- und Caching -Mechanismen moderner Browser sind viel schlechter als die des XMLHTTTPrequest -Objekts von Ajax, sodass sie AJAX -Anfragen nicht erkannt oder sich darum kümmern. Es folgt einfach den gewöhnlichen HTTP -Caching -Regeln und zwischen dem vom Server zurückgegebenen Antwortheader.
Wenn Sie bereits ein Verständnis für HTTP -Cache haben, können Sie das Wissen von HTTP -Cache verwenden, um Ajax -Cache zu verstehen. Der einzige Unterschied besteht darin, dass sich die Art und Weise, wie die Reaktionsheader festgelegt werden, sich von der der gewöhnlichen Dateien unterscheiden.
Die folgenden Antwort -Header können Ihren Ajax zwischengespeichert werden:
Ausgelassen: Dieser Artikel sollte in Zukunft auf einen geeigneten Zeitpunkt eingestellt werden. Die Einstellung des Zeitpunkts hängt von der Häufigkeit von Inhaltsänderungen ab. Wenn beispielsweise die angeforderte Bestandsmenge, kann der Wert von Ablauf 10 Sekunden später betragen. Wenn das angeforderte Foto, kann der Wert von Ablauf länger sein, da sich nicht häufig ändert. Mit dem Header des Ablaufs ermöglicht es dem Browser, lokale zwischengespeicherte Daten für einen bestimmten Zeitraum wiederzuverwenden und so eine unnötige Interaktion mit den Serverdaten zu vermeiden.
Last-modifiziert: Das Einstellen dieses Elements ist eine gute Wahl. Dadurch verwendet der Browser If-Modified-Since im Anforderungs-Header, um den örtlichen zwischengespeicherten Inhalt beim Senden einer bedingten GET-Anforderung zu überprüfen. Wenn die Daten nicht aktualisiert werden müssen, gibt der Server einen Antwortstatus von 304 zurück.
Cache-Control: Bei geeigneten Umständen sollte dieser Wert auf öffentlich festgelegt werden, damit alle Zwischenproxy und Cache mit anderen Benutzern gespeichert und gemeinsam genutzt werden können. In Firefox unterstützt es auch Cache für HTTPS -Anforderungen.
Wenn Sie die Post -Methode verwenden, um AJAX zu senden, kann dies natürlich nicht zwischengespeichert werden, da Postanfragen niemals zwischengespeichert werden. Wenn Ihre AJAX -Anfrage andere Effekte hat (z. B. Übertragungen zwischen Bankkonten), verwenden Sie bitte die Postanforderung.
Wir haben eine Demo eingerichtet (diese Demo kann nicht mehr (□) ノ angezeigt werden, um zu klären, wie diese Header funktionieren. In httpwatch können Sie feststellen, dass wir die oben genannten drei Antwortüberschriften in den Informationen zur Antwortheader festlegen.
Wenn Sie regelmäßig auf die Schaltfläche "Ajax Update" klicken, dauern die Zeitänderungen in jeder zweiten Minute. Weil der Ablauf der Response -Header auf die nächste Minute eingestellt ist. Im folgenden Screenshot sehen Sie: Wenn Sie wiederholt auf die Schaltfläche Aktualisieren klicken, wird in der AJAX -Anforderung den lokalen Cache des Browsers ohne generierende Netzwerkaktivität gelesen (die Werte der Sende- und Übertragungsleisten sind 0)
Die AJAX -Anforderung, die vom letzten Klick bei 1: 06.531 Zeit generierte Netzwerkdatenübertragung, da die zwischengespeicherten Daten eine Minute überschritten hatten. Der Server gab 200 Antwortstatus zurück, um anzuzeigen, dass eine neue Kopie der Daten erhalten wurde.
Vermutlich sollte diese Demo eine Schaltfläche sein, jedes Mal die aktuelle Zeit erhalten, wenn Sie klicken und dann zur aktuellen Seite zurückkehren.
2: Der IE -Browser aktualisiert den Inhalt nicht über AJAX, bevor die Zeit abgelaufen ist.
Manchmal wird Ajax verwendet, um bestimmte Teile der Seite (z. B. eine Preisliste) zu füllen, wenn die Seite geladen wird. Es wird nicht durch das Ereignis eines Benutzers ausgelöst (z. B. Klicken auf eine Schaltfläche), sondern über JavaScript gesendet, wenn die Seite geladen wird. Es ist, als ob Ajax -Anfragen die gleichen wie die eingebetteten Ressourcen (wie JS und CSS) sind.
Wenn Sie eine solche Seite entwickeln, möchten Sie beim Aktualisieren des Inhalts eingebetteter Ajax -Anforderungsinhalte möglicherweise aktualisieren. Für eingebettete Ressourcen (CSS -Dateien, Bilder usw.) sendet der Browser automatisch die folgenden verschiedenen Arten von Anforderungen, indem der Benutzer f5 (Aktualisierung) oder Strg+F5 (Kraft -Aktualisierung) aktualisiert wird:
1.F5 (Aktualisierung): Wenn der Anforderungsinhalt über einen Last-Modified-Antwort-Header verfügt, sendet der Browser eine bedingte Aktualisierungsanforderung. Es verwendet den IF-modifizierten Anforderungsheader zum Vergleich, damit der Server einen 304-Status zurücksenden kann, um die Übertragung unnötiger Daten zu vermeiden.
2.Ctrl+F5 (Kraft-Aktualisierung): fordert den Browser an, eine bedingungslose Aktualisierungsanforderung zu senden, und die Cache-Kontrolle des Anforderungsheaders wird auf "No-Cache" gesetzt. Dies zeigt allen Zwischenproxy und Cache: Der Browser muss die neueste Version erhalten, unabhängig davon, ob er zwischengespeichert wurde.
Firefox verbreitet diese Aktualisierungsmethode an die AJAX -Anfragen, die beim Laden der Seite gesendet werden, und behandelt diese AJAX -Anfragen als eingebettete Ressourcen. Unten finden Sie einen Screenshot von httpwatch unter Firefox, der die Auswirkung von AJAX -Anfragen beim Aktualisieren (F5) zeigt:
Firefox stellt sicher, dass die von Ajax initiierte Anfrage bedingt ist. In diesem Beispiel gibt der Server 304 zurück, wenn die Daten für weniger als 10 Sekunden zwischengespeichert werden. Wenn er 10 Sekunden überschreitet, gibt der Server 2004 zurück und überträgt die Daten.
In IE wird angenommen, dass die AJAX -Anfrage, die initiiert wird, wenn die Seite geladen wird, nichts mit dem Auffrischen anderer Teile der Seite zu tun hat und von der Aktualisierungsmethode des Benutzers nicht beeinflusst wird. Wenn die zwischengespeicherten AJAX -Daten nicht abgelaufen sind, werden keine GET -Anforderungen an den Server gesendet. Es wird die Daten direkt aus dem Cache und aus httpwatch das (Cache) Ergebnis gelesen. Die folgende Abbildung ist, F5 zu drücken, um zu aktualisieren, wenn der Cache unter IE nicht abgelaufen ist:
Selbst wenn es gezwungen ist, durch Strg+F5 zu aktualisieren, werden die durch AJAX erhaltenen Daten aus dem Cache gelesen:
Dies bedeutet, dass alles, was über AJAX erhalten wurde, nicht unter IE aktualisiert wird, wenn es nicht abgelaufen ist - selbst wenn Sie Strg+F5 verwenden, um die Aktualisierung zu erzwingen. Der einzige Weg, um sicherzustellen, dass Sie die neuesten Daten erhalten, besteht darin, den Cache manuell zu löschen. Sie können die HTTPWatch -Symbolleiste verwenden:
Beachten Sie, dass das Cache -Ergebnis und das 304 -Ergebnis unterschiedlich sind. Cache ist tatsächlich 200 (Cache), 304 bedeutet 304. Cache sendet tatsächlich keine Anforderung an den Server. Sie können aus Chrome sehen, dass seine Zeit 0 beträgt und die Antwort auch leer ist. 304 ist jedoch anders.
Die 304 -Anfrage ist eine vom Browser initiierte bedingte Anfrage. Diese Anfrage trägt den Anforderungs-Header mit dem modifizierten Antrag. Wenn die Datei nicht geändert wurde, nachdem der Browser die Zeit gesendet hat, gibt die Serverseite einen 304 -Status zurück und fordert den Browser an, seinen lokalen Cache -Inhalt zu verwenden. Es ist nicht so schnell, wie die Anforderung an die Serverseite gesendet wird, aber die Serverseite sendet keine Daten.
Sie können die Startseite von Taobao mit 200 (Cache) und 304 überprüfen. Sie können ihre Unterschiede überprüfen.
Zusammenfassen:
Wir alle wissen, dass der Hauptgrund, warum AJAX die Seitengeschwindigkeit erhöhen kann, darin besteht, dass die Belastung von doppelten Daten durch AJAX reduziert und wirklich die Erwerb von On-Demanden erreicht. Da dies der Fall ist, können wir es beim Schreiben von AJAX -Programm auch in den Westen senden und den Client erneut zwischenspeichern, um die Datenladungsgeschwindigkeit weiter zu verbessern. Das dient dazu, die Daten im Browserspeicher beim Laden der Daten zu speichern. Sobald die Daten geladen sind, werden die Daten für immer im Speicher zwischengespeichert, solange die Seite nicht aktualisiert ist. Wenn der Benutzer die Daten erneut anzeigt, müssen keine Daten vom Server erfasst werden, wodurch die Last des Servers stark reduziert und die Erfahrung des Benutzers verbessert wird.