Wie man einen AJAX-Request mit jQuery für HTML5 und CSS3 Programmierung

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

Wie eine Textdatei mit AJAX zu schließen

Prüfen Sie diesen sauberen Code aus:

Der HTML ist sehr sauber. Es schafft einfach ein leeres div genannt Ausgabe.

In diesem Beispiel nicht verwendet AJAX, so dass, wenn es nicht funktioniert, könnte man einige Details darüber, wie AJAX arbeitet sich merken müssen. Ein Programm mit AJAX sollte über einen Web-Server ausgeführt werden, nicht nur aus einer lokalen Datei. Auch sollte die Datei eingelesen werden auf dem gleichen Server wie das Programm, so dass die AJAX-Request.

Das Belastung() beschriebenen Mechanismus hier ist für eine grundlegende Situation geeignet, in dem Sie eine Nur-Text oder HTML-Code-Schnipsel in Ihre Seiten laden möchten.

Der Aufbau eines armen Mannes CMS mit AJAX

AJAX und jQuery kann eine sehr nützliche Art und Weise effizient Websites zu erstellen, auch ohne serverseitige Programmierung. Häufig wird eine Website auf einer Reihe von kleineren Elementen basieren, die ausgetauscht und wieder verwendet werden kann. Sie können AJAX verwenden, um einen Rahmen zu bauen, die eine einfache Wiederverwendung und Änderung von Web-Inhalten ermöglicht.

Obwohl nichts, dass alles über die Seite aus der Sicht des Benutzers schockierend ist, kann ein Blick auf den Code einige Überraschungen zeigen:

 
 
Ton HTML Foundations
Es ist ganz über Validation
Wählen Sie Ihre Werkzeuge
Verwalten von Informationen mit Listen und Tabellen
Anschließen von Geräten in Verbindung mit Links
Hinzufügen von Bildern
Erstellen von Formularen
Das drin() Verfahren läuft auf document.ready. Wenn das Dokument fertig ist, läuft die Seite der drin()Verfahren.
 
Das drin() Methode verwendet AJAX-Aufrufe Inhalte dynamisch zu laden. Es ist nichts anderes als eine Reihe von jQuery Belastung() Methoden.
Dieser Ansatz kann wie eine Menge Arbeit erscheinen, aber es hat einige sehr interessante Eigenschaften:
Wenn Sie eine große Website mit mehreren Seiten erstellen, möchten Sie in der Regel einmal das visuelle Erscheinungsbild zu gestalten und die gleiche allgemeine Vorlage wiederholt wiederverwenden.
Außerdem werden Sie wahrscheinlich einige Elemente haben, die konsistent über mehrere Seiten sein wird. Sie könnten einfach ein Standarddokument erstellen und kopieren und fügen Sie für jede Seite, aber dieser Ansatz wird chaotisch. Was passiert, wenn Sie 100 Seiten erstellt haben, nach einer Vorlage und dann die Kopfzeile ändern müssen? Sie müssen die Änderung auf 100 verschiedenen Seiten zu machen.
Der Vorteil der Template-Stil Ansatz ist die Wiederverwendung von Code. Genau wie die Verwendung eines externen Stil ermöglicht es Ihnen, ein Stylesheet über Hunderte von Dokumenten zu multiplizieren, eine Vorlage ohne Inhalt der Gestaltung ermöglicht es Ihnen, Code-Schnipsel in kleinere Dateien zu speichern und wiederverwenden. Alle 100 Seiten verweisen auf die gleiche Menü Datei, so dass, wenn Sie das Menü ändern möchten, ändern Sie eine Datei und alles ändert sich mit ihm.
Hier ist, wie Sie diese Art von Ansatz verwenden:
Erstellen Sie eine einzelne Vorlage für Ihre gesamte Website.
Erstellen Sie grundlegende HTML und CSS das allgemeine Aussehen zu verwalten und für Ihre gesamte Website zu fühlen. Sie noch nicht über den Inhalt kümmern. bauen nur Platzhalter für alle Komponenten Ihrer Seite. Seien Sie sicher, dass jedes Element eine ID und schreiben Sie die CSS zu geben, Dinge zu bekommen positioniert, wie Sie wollen.
In jQuery Unterstützung.
Machen Sie einen Link auf die jQuery-Bibliothek, und stellen Sie eine Standard drin()Verfahren. Setzen Sie in Code zu handhaben, die Teile der Seite bevölkern, die immer konsistent sein wird.
Duplizieren Sie die Vorlage.
Nachdem Sie ein Gefühl dafür, wie die Vorlage arbeiten müssen, für jede Seite Ihrer Website eine Kopie.
Passen Sie jede Seite durch die sich ändernde drin() Funktion.
Der einzige Teil der Vorlage, die sich ändert, ist die drin()Funktion. Alle Ihre Seiten sind identisch, außer dass sie angepasst haben drin()Funktionen, die unterschiedliche Inhalte zu laden.
Legen Sie benutzerdefinierte Inhalte in die divs mit AJAX.
Verwenden Sie die drin()Funktion zu laden Inhalt in jedem div.
Dies ist eine gute Möglichkeit, Inhalte zu verwalten, aber es ist nicht ganz ausgewachsene Content-Management-System. Auch AJAX kann nicht ganz können Sie Geschäft Inhalte im Web. Komplexere Content-Management-Systeme verwenden auch Datenbanken, anstatt Dateien Inhalt zu behandeln. Sie werden irgendeine Art von serverseitige Programmierung benötigen (wie PHP) und in der Regel eine Datenbank (zB mySQL), um diese Art von Arbeit zu bewältigen.