AJAX mit jQuery verstehen

AJAX Es umfasst eine Reihe von Techniken und Technologien, die es uns ermöglichen, eine asynchrone Kommunikation zwischen dem, was der Client im Web sieht, und den Informationen, die auf der Serverseite einer Webseite vorhanden sind, herzustellen.
Eines der Hauptmerkmale, die wir hervorheben können, ist, dass es auf den verschiedenen Methoden beruht HTTP Was POST, GET, PUT oder DELETE um die notwendigen Daten an die Anwendungen auf dem Server senden zu können.
In der frühen Entwicklungsphase mit AJAX Anrufe mussten aufgebaut werden mit Javascript flat, was allerdings viel Code für uns generiert hat jQuery hilft uns, die Dinge zu vereinfachen, indem wir diese Technik und Technologien der breiten Masse zugänglich machen, zum Vorteil sowohl des Entwicklers als auch des Benutzers.
Was ist AJAX?AJAX entspricht Asynchrones Javascript und XML nämlich Javascript Ja XML asynchron, was auch bedeutet, dass es nicht von einer festen Struktur wie einem Skript abhängt PHP wo die Anweisungen sequentiell ausgeführt werden, wobei natürlich die Aufrufe von Methoden und Funktionen von Klassen und Objekten gespeichert werden.
Das oben Erklärte gibt uns die Möglichkeit, Informationen zu laden oder zu senden, ohne neu laden oder eine "vollständige" Anfrage an den Server stellen zu müssen. Wir setzen sie in Anführungszeichen, weil die Aufrufe AJAX Dies sind normale Anfragen, es ist einfach nicht notwendig, die Seite vollständig zu aktualisieren, wenn es nicht das gewünschte Verhalten ist.
Die Verwendung dieser Techniken und Technologien stellt einige Vorteile dar, deren Existenz nicht vielen bewusst ist. Oft verwenden wir sie nur für den Trend, aber wenn wir ihre Vorteile verstehen, können wir wissen, auf welche Projekte wir sie anwenden können das Beste daraus. Sehen wir uns unten einige der wichtigsten Vorteile der Verwendung an AJAX:
Reduzierung der BandbreitennutzungDies erreichen wir insbesondere durch die Anforderungen von Abschnitten, wodurch wir beispielsweise erreichen können, dass wir keine allgemeinen Stile oder Bilder neu laden müssen, wenn wir Text aktualisieren möchten.
Bessere BenutzererfahrungDurch die Erhöhung der Geschwindigkeit der Webanwendung hat der Benutzer eine deutliche Verbesserung der Nutzung und gibt uns als Entwickler zusätzlich die Möglichkeit, den Interaktionsgrad mit den von uns arrangierten Elementen zu erhöhen.
Browserabhängigkeit entfernenBeim Benutzen jQuery die Notwendigkeit, browserabhängigen Code zu schreiben, entfällt, dies hilft uns, die Entwicklungsgeschwindigkeit und Produktivität unserer Zeit zu verbessern.
Da nichts perfekt ist, bei der Verwendung AJAX Wir müssen auch verstehen, dass es einige Nachteile gibt, die uns dazu bringen können, darüber nachzudenken und darüber nachzudenken, ob dies die beste Option für unser Projekt ist. Als nächstes werden wir einige dieser Punkte sehen, um ein vollständigeres Bild zu erhalten, bevor wir mit dem technischen Teil des Tutorials beginnen.
AbhängigkeitWenn ein Client oder Benutzer einen sehr alten Browser verwendet oder den Javascript deaktiviert, kann unsere Anwendung leiden oder nicht funktionieren, was uns die Verpflichtung gibt, Sonderfälle zu machen, wenn wir sie nicht verwenden können AJAX.
Schreiben Sie zusätzlichen CodeGemäß unserer Anwendung müssen wir zusätzlichen Code schreiben, um die Antworten, die wir von den Anfragen erhalten, integrieren zu können AJAX, wie Antworten, die mit kommen HTML Ja CSS.
Natürlich ist es derzeit sehr schwierig, einen Browser zu finden, der nicht kompatibel ist mit Javascript Ja jQueryAbhängig von unserem Gebiet können wir jedoch einige Fälle finden, die das Leben sehr schwer machen können.
Eine Anfrage AJAX aus jQuery muss eine Grundstruktur haben, in der wir einige Parameter festlegen müssen, die für das Framework erforderlich sind, wir müssen die Methode festlegen HTTP der Anfrage, die Route, auf die die Anfrage gestellt wird, das Antwortformat und schließlich, was zu tun ist, wenn die Anfrage erfolgreich ist oder ein Fehler auftritt. Sehen wir uns im folgenden nicht-funktionalen Code an, wie wir dies sehen können:

 $ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: / / www.example.com/request dataType: "Datentyp", / / html, xml, json Erfolg: Funktion bei Erfolg, Fehler: Funktion bei Fehler}); 

Wir sehen, dass jeder der von uns beschriebenen Abschnitte Parameter sind, die unsere Anfrage erhält und dass dies über die Methode erfolgt $ .ajax () die geliefert wird von jQuery direkt, und es ist eine Maske für den Code Javascript Ebene, die jeder Engine jedes unterstützten Browsers entspricht, die zu diesem Zeitpunkt fast alle die neuesten Werbespots sind, wie z Chrome, Firefox, Opera, Safari Internet Explorer, und diejenigen, die von den Motoren dieser erwähnten abgeleitet sind.
Wir werden nun das, was wir im vorherigen Abschnitt gesehen haben, in die Praxis umsetzen, wenn wir eine Anfrage stellen AJAX von einer Seite HTML die wir im folgenden Beispiel bauen werden. Wir müssen wissen, dass wir die aktuellste Version von . benötigen jQuery wir bekommen können, aber wir können die verwenden, die sie in ihrem speichern CDN, wir benötigen auch einen kleinen Webserver, um die Dateien, die wir asynchron beziehen werden, weiterleiten zu können, dafür können wir verwenden WAMP In Fenster, oder eine Installation LAMPE in Systemen Linux, bezüglich MAC-Plattformen, die wir verwenden können XAMP oder ähnliches.
In den folgenden Code werden wir zuerst einschließen jQuery, dann erstellen wir im Hauptteil ein Label mit einer eindeutigen ID, in das wir den Inhalt der Antwort auf unsere Anfrage einfügen, und am Ende des Dokuments erstellen wir ein Label Skript wo wir den Code generieren, um die Anfrage zu stellen, im Attribut des URL Wir werden die Anfrage an den Index des Ordners stellen, in dem sich unsere Dateien befinden. Wir tun dies, um die Funktionsweise unseres Codes zu zeigen. Dies können Sie jedoch tun, indem Sie eine andere Datei anfordern, die die von uns benötigte Antwort liefert siehe Code:

 Beispiel für eine AJAX-AnfrageAJAX verarbeiten 

Im folgenden Bild sehen wir, wie alles funktioniert hat, wo wir eine erfolgreiche Antwort von unserem Code sehen können.

Mal sehen, was passiert, wenn wir den Pfad der Anfrage für einen nicht vorhandenen ändern, um einen Fehler zu erzwingen, zu aktualisieren und die Schaltfläche zu drücken AJAX verarbeiten:

Wir können sehen, dass das, was wir im Fehlercode platziert haben, ausgelöst wird. Aber das Interessanteste ist, dass die Art des Fehlers von HTTP, in diesem Fall war es eine Ressource, die nicht gefunden wurde oder 404, mit ein wenig Geschick können wir es vielleicht erfassen und die Fehlerbehandlung verbessern, dies bleibt ein Forschungsthema für Interessierte.
Eines der Dinge, die jQuery möchte, dass wir keine Zeit und keinen Code damit verschwenden, Dinge lange zu erledigen, deshalb bietet es uns Abkürzungen für Anrufe AJAX gängigste Methoden wie z BEKOMMEN Ja POST, also sparen wir durch die Verwendung der Verknüpfung ein paar Codezeilen und können so das Gewicht unserer Anwendung reduzieren.
Dazu in der offiziellen Dokumentation von jQuery Wir haben alle vorhandenen Fälle, aber wir werden das vorherige Beispiel wiederholen, indem wir in diesem Fall die Verknüpfung verwenden, aber bevor wir den Funktionscode sehen, sehen wir uns das nicht-funktionale Beispiel an:

$ .get (Pfad, Daten, Erfolgsfunktion, Antworttyp);

Wie wir bemerkt haben, ist dieser Aufruf viel kleiner, was uns hilft, einen saubereren und leichteren Code zu haben. Wenn Sie dies jetzt auf unser vorheriges Beispiel anwenden, wäre es wie folgt:

 Beispiel für eine AJAX-AnfrageAJAX verarbeiten 

Wir sehen, dass die Anzahl der Zeilen und Zeichen deutlich reduziert wurde, was unsere Datenübertragung durch eine geringere Bandbreite verbessern würde. Wenn wir alles im Browser ausführen, erhalten wir die folgende Antwort:

Damit haben wir dieses Tutorial beendet, wir haben dann gesehen, wie wir auf einfache Weise erklärt haben, was es darstellt AJAX und seine grundlegendsten Anwendungen mit jQueryVon nun an bleibt es nur noch, diese Entwicklungstechnik immer dann weiter zu erforschen und zu versuchen, sie zu integrieren, wenn ihre Vorteile für unsere Anwendungen geeignet sind.