Wie man eine AJAX-Anfrage mit jQuery für HTML5 und CSS3 macht Programmierung - Dummies

Der primäre Zweck einer AJAX-Bibliothek wie jQuery ist die Vereinfachung von AJAX-Anforderungen für HTML5- und CSS3-Programmierer. Es ist schwer zu glauben, wie einfach das mit jQuery sein kann.

So fügen Sie eine Textdatei mit AJAX

hinzu Überprüfen Sie diesen sauberen Code:

ajax. html $ (Dokument). bereit (getAJAX); Funktion getAJAX () {$ ("# Ausgabe"). load ("hallo. txt");}

Das HTML ist sehr sauber. Es erstellt einfach ein leeres div namens output.

In diesem Beispiel wird AJAX verwendet. Wenn es nicht funktioniert, müssen Sie sich möglicherweise einige Details zur Funktionsweise von AJAX merken. Ein Programm, das AJAX verwendet, sollte über einen Webserver laufen, nicht nur von einer lokalen Datei aus. Außerdem sollte sich die gelesene Datei auf demselben Server wie das Programm befinden, das die AJAX-Anforderung ausführt.

Der hier beschriebene load () -Mechanismus eignet sich für eine grundlegende Situation, in der Sie ein Text- oder HTML-Code-Snippet in Ihre Seiten laden möchten.

Das CMS eines armen Mannes mit AJAX

erstellen AJAX und jQuery können eine sehr nützliche Methode sein, um effiziente Websites auch ohne serverseitige Programmierung zu erstellen. Häufig basiert eine Website auf einer Reihe kleinerer Elemente, die vertauscht und wiederverwendet werden können. Sie können AJAX verwenden, um ein Framework zu erstellen, das die einfache Wiederverwendung und Änderung von Webinhalten ermöglicht.

Obwohl die Seite aus Sicht des Benutzers nicht so schockierend ist, kann ein Blick auf den Code einige Überraschungen zeigen:

CMS AJAX verwenden $ (init); Funktion init () {$ ("# Überschrift"). Laden ("Kopf. html"); $ ("# menu"). Laden ("Menü. html"); $ ("# content1"). laden ("story1. html"); $ ("# content2"). laden ("story2. html"); $ ("# Fußzeile"). load ("Fußzeile. html");}; 
Schauen Sie sich den Code an, und Sie können diese interessanten Features sehen:


Die Seite hat keinen Inhalt! Alle Divs sind leer. Keiner der Texte, die im Screenshot gezeigt werden, ist in diesem Dokument vorhanden, aber alles wird dynamisch aus kleineren Dateien gezogen.


Die Seite besteht aus leeren benannten Divs. Anstelle eines bestimmten Inhalts besteht die Seite aus Platzhaltern mit IDs.


Es verwendet jQuery. Die jQuery-Bibliothek vereinfacht das Laden von Daten durch AJAX-Aufrufe erheblich.


Alle Inhalte befinden sich in separaten Dateien. Schauen Sie sich das Verzeichnis an und Sie können sehr einfache HTML-Dateien sehen, die kleine Teile der Seite enthalten. Zum Beispiel story1. html sieht so aus:
Buch I - Erstellen der HTML Foundation

Sound HTML-Grundlagen
Alles über Validierung
Auswählen Ihrer Tools
Verwalten von Informationen mit Listen und Tabellen
Herstellen von Verbindungen mit Links
Hinzufügen von Bildern
Erstellen von Formularen




Die Methode init () wird auf Dokumenten ausgeführt.bereit . Wenn das Dokument fertig ist, führt die Seite die init () - Methode aus.


Die Methode init () verwendet AJAX-Aufrufe zum dynamischen Laden von Inhalt. Es ist nichts weiter als eine Reihe von jQuery load () - Methoden.


Dieser Ansatz mag anstrengend wirken, hat aber einige sehr interessante Eigenschaften:


Wenn Sie eine große Website mit mehreren Seiten erstellen, möchten Sie in der Regel die visuelle Darstellung einmal gestalten und dieselben allgemeinen Vorlage wiederholt.


Außerdem haben Sie wahrscheinlich einige Elemente, die über mehrere Seiten konsistent sind. Sie können einfach ein Standarddokument erstellen und es für jede Seite kopieren und einfügen, aber dieser Ansatz wird unübersichtlich. Was passiert, wenn Sie 100 Seiten gemäß einer Vorlage erstellt haben und dann die Überschrift ändern müssen? Sie müssen die Änderung auf 100 verschiedenen Seiten vornehmen.


Der Vorteil des Template-Ansatzes ist die Wiederverwendung von Code. Genau wie die Verwendung eines externen Stils es Ihnen erlaubt, ein Stylesheet über Hunderte von Dokumenten zu vervielfältigen, können Sie beim Entwerfen einer Vorlage ohne Inhalt Code-Snippets in kleineren Dateien speichern und wiederverwenden. Alle 100 Seiten verweisen auf dieselbe Menü-Datei. Wenn Sie also das Menü ändern möchten, ändern Sie eine Datei und alles ändert sich damit.
So verwenden Sie diesen Ansatz:


Erstellen Sie eine einzelne Vorlage für Ihre gesamte Site.
Erstellen Sie einfaches HTML und CSS, um das gesamte Erscheinungsbild Ihrer gesamten Website zu verwalten. Mach dir keine Sorgen um Inhalte. Erstellen Sie einfach Platzhalter für alle Komponenten Ihrer Seite. Achten Sie darauf, jedem Element eine ID zuzuweisen und das CSS zu schreiben, um die gewünschten Positionen zu erhalten.


Fügen Sie jQuery-Unterstützung hinzu.
Erstellen Sie eine Verknüpfung zur jQuery-Bibliothek und nehmen Sie eine standardmäßige init () -Methode vor. Setzen Sie einen Code ein, um die Teile der Seite zu füllen, die immer konsistent sind.


Duplizieren Sie die Vorlage.
Nachdem Sie ein Gefühl dafür haben, wie die Vorlage funktioniert, erstellen Sie eine Kopie für jede Seite Ihrer Website.


Passen Sie jede Seite an, indem Sie die Funktion init () ändern.
Der einzige Teil der Vorlage, der sich ändert, ist die Funktion init (). Alle Ihre Seiten sind identisch, außer sie haben angepasste init () - Funktionen, die unterschiedliche Inhalte laden.


Lädt benutzerdefinierten Inhalt mit AJAX in die Divs.
Verwenden Sie die Funktion init (), um Inhalt in jedes div zu laden.


Dies ist eine großartige Möglichkeit, Inhalte zu verwalten, aber es ist kein vollständiges Content-Management-System. Sogar AJAX kann Ihnen nicht erlauben, Inhalte im Web zu speichern. Komplexere Content-Management-Systeme verwenden auch Datenbanken anstelle von Dateien zur Verarbeitung von Inhalten. Sie benötigen eine Art serverseitige Programmierung (wie PHP) und normalerweise eine Datenbank (wie mySQL), um diese Art von Arbeit zu erledigen.