So verwenden Sie AJAX in JavaScript und verhindern, dass die Seite aktualisiert wird

Da Websites immer komplexer werden und eine höhere Benutzererfahrung erfordern, ist die AJAX-Technologie (Asynchronous JavaScript and XML) zu einer der wesentlichen Fähigkeiten für die Website-Frontend-Entwicklung geworden. Es ermöglicht Ihnen, über JavaScript Anfragen an den Server zu senden, ohne dass die gesamte Seite neu geladen werden muss. Dadurch wird die Website schneller und flüssiger und die Benutzer spüren keine Unterbrechung. In diesem Artikel wird erläutert, wie Sie AJAX in JavaScript verwenden und verhindern, dass die Seite aktualisiert wird.

1. AJAX und XMLHttpRequest

Die Verwendung von AJAX in Javascript erfordert die Verwendung des XMLHttpRequest-Objekts, da es den Kern der Ausführung asynchroner Anforderungen darstellt. Das XMLHttpRequest-Objekt ist ein integriertes JavaScript-Objekt, das oft kurz als XHR bezeichnet wird. Es stellt eine API für asynchrone Anfragen über das HTTP-Protokoll bereit, die es uns ermöglicht, Serverantworten zu erhalten, Anfragen zu verarbeiten und Webseiten zu aktualisieren, ohne die gesamte Seite zu aktualisieren.

Hier ist ein einfaches Beispiel für das Erstellen einer Anfrage mit XHR:

let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
   if(request.readyState === 4 && request.status === 200) {
      let response = JSON.parse(request.responseText);
      // 处理响应并更新页面
   }
};
request.send();

Im obigen Code erstellen wir eine XMLHttpRequest-Objektinstanz und öffnen eine GET-Anfrage mit der Methode open(). Nach dem Öffnen der GET-Anfrage legen wir eine Handlerfunktion für das onreadystatechange-Ereignis fest, die aufgerufen wird, wenn sich das readyState-Attribut des XHR-Objekts ändert, und prüfen, ob der Statuscode der Serverantwort 200 ist. Wenn alles gut geht, analysieren wir den Antworttext (normalerweise im JSON-Format) und aktualisieren die relevanten Daten auf der Seite.

2. AJAX in jQuery

Wenn Sie jQuery verwenden, abstrahiert es eine vereinfachte API unter der Haube, um AJAX zu verwenden. Hier ist ein vollständiges jQuery-AJAX-Beispiel:

$.ajax({
   url: '/api/data',
   type: 'GET',
   dataType: 'json',
   success: function(data) {
      // 成功后更新页面
   }
});

Im obigen Code senden wir eine GET-Anfrage mit der $.ajax()-Methode von jQuery und führen bei Erfolg eine Handlerfunktion aus. Ähnlich wie bei der Verwendung des XMLHttpRequest-Objekts können wir den Seiteninhalt in der Erfolgsfunktion aktualisieren.

3. AJAX zum Aktualisieren des Seiteninhalts verwenden

Sobald Ihre AJAX-Anfrage erfolgreich eine Antwort zurückgibt, möchten Sie möglicherweise JavaScript verwenden, um den Inhalt der Seite zu aktualisieren, um die neuen Daten widerzuspiegeln. Hier ist ein einfaches Beispiel:

function updatePage(response) {
   let div = document.getElementById('data-display');
   let html = '';
   response.forEach(function(item) {
      html += '<div>' + item.name + '</div>';
   });
   div.innerHTML = html;
}

Im obigen Code definieren wir eine updatePage()-Funktion, um den Seiteninhalt zu aktualisieren. Es findet zunächst das div-Element mit der ID „data-display“, erstellt intern eine HTML-Zeichenfolge und setzt diese Zeichenfolge dann auf das innerHTML dieses Elements.

4. Vermeiden Sie doppelte Anfragen

Da AJAX asynchron ausgeführt wird, können Benutzer kontinuierlich mehrere identische oder unterschiedliche Anfragen initiieren, was dazu führt, dass diese Anfragen stark verschachtelt sind, was zu Parallelitätsproblemen und übermäßiger Serverlast führt. Daher sollten wir beim Senden von AJAX-Anfragen darauf achten, doppelte Anfragen zu vermeiden.

Eine Möglichkeit, doppelte Anfragen zu vermeiden, besteht darin, eine Tag-Variable (oder Flag-Variable) zu verwenden, um zu überprüfen, ob die vorherige Anfrage abgeschlossen wurde. Zum Beispiel:

let requesting = false;
function makeRequest() {
   if(requesting) {
      return;
   }
   requesting = true;
   $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
         updatePage(data);
      },
      complete: function() {
         requesting = false;
      }
   });
}

Im obigen Code verwenden wir die Variable „requesting“, um zu identifizieren, ob eine Anfrage ausgegeben wurde. Um Mehrfachanfragen zu vermeiden, prüfen wir zunächst den Status dieser Variable, bevor wir mit dem Senden der Anfrage beginnen. Wenn die Variable wahr ist, wird sie zurückgegeben und es werden keine neuen Anfragen gesendet. Wenn die Anfrage erfolgreich ist oder fehlschlägt, setzen wir die Variable in der vollständigen Rückruffunktion auf „false“ zurück, um neue Anfragen zuzulassen.

5. AJAX zur Implementierung dynamischer Formulare verwenden

Eines der häufigsten Szenarios für AJAX besteht darin, Daten über dynamische Formulare zu übermitteln und die Serverantwort zu erhalten, ohne die gesamte Seite zu aktualisieren. Das Folgende ist ein Beispiel für die Verwendung von jQuery zum Implementieren eines dynamischen Formulars:

<form id="my-form">
   <input type="text" id="name" name="name" placeholder="Your name">
   <button type="submit">Submit</button>
</form>
<div id="result"></div>

<script type="text/javascript">
   $("#my-form").submit(function(e) {
      e.preventDefault();
      let $form = $(this);
      let url = $form.attr('action');
      let formData = $form.serialize();
      $.ajax({
         type: "POST",
         url: url,
         data: formData,
         dataType: 'json',
         success: function(response) {
            $('#result').html("Thank you, " + response.name + "!");
         }
      });
   });
</script>

Im obigen Code definieren wir ein Formular und binden ein Submit-Ereignis daran. Wenn der Benutzer das Formular absendet, verwenden wir die Methode serialize(), um die Formulardaten zu sammeln und sie als Daten für die AJAX-Anfrage an den Server zu senden. Wenn der Server die JSON-Antwort erfolgreich verarbeitet und zurückgibt, aktualisieren wir ein div-Element mit der ID „result“ auf der Seite mit den Daten in der Antwort.

Fazit

Wie Sie sehen, macht AJAX das Senden und Empfangen von Daten an den Server einfacher und komfortabler. In diesem Artikel wird erläutert, wie Sie AJAX in Javascript verwenden, um asynchrone Anforderungen zu senden und Inhalte zu aktualisieren, ohne die gesamte Seite zu aktualisieren. Abschließend haben wir besprochen, wie man doppelte Anfragen vermeiden und die dynamische Formularübermittlung implementieren kann. AJAX ist eine sehr nützliche Technologie, die Ihre Website schneller und reibungsloser machen und das Benutzererlebnis erheblich verbessern kann.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie AJAX in JavaScript und verhindern, dass die Seite aktualisiert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!