Web-Entwicklung ist ein faszinierender Prozess zum Erstellen und Verwalten von Websites im Internet. Ein wichtiger Aspekt der Webentwicklung besteht darin, den Seiteninhalt zu aktualisieren, ohne ihn vollständig neu zu laden. Dadurch können Benutzer neue Informationen auf der Seite sehen, ohne sie manuell aktualisieren zu müssen.
JavaScript (JS) ist eines der wichtigsten Werkzeuge zum Erstellen interaktiver Webseiten. Es kann verwendet werden, um den Seiteninhalt zu aktualisieren, ohne ihn neu zu laden. Wenn Sie lernen möchten, eine Seite über JS zu aktualisieren, benötigen Sie Kenntnisse der grundlegenden Prinzipien dieser Programmiersprache.
Eine einfache Methode zum Aktualisieren einer Seite über JS ist die Verwendung einer Methode location.reload(). Diese Methode aktualisiert die aktuelle Seite, indem sie sie neu lädt. Sie können diese Methode bei einem bestimmten Ereignis wie einem Klick auf eine Schaltfläche oder dem Beenden einer asynchronen Operation aus JavaScript aufrufen.
Alternativ können Sie die Methode verwenden setTimeout() um die Seite mit einer Verzögerung über JS zu aktualisieren. Mit dieser Methode können Sie nach einer bestimmten Zeit einen bestimmten Code ausführen. Sie können diese Methode in Verbindung mit der Methode verwenden location.reload(), um die Seite nach einer bestimmten Zeit nach einem bestimmten Ereignis oder Vorgang zu aktualisieren.
Wie kann ich eine Seite mit JavaScript aktualisieren
JavaScript bietet mehrere Möglichkeiten, eine Seite zu aktualisieren. In diesem Abschnitt werden wir die verschiedenen Methoden und ihre Anwendung untersuchen.
| Methode | Die Beschreibung |
|---|---|
| window.location.reload() | Lädt die Seite mithilfe des Caches neu. Diese Methode aktualisiert die Seite, indem sie sie erneut vom Server lädt oder die gespeicherten Daten im Cache verwendet. |
| window.location.href = window.location.href; | Lädt die Seite neu, ohne den Cache zu verwenden. Diese Methode aktualisiert die Seite, indem sie sie erneut vom Server lädt, ohne die im Cache gespeicherten Daten zu verwenden. |
| window.location.reload(true) | Erzwingt das Neuladen der Seite ohne Verwendung eines Caches. Diese Methode aktualisiert die Seite, indem sie sie erneut vom Server lädt, ohne die im Cache gespeicherten Daten zu verwenden, selbst wenn das Zwischenspeichern aktiviert ist. |
| location.reload() | Alias für window.location.reload(). |
Abhängig vom gewünschten Ergebnis und den spezifischen Anforderungen Ihrer Anwendung können Sie eine geeignete Methode zum Aktualisieren der Seite mit JavaScript auswählen.
Gründe für die Aktualisierung der Seite
Es gibt mehrere Gründe, warum die Seite möglicherweise aktualisiert werden muss:
1. Daten aktualisieren: Wenn auf einer Seite dynamische Daten angezeigt werden, z. B. Bestellinformationen, Nachrichten oder Statistikaktualisierungen, können Sie durch die Aktualisierung der Seite die aktuellsten Informationen erhalten.
2. Fehlerkorrektur: Wenn auf der Seite ein Fehler auftritt oder der Inhalt nicht korrekt angezeigt wird, kann das Aktualisieren der Seite das Problem beheben und die Seite wieder in den Betriebszustand versetzen.
3. Herunterladen der aktualisierten Version: Wenn die Seite Teil einer Webanwendung oder Website ist, ist eine Aktualisierung der Seite möglicherweise erforderlich, um eine neue Version der Anwendung mit Fehlerkorrekturen oder hinzugefügten Funktionen herunterzuladen.
4. Status zurücksetzen: In einigen Fällen müssen Sie möglicherweise den Status der Seite zurücksetzen, z. B. nach dem Ausfüllen eines Formulars oder beim Navigieren zu einer anderen Seite der Website. Durch das Aktualisieren der Seite können Sie einen sauberen Start durchführen und mögliche Konflikte oder falsche Daten beseitigen.
Beachten Sie, dass das Aktualisieren der Seite dazu führen kann, dass die eingegebenen Daten auf der aktuellen Seite verloren gehen oder alle Elemente neu geladen werden, was einige Zeit in Anspruch nehmen kann. Daher sollten Sie vor dem Aktualisieren der Seite alle erforderlichen Daten speichern und sicherstellen, dass die Aktionen korrekt sind.
Location-Funktion.reload()
Location-Funktion.reload() in JavaScript wird verwendet, um die aktuelle Seite neu zu laden. Sie aktualisiert die Seite, indem sie sie erneut vom Server heruntergeladen wird.
Diese Funktion kann in vielen Fällen nützlich sein. Zum Beispiel, wenn Sie den Inhalt einer Seite aktualisieren möchten, nachdem Sie eine bestimmte Aktion ausgeführt haben, z. B. das Senden eines Formulars oder das Ändern von Einstellungen.
Um location zu verwenden.reload() , rufen Sie diese Funktion einfach in Ihrem JavaScript-Code auf:
location.reload();Beim Aufruf von location.reload() Die Seite wird aktualisiert und der gesamte Inhalt wird erneut geladen. Dazu gehören alle Skripte, Stile, Bilder und andere Ressourcen.
Beachten Sie, dass bei der Verwendung von location.reload() Der Browser zeigt möglicherweise ein Dialogfeld mit einer Warnung an, dass die Daten erneut gesendet werden, wenn die Seite zuvor mit der POST-Methode gesendet wurde. Wenn dieses Panel nicht angezeigt werden soll, können Sie die Methode zum Senden von Daten in GET ändern, bevor Sie location aufrufen.reload() .
Insgesamt ist die Location-Funktion.reload() ist eine einfache und bequeme Möglichkeit, die aktuelle Seite über JavaScript zu aktualisieren.
Die location-Methode.replace()
Um die location-Methode zu verwenden.replace() genügt es, es aufzurufen und die neue URL der Seite als Argument zu übergeben:
Ein Beispiel:
Dieser Code ersetzt die aktuelle Seite durch die Seite unter der Adresse "http://example.com ". Der Browser lädt eine neue Seite und aktualisiert die URL in der Adressleiste.
Einer der Hauptvorteile der Location-Methode.replace() ist die Möglichkeit, das Problem beim Zwischenspeichern einer Seite beim Aktualisieren zu vermeiden. Wenn Sie diese Methode verwenden, lädt der Browser immer eine neue Seite, auch wenn sie zuvor zwischengespeichert wurde.
Beachten: Im Gegensatz zur location-Methode.href oder mit window.location , die location-Methode.replace() speichert den Browserverlauf der Seite nicht. Wenn der Benutzer die Seite mit der location-Methode aktualisiert.replace() und versucht, mit der Zurück-Schaltfläche zur vorherigen Seite zurückzukehren, wird sie zur nächsten Seite im Browserverlauf weitergeleitet.
Die location-Methode.replace() wird häufig verwendet, um verschiedene Aktionen zu implementieren, bei denen die aktuelle Seite sofort durch eine andere Seite ersetzt werden muss, ohne dass Sie in den vorherigen Zustand zurückkehren können.
Aktualisieren der Seite mit location.href
Um die Seite mit location zu aktualisieren.href , es genügt, ihm einen neuen Wert zuzuweisen - die URL der Seite, zu der Sie navigieren möchten. Wenn Sie beispielsweise die aktuelle Seite neu laden möchten, können Sie den folgenden Code verwenden:
location.href = location.href;Ein solcher Code setzt den Wert location.href entspricht der aktuellen Adresse der Seite, wodurch sie neu geladen wird.
Auch mit location.href kann zu einer anderen Seite wechseln. Es genügt, dieser Eigenschaft eine neue URL zuzuweisen. Zum Beispiel, um zu einer Seite mit einer Adresse zu gelangen "https://example.com ". Sie können den folgenden Code verwenden:
location.href = "https://example.com";Außer die Seite neu zu laden oder zu einer anderen zu wechseln, location.href kann verwendet werden, um den Benutzer nach Ausführung bestimmter Aktionen oder Bedingungen im JavaScript-Code auf eine andere Seite umzuleiten.
Es ist jedoch wichtig, sich daran zu erinnern, dass bei der Verwendung von location.href besteht die Gefahr, dass Formulardaten oder der Seitenstatus verloren gehen, da die neue Seite beim Navigieren vollständig geladen wird. Wenn Sie nur einen Teil der Seite aktualisieren möchten, ohne sie neu zu laden, wird empfohlen, andere Methoden wie AJAX oder die Methoden des history-Objekts zu verwenden.
Automatische Seitenaktualisierung
Um die Seite automatisch über JavaScript zu aktualisieren, können Sie die Funktion setTimeout oder setInterval verwenden. Beide Funktionen ermöglichen es Ihnen, den Code nach einer bestimmten Zeit auszuführen. Der einzige Unterschied besteht darin, dass setTimeout nur einmal ausgeführt wird und setInterval regelmäßig wiederholt wird.
Beispiel für die Verwendung der setTimeout-Funktion zum Aktualisieren einer Seite:
function refreshPage() setTimeout(refreshPage, 5000); // обновить страницу через 5 секундIn diesem Beispiel wird die refreshPage-Funktion 5 Sekunden nach dem Laden der Seite aufgerufen. Es verwendet die reload() -Methode, die die aktuelle Seite neu lädt.
Wenn Sie die Seite regelmäßig aktualisieren möchten, können Sie die Funktion setInterval verwenden. Zum Beispiel, um eine Seite jede Minute zu aktualisieren:
function refreshPage() setInterval(refreshPage, 60000); // обновить страницу каждую минутуBeachten Sie, dass die automatische Aktualisierung der Seite für Benutzer aufdringlich sein kann. Verwenden Sie sie daher mit Vorsicht. Stellen Sie außerdem sicher, dass Sie Zugriff auf die reload() -Funktion haben, da einige Browser blockieren diese Funktion möglicherweise für einige Websites.
Aktualisieren der Seite auf Knopfdruck
Eine regelmäßige Aktualisierung der Seite kann in vielen Fällen hilfreich sein. Ein Beispiel könnte sein, dass Daten aktualisiert werden müssen, die sich im Laufe der Zeit ändern können. Sie können JavaScript verwenden, um eine solche Seitenaktualisierung auf Knopfdruck zu implementieren.
Zuerst müssen Sie eine Schaltfläche im HTML-Code der Seite erstellen. Dazu wird ein Tag verwendet.
Beispielcode für eine Schaltfläche:
Außerdem müssen Sie ein JavaScript-Skript erstellen, das das Klicken auf die Schaltfläche verarbeitet und die Seite aktualisiert.
Beispielskriptcode:
In diesem Beispiel wird die location-Methode verwendet.reload(), um die Seite zu aktualisieren. Wenn Sie auf eine Schaltfläche mit der ID "refreshButton" klicken, führt das Skript die reload() -Methode des location-Objekts aus, wodurch die Seite mithilfe des Browser-Caches neu geladen wird. Auf diese Weise wird die Seite aktualisiert, ohne eine Anforderung an den Server zu senden.
Sie können den Code der Schaltfläche und des Skripts nach Belieben ändern, z. B. Stile hinzufügen oder Parameter an die reload() -Methode übergeben. Die Hauptsache ist, dass das Skript korrekt mit der Seite verbunden ist und den Knopfdruck verarbeitet.
Aktualisieren der Seite nach einer bestimmten Aktion
Um die Seite nach einer bestimmten Aktion zu aktualisieren, können Sie die location-Funktion verwenden.reload() in JavaScript. Diese Funktion aktualisiert die aktuelle Seite, indem sie sie erneut lädt.
Der Seitenaktualisierungsprozess kann nützlich sein, wenn der Benutzer Änderungen sehen soll, nachdem er eine bestimmte Aktion ausgeführt hat, z. B. das Senden eines Formulars oder das Aktualisieren von Daten.
Im Folgenden finden Sie ein Beispiel, das die Verwendung der location-Funktion veranschaulicht.reload(), um die Seite zu aktualisieren:
In diesem Beispiel wird die Funktion reloadPage() aufgerufen, wenn Sie auf die Schaltfläche "Seite aktualisieren" klicken, wodurch die aktuelle Seite neu geladen wird.
Beachten Sie, dass bei Verwendung dieser Funktion alle nicht gespeicherten Änderungen auf der Seite verloren gehen. Stellen Sie daher sicher, dass der Benutzer vor dem Ausführen der Aktualisierung über einen möglichen Datenverlust informiert wird.
Aktualisieren der Seite mit setTimeout()
Sie können die Funktion verwenden, um die Seite in JavaScript zu aktualisieren setTimeout(). Mit dieser Funktion können Sie einen bestimmten Code oder eine bestimmte Funktion nach einer bestimmten Zeit aufrufen.
Um die Seite mit setTimeout() zu aktualisieren, genügt es, die Funktion aufzurufen window.location.reload() innerhalb einer Funktion, die nach einer bestimmten Zeit aufgerufen wird.
Der folgende Code aktualisiert beispielsweise die Seite nach 5 Sekunden:
In diesem Beispiel übergeben wir eine Funktion an setTimeout(), die die Funktion aufruft window.location.reload() nach 5 Sekunden (5000 Millisekunden).
Auf diese Weise wird die Seite nach 5 Sekunden aktualisiert.
Sie können auch zusätzliche Aktionen hinzufügen, bevor Sie die Seite aktualisieren. Sie können beispielsweise eine Nachricht an den Benutzer senden oder vor dem Upgrade einen anderen Code ausführen.
Um dies zu tun, fügen Sie einfach den erforderlichen Code innerhalb der Funktion hinzu setTimeout().
In diesem Beispiel wird eine Meldung mit der Funktion angezeigt, bevor die Seite aktualisiert wird alert().
Nachdem der Benutzer in der Nachricht auf die Schaltfläche "OK" geklickt hat, wird die Seite aktualisiert.
Daher ist die Funktion setTimeout() ermöglicht es Ihnen, die Seite nach einer bestimmten Zeit zu aktualisieren und zusätzliche Aktionen hinzuzufügen, bevor Sie aktualisiert werden.
Aktualisieren der Seite mit AJAX
Sie können die AJAX-Technologie verwenden, um die Seite zu aktualisieren, ohne sie vollständig neu zu laden. Mit AJAX (Asynchronous JavaScript and XML) können Sie asynchrone Anforderungen an den Server senden und nur bestimmte Teile der Seite aktualisieren.
Um mit AJAX zu arbeiten, müssen Sie JavaScript verwenden. Mit JavaScript können Sie eine Anfrage an den Server senden und Daten im XML-, JSON- oder Textformat abrufen. Die resultierenden Daten können dynamisch in die aktuelle Seite eingefügt und somit aktualisiert werden, ohne sie neu zu laden.
Sie können ein XMLHttpRequest-Objekt verwenden, um mit AJAX zu arbeiten. Mit diesem Objekt können Sie GET- und POST-Anfragen an den Server senden und Antworten von ihm erhalten.
Beispiel für das Aktualisieren einer Seite mit AJAX:
function updatePage() >;xhttp.open("GET", "update.php", true);xhttp.send();>In diesem Beispiel sendet die Funktion updatePage() eine GET-Anforderung an den Server unter der angegebenen URL (in diesem Fall "update.php"). Wenn eine Antwort vom Server empfangen wird (readyState ist 4) und der Antwortstatus 200 (erfolgreiche Antwort), wird der Inhalt des Elements mit der ID "content" durch die erhaltene Antwort vom Server ersetzt.
Um eine Seite mit dieser Funktion zu aktualisieren, können Sie sie bei einem bestimmten Ereignis aufrufen, z. B. wenn Sie auf eine Schaltfläche klicken oder die Seite laden:
Wenn Sie also auf die Schaltfläche "Aktualisieren" klicken, wird eine Anforderung an den Server gesendet und der Inhalt des Elements mit der ID "content" aktualisiert.
Mit AJAX können Sie die Seite dynamischer und reaktionsfähiger gestalten, ohne sie neu zu laden.
