So aktualisieren Sie asynchron in JQuery

In der Webentwicklung wird die asynchrone Aktualisierungstechnologie häufig verwendet, um einige spezielle Funktionen zu implementieren, z. B. teilweise Aktualisierung, Echtzeitaktualisierung usw. Die Kerntechnologie zur Erzielung einer asynchronen Aktualisierung ist die Ajax-Technologie. Als eine der beliebtesten JavaScript-Bibliotheken kapselt jQuery Ajax-Funktionen, die sehr leistungsstark und einfach zu verwenden sind. In diesem Artikel werfen wir einen detaillierten Blick darauf, wie man eine asynchrone Aktualisierung mit jQuery implementiert.

1. Prinzip der asynchronen jQuery-Aktualisierung

Bei herkömmlichen synchronen Anforderungen sendet der Client eine Anfrage an den Server und wartet dann auf die Antwort des Servers. Bei einer asynchronen Anfrage muss der Client nach dem Senden der Anfrage nicht auf die Antwort des Servers warten, sondern führt weiterhin nachfolgenden Code aus. Wenn der Server antwortet, wird basierend auf den Antwortergebnissen eine entsprechende Verarbeitung durchgeführt. Auf diese Weise kann eine teilweise Aktualisierung der Website erreicht und unnötiger Netzwerkverkehr und Ressourcenverschwendung durch das Neuladen der Seite vermieden werden.

Die asynchrone Aktualisierung von jQuery basiert auf der Ajax-Technologie. Das Prinzip lautet:

1. Der Client sendet eine asynchrone Anfrage an den Server und verwendet das XMLHttpRequest-Objekt, um eine asynchrone Anfrage zu erstellen. XMLHttpRequest-Objekt.

2. Vor dem Senden einer Anfrage muss der Client die Anfrage konfigurieren, einschließlich des Anfragetyps, der angeforderten URL, der Anfrageparameter usw.

3. Der Client sendet eine Anfrage an den Server und registriert eine Callback-Funktion. Nachdem der Server die Anfrage verarbeitet hat, gibt er das Antwortergebnis an den Client zurück. Der Client führt die entsprechende Rückruffunktion basierend auf dem Antwortergebnis aus.

4. Der Client führt entsprechende Vorgänge basierend auf der Serverantwort aus, z. B. die Aktualisierung eines Teils der Webseite.

2. Implementierung der asynchronen Aktualisierung von jQuery

Es gibt zwei Hauptmethoden der asynchronen Aktualisierung von jQuery: die Methoden $.ajax() und $.get(), darunter $.get () ist eine vereinfachte Version von $.ajax(), geeignet für Szenarien, in denen nur URL und Daten in der Anfrage übergeben werden. Im Folgenden wird die Verwendung dieser beiden Methoden vorgestellt.

1. Verwenden Sie die Methode $.ajax(), um eine asynchrone Aktualisierung zu implementieren.

Die Methode $.ajax() ist eine der am häufigsten verwendeten Methoden in jQuery zum asynchronen Senden Anfragen. Es verwendet Promise, um die Verwaltung asynchroner Anforderungen zu vereinfachen. Die grundlegende Verwendung der Methode $.ajax() ist wie folgt:

$.ajax({

type: 'POST',  //请求类型
url: 'http://www.example.com/api',  //请求的URL地址
data: {username: '张三', password: '123456'},  //请求的参数
success: function(data){  //回调函数，处理服务器响应结果
    // 服务器响应成功后执行的代码
},
error: function(xhr, type){  //回调函数，处理服务器响应错误
    // 服务器响应失败后执行的代码
}

});

Das Obige Code verwendet zuerst $ Die .ajax()-Methode sendet eine POST-Anfrage, die angeforderte URL-Adresse ist http://www.example.com/api und die Anforderungsparameter sind {Benutzername: 'Zhang San', Passwort: '123456' }. Wenn der Server erfolgreich antwortet, führt jQuery die Erfolgsrückruffunktion aus und übergibt die Antwortdaten als Parameter an die Rückruffunktion. Wenn der Server mit einem Fehler antwortet, führt jQuery die Fehler-Callback-Funktion aus und übergibt das XMLHttpRequest-Objekt und den Fehlertyp als Parameter an die Callback-Funktion.

2. Verwenden Sie die Methode $.get(), um eine asynchrone Aktualisierung zu implementieren.

Die Methode $.get() ist eine vereinfachte Version der Methode $.ajax(). Geeignet für die Verwendung in Anforderungsszenarien, bei denen nur URL und Daten übergeben werden. Die grundlegende Verwendung der Methode $.get() ist wie folgt:

$.get('http://www.example.com/api', {Benutzername: 'Zhang San', Passwort : '123456' }, function(data){

// 处理服务器响应结果

})

Der obige Code verwendet zunächst die Methode $.get(), um eine GET-Anfrage an http zu senden: //www.example.com/api-Adresse und übergeben Sie die Parameter {Benutzername: 'Zhang San', Passwort: '123456'} an den Server. Wenn der Server erfolgreich antwortet, führt jQuery die Rückruffunktion aus und übergibt das Antwortergebnis als Parameter an die Funktion.

3. Beispiel für die Implementierung einer asynchronen Aktualisierung durch jQuery

Im Folgenden werden wir anhand eines Beispiels konkret veranschaulichen, wie jQuery zur Implementierung einer asynchronen Aktualisierung verwendet wird. In diesem Beispiel verwenden wir die Methode $.get(), um die aktuelle Uhrzeit vom Server abzurufen und sie auf den angegebenen DIV auf der Webseite zu aktualisieren. Der spezifische Code lautet wie folgt:

HTML-Code:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e#🎜 🎜#

<meta charset="UTF-8">
<title>jQuery异步刷新实例</title>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<h1>当前时间：</h1>
<div id="time"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="refresh.js"></script>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e
#🎜🎜 #JavaScript-Code (refresh.js):

function restartTime() {

$.get('http://www.example.com/get_time', function(data) {
    $('#time').text(data.time);
});

}

setInterval(refreshTime, 1000);#🎜🎜 ##🎜 🎜#Der obige Code definiert zunächst eine Funktion „refreshTime()“, die mithilfe der Methode „$.get()“ eine GET-Anfrage an http://www.example.com/get_time sendet und das Zeitfeld in der Antwort aktualisiert Ergebnis zur ID im DIV für Zeit. Verwenden Sie dann die Methode setInterval(), um die Funktion restartTime() alle 1 Sekunde auszuführen.

Auf diese Weise kann, wenn ein Benutzer die Webseite besucht, die Zeit auf der Seite immer in Echtzeit aktualisiert werden, ohne dass die gesamte Seite neu geladen werden muss. Eine solche Erfahrung wird für die Benutzer reibungsloser und leichter zu akzeptieren sein.

Zusammenfassung

In diesem Artikel wird detailliert beschrieben, wie Sie mit jQuery die asynchrone Aktualisierungstechnologie implementieren. Zuerst wird das Prinzip der asynchronen Aktualisierung von jQuery erläutert, und dann werden die beiden wichtigsten asynchronen Aktualisierungsmethoden vorgestellt: die Methoden $.ajax() und $.get(). Abschließend zeigt ein konkretes Beispiel, wie mithilfe der asynchronen Aktualisierungstechnologie eine Echtzeitaktualisierung von Webseiten erreicht werden kann. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die asynchrone Aktualisierungstechnologie von jQuery besser zu beherrschen und die Effizienz der Webentwicklung zu verbessern.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie asynchron in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!