So verwenden Sie die Ajax -Funktion von jQuery

Nachdem Sie die vorherigen drei Tutorials durchlaufen haben, sollten Sie sich mit AJAX gut auskennen. In diesem abschließenden Lernprogramm werden wir die Dinge mit einem ausführlicheren Beispiel abschließen.

Der Markup

Um einen Eindruck von der Struktur dieses Beispiels zu erhalten, betrachten Sie die folgende Markierung:

Das Markup für die Main Element wird unten gezeigt:

 
 
Beliebte Frontend-Frameworks
 
Klicken Sie auf jeden, um Details über AJAX zu laden.
 
 Bootstrap Foundation UIkit Semantic UI Skeleton Material Design Lite 
 
 

Beachten Sie die Textlinks. Diese entsprechen unterschiedlichen Front-End-Frameworks. Wie wir im nächsten Abschnitt sehen werden, wird jedes Mal, wenn wir auf die Links klicken, eine AJAX-Anfrage ausgeführt. Dann das Element mit der Klasse von modal erscheint und der Inhalt wird mit den aus der Antwort abgerufenen Daten aktualisiert.

Hier ist wie das Main Element sieht so aus:

Modal Markup

Der nächste Schritt besteht darin, die Struktur unseres Modals zu untersuchen. Hier ist der HTML-Code:

 
 ✕ 
 
 
Rahmen
  
Aktuelle Version
  
Anzahl der Github-Sterne
  
Offizielle Seite
  
  
 
 

Wie Sie sehen, enthält das Modal einige leere Elemente. Wir fügen diese in den HTML-Code ein, da sich ihr Text je nach dem Link, auf den wir klicken, und der Antwort, die wir abrufen, ändert.

Das Bild unten zeigt, wie der Modal anfänglich erscheint:

Standardmäßig ist das Modal ausgeblendet. Zusätzlich verstecken wir den Loader. Dies wird nur angezeigt, wenn die AJAX-Anfrage ausgelöst wird.

Schauen Sie sich die entsprechenden CSS-Regeln an:

 .modale Opazität: 0;  .loader display: none;  

Beachten Sie, dass wir das verwenden Opazität Eigentum (und nicht die Anzeige property), um das Modal auszublenden, da diese Eigenschaft zu den animierbaren CSS-Eigenschaften gehört. Auf diese Weise können wir die Modalzustände (d. H. Die offenen und geschlossenen Zustände) wechseln..

Generierung der JSON-Antwort

In diesem Beispiel erstellen wir die JSON-Antwort selbst. Insbesondere die erwartete Antwort (d. H Demo.json Datei) ist ein Array von Objekten. Jedes Objekt enthält Details zu den zugehörigen Front-End-Frameworks.

Darüber hinaus ist der Wert von Name Die Eigenschaft entspricht den Textlinks der Main Element (siehe vorherigen Abschnitt). In diesem Sinne sieht die Struktur der Antwort in etwa so aus:

 ["url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "name": "Bootstrap", "url": "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "name": "Foundation", // 4 weitere Objekte hier] 

Hinweis: die Werte, die wir für verwendet haben numberOfStars und aktuelle Version Eigenschaften sind unecht und nur zu Demonstrationszwecken.

Ähnlich wie in den vorherigen Beispielen dieser Serie verwenden wir AJAX, um eine statische Datei anzufordern. Wenn Sie jedoch Inhalte von anderen Websites (z. B. Google Maps, Flickr) einbetten möchten, sollten Sie deren API-Dokumentation lesen und gegebenenfalls einen API-Schlüssel beantragen.

Darüber hinaus befinden sich unsere Zieldaten auf demselben Server wie die Demoseite. Daher vermeiden wir Einschränkungen, die bei der Interaktion mit Diensten von Drittanbietern auftreten können (siehe Abschnitt "Einschränkungen von AJAX-Anforderungen" des ersten Lernprogramms)..

Implementierung der AJAX-Anfrage

In diesem Abschnitt verwenden wir jQuery's Ajax Funktion zum Initialisieren einer AJAX-Anfrage. Bevor wir dies tun, definieren wir zuerst unsere Variablen durch Zwischenspeichern der am häufigsten verwendeten jQuery-Selektoren:

 var $ list = $ ('. m-info'), var $ message = $ ('. m-message'); var $ modal = $ ('. modal'); var $ loader = $ ('. loader'); var $ framework; 

Nun ist es an der Zeit, den Code zu untersuchen, der für die Ausführung der Anfrage verantwortlich ist:

 $ ('.Boxen a'). on ('click', Funktion (e) e.preventDefault (); $ framework = $ (this) .text (); $ .ajax (url: 'Demo.json') , dataType: 'json', beforeSend: function () $ loader.show ();. done (successFunction) .fail (errorFunction) .always (alwaysFunction);); 

Sie werden die Syntax für die Ajax Funktion sieht wie folgt aus:

 $ .ajax ([Einstellungen]) 

Das die Einstellungen Parameter ist ein Konfigurationsobjekt, das Informationen zu unserer Anfrage enthält. Die Anzahl der Eigenschaften, die dieses Objekt haben kann, ist sehr lang (ca. 34 Eigenschaften). Der Einfachheit halber werden nur die in dieser Demo verwendeten besprochen. Genauer:

Eigentum	Beschreibung
url	Eine Zeichenfolge, die die URL enthält, an die die Anforderung gesendet wird.
Datentyp	Das Format der Antwortdaten (z. Json, xml, html).
beforeSend	Eine Rückruffunktion, die ausgeführt wird, bevor wir die Anfrage senden. Hier löst diese Funktion den Code aus, der den Loader anzeigt.

Bevor wir fortfahren, sollten wir drei Dinge erwähnen:

• Es gibt auch eine andere Syntax für Ajax Funktion: $ .ajax (URL [, Einstellungen])
• Alle Konfigurationseigenschaften des die Einstellungen Parameter sind optional.
• Die Standard-HTTP-Methode lautet ERHALTEN.

Versprechen Sie Methoden

Das Ajax Die Funktion gibt das jQuery-Objekt XMLHttpRequest oder jqXHR zurück. Dieses Objekt implementiert die Promise-Schnittstelle und enthält daher alle Eigenschaften, Methoden und Verhalten einer Promise.

In diesem Beispiel verwenden wir die folgenden Promise-Methoden:

• erledigt
• Scheitern
• immer

Das erledigt Methode wird ausgelöst, wenn die Anforderung erfolgreich ist. Es empfängt ein oder mehrere Argumente, die entweder eine einzelne Funktion oder ein Array von Funktionen sein können. Zum Beispiel in unserer Demo die successFunction () wird als Argument übergeben.

Die Rückruffunktion (z. successFunction ()) akzeptiert drei Argumente. Zuerst die zurückgegebenen Daten. Zweitens eine Zeichenfolge, die den Status der Anforderung kategorisiert (die möglichen Werte finden Sie im vorherigen Artikel). Zuletzt das Objekt jqXHR.

Das Scheitern Methode wird aufgerufen, wenn die Anforderung fehlschlägt. Es empfängt ein oder mehrere Argumente, die entweder eine einzelne Funktion oder ein Array von Funktionen sein können. Zum Beispiel in unserer Demo die errorFunction () wird als Argument übergeben.

Die Rückruffunktion (z. errorFunction ()) akzeptiert drei Argumente: das Objekt jqXHR, eine Zeichenfolge, die den Status der Anforderung kategorisiert, und eine weitere Zeichenfolge, die den resultierenden Fehler angibt. Dieser Fehler empfängt den Textteil des HTTP-Status, z. B. Nicht gefunden oder verboten.

Das immer Die Methode wird ausgeführt, wenn die Anforderung unabhängig vom Erfolg (d. h erledigt Methode ausgeführt wird) oder Fehler (d. h Scheitern Methode wird ausgeführt). Wieder erhält es als Argument eine einzelne Funktion oder ein Array von Funktionen. Zum Beispiel in unserer Demo die alwaysFunction () wird als Argument übergeben.

Der Status der Anforderung gibt die Argumente der Funktion an. Im Falle einer erfolgreichen Anfrage wird der Rückruf (z. alwaysFunction ()) erhält die gleichen Argumente wie der Rückruf der erledigt Methode. Im Gegenteil, wenn die Anfrage fehlschlägt, akzeptiert sie dieselben Argumente wie der Rückruf von Scheitern Methode.

Hinweis: Anstatt der erledigt, Scheitern, und immer Versprechende Methoden, die in diesem Beispiel verwendet werden, hätten wir auch gleich verwenden können Erfolg, Error, und Komplett Callback-Funktionen. Diese Funktionen sind in definiert die Einstellungen Parameter.

Anzeige der Daten

Wenn die Anforderung erfolgreich ist, können wir die Antwortdaten zurückholen. Dann manipulieren wir es, um die leeren Elemente des Modals aufzufüllen.

Betrachten Sie den Code für die Erfolgsfunktion Ruf zurück:

 Funktion successFunction (Daten) if (data.length> 0) für (var i = 0; i < data.length; i++)  if ($framework === data[i].name)  $list.show(); $message.hide(); $list.find('li:nth-of-type(2)').text($framework); $list.find('li:nth-of-type(4)').text(data[i].currentVersion); $list.find('li:nth-of-type(6)').text(data[i].numberOfStars); $list.find('li:nth-of-type(8)').html('' + data[i].url + ''); break;  else  $list.hide(); $message.show().text('No data received for this framework!');    else  $list.hide(); $message.text('No data received from your respose!');   

Obwohl wir den Inhalt unseres Modals aktualisiert haben, ist dieser immer noch verborgen. Es wird sichtbar und der Lader verschwindet, wenn die Anforderung abgeschlossen ist. Nur dann die immerFunktion Rückruf wird ausgeführt:

 function alwaysFunction () $ loader.hide (); $ modal.addClass ('active');  

Das aktiv Klasse sieht so aus:

 .aktive Deckkraft: 1; z-Index: 10; verwandeln: Skala (1);  

Unten sehen Sie das erwartete Erscheinungsbild des Modals, wenn Sie auf klicken Bootstrap Textlink:

Ein paar Szenarien

Es ist wichtig, den Code zu verstehen, der unter bestimmten Umständen ausgeführt wird. Lassen Sie uns zwei allgemeine Szenarien behandeln:

• Der Wert von Name Eigenschaft stimmt nicht mit den Textlinks der überein Main Element. Nehmen wir zum Beispiel an, dass wir eine URL definieren, bei der der Wert von Name Eigenschaft des Objekts, das sich auf das Foundation Framework bezieht, ist Stiftung2 anstatt Stiftung. In einem solchen Fall klicken Sie auf die Schaltfläche Stiftung Textlink erscheint der folgende Modal:

• Die Antwortdaten sind leer. Angenommen, wir definieren zum Beispiel eine URL, die auf ein leeres Array zeigt. In diesem Fall würde der Modal so aussehen:

Fehler behandeln

Wir haben also den Code behandelt, der ausgelöst wird, wenn die Anforderung erfolgreich ist. Was passiert aber, wenn die Anfrage fehlschlägt? Bei einer nicht erfolgreichen Anfrage blenden wir die Liste aus und zeigen eine benutzerdefinierte Nachricht an.

Hier ist der Code von failFunction () was dieses Verhalten demonstriert:

 function failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Bei Ihrer Anfrage ist ein Fehler aufgetreten:' + request.status + "+ textStatus +" + errorThrown);  

Um uns mit diesem Code vertraut zu machen, geben wir eine URL an, die nicht vorhanden ist. Daher die Scheitern Die Methode wird ausgelöst und der folgende Modal wird angezeigt:

Hinweis: Wieder kann die Fehlermeldung anders sein, wenn Sie dieses Beispiel lokal ausführen.

Hier ist die eingebettete Codepen-Demo:

Fazit

In diesem Tutorial haben wir die Prüfung von AJAX aus der Sicht eines Webdesigners abgeschlossen. Ich hoffe, dass Sie diese Serie als hilfreich empfanden und neue Fähigkeiten gelernt haben.

Als nächsten Schritt ermutige ich Sie, die folgenden Dinge zu untersuchen:

• Machen Sie sich mit den AJAX-Abkürzungsmethoden von jQuery vertraut, die wir nicht behandelt haben (z. $ .getJSON Methode).
• Implementieren Sie Ihre eigenen AJAX-Anforderungen, indem Sie auf statische Dateien oder sogar auf dynamische Daten von Drittanbieterdiensten (z. B. Flickr) zugreifen..