AJAX als Anfänger-Webentwickler verstehen

Was ist AJAX?

AJAX steht für Asynchrones JavaScript und XML. XML ist selten relevant, aber bei der Entwicklung von Webanwendungen verwenden wir dafür AJ asynchron Dinge wie das Aktualisieren einer Seite, das Ausführen von Aktionen usw.

Kurz gesagt, bei AJAX geht es darum, Teile einer Webseite zu aktualisieren, ohne das Ganze neu laden zu müssen. Das ist ziemlich nützlich, wenn Ihre Website groß und umfangreich ist und Sie nicht möchten, dass Ihre Benutzer dieselben Informationen mehrmals laden müssen.

Was dieses Tutorial bezweckt

Tatsächlich ist die Implementierung von AJAX nicht schwer, aber es ist seltsam. Es basiert auf dem Zusammenspiel einiger verschiedener Technologien und erfordert ein wenig Wissen über jede. Das Ziel dieses Tutorials ist nicht, Sie an den Punkt zu bringen, an dem Sie brillante AJAX-Doohickies schreiben können; sondern um Sie an einen Punkt zu bringen, an dem Sie AJAX so gut verstehen, dass Sie darüber kommunizieren können, sehen, wo es verwendet werden kann, und eine solide Grundlage haben, auf der Sie die technischen Fähigkeiten aufbauen können, die Sie für die tatsächliche Implementierung benötigen AJAX.

Ein kurzer Hintergrund

AJAX stützt sich auf eine Reihe von Technologien. Sie müssen kein Experte in allen sein, aber ein wenig Hintergrundwissen ist hilfreich. Wenn Sie wissen, wie man XML und JSON verwendet, und wissen, was ein HTTP-Post ist, können Sie diesen Abschnitt gerne überspringen. Beachten Sie, dass dies eine sehr vereinfachte Erklärung ist, es gibt viel mehr zum Zusammenspiel der unten erwähnten Technologien und viele Technologien, die ich einfach nicht erwähnen werde. Dies sollte Ihnen gerade genug Hintergrundwissen geben, um sich mit AJAX vertraut zu machen.

Hyper Text Markup Language (HTML)

Die Kurzversion davon ist, dass HTML ein Bild beschreibt, das von Browsern gezeichnet werden soll. Im Allgemeinen wird es mit einer Reihe anderer Technologien kombiniert, um etwas Hübsches zu produzieren, aber das würde den Rahmen dieses Tutorials sprengen. Was Sie wissen müssen, ist, dass es die Positionierung von Text, Links, Formularelementen und Bildern innerhalb einer Seite beschreibt. Es beschreibt statisch (unveränderlicher) Inhalt.

Ausführen von Code in einem Browser mit JavaScript

Aber die coolsten Websites haben bewegliche Teile – sie reagieren auf die Aktionen des Benutzers und andere Ereignisse. Ihr Inhalt ist nicht statisch. Das übersteigt die Möglichkeiten von HTML. Hier kommt JavaScript ins Spiel. Es ist eine vollwertige Programmiersprache, die vom Browser ausgeführt wird. Es kann den Browser dazu bringen, Dinge zu tun.

HTTP-Grundlagen

Dies ist ein Protokoll. Es ist nur eine Reihe vereinbarter Kommunikationsregeln. Dieses Protokoll ist ziemlich grundlegend für das Funktionieren des Internets, da es zum Abrufen von Webseiten und vielen anderen Ressourcen verwendet wird. Wenn Sie eine Nachricht über HTTP senden, wird dies als Anforderung bezeichnet. Wenn Sie eine Anfrage senden, sollten Sie eine Antwort erwarten. Browser erhalten den HTML-Code von Webseiten, indem sie Anforderungen an bestimmte Stellen im Internet senden und die erhaltenen Antworten rendern. Browser können wirklich alle möglichen Dinge anfordern, nicht nur HTML-Seiten, aber dazu kommen wir später.

Jeder Anfrage ist eine URL zugeordnet. Wenn eine HTTP-Anfrage ein Brief wäre, wäre die URL die Adresse, die außen auf dem Umschlag steht. Ein Beispiel für eine URL ist: An Anfragen können auch Daten in Form von Parameterwerten angehängt sein, diese Werte können auf verschiedene Arten zugeordnet werden. Die Take-Home-Message lautet hier: Eine HTTP-Anforderung hat immer eine URL und manchmal sind ihr auch Daten angehängt.

Einige häufig verwendete Datenformate: JSON und XML

Über HTTP können alle Arten von Daten übertragen werden, beispielsweise HTML, JavaScript und Bilder. Manchmal ist es sinnvoll, auch Formate wie XML und JSON zu verwenden. HTML ist eigentlich eine Form von XML. Und JSON besetzt eine ähnliche Nische wie XML, ist aber etwas weniger ausführlich und etwas flexibler und wird daher im Allgemeinen bevorzugt, wenn es um AJAX geht. Sie müssen diese Technologien nicht kennen, um zu verstehen, wie AJAX funktioniert. Der Grund, warum sie hier erwähnt werden, ist, dass Sie wahrscheinlich auf diese Begriffe stoßen werden, wenn Sie irgendetwas Wichtiges mit AJAX tun möchten.

Der Lebenszyklus einer statischen, zustandslosen Webseite

Hier machen wir tatsächlich eine kleine Webseite. Seien Sie nicht zu aufgeregt/ängstlich, es wird sehr einfach und sehr nutzlos sein. Befolgen Sie daher die unten aufgeführten Schritte. Bereit?

SCHRITT 1 Öffnen Sie Ihren bevorzugten Texteditor (Notepad funktioniert, wenn Sie Windows verwenden)

SCHRITT 2 Kopieren Sie den folgenden Code und fügen Sie ihn in ein neues Dokument ein

 <!DOCTYPE html>
<html>
<head>
  <title>Completely useless web page</title>
</head>
<body>
Code Mentor is delicious!
</body>
</html> 

SCHRITT 3 speichern als hi_world.html

SCHRITT 4 Öffnen Sie es im Browser Ihrer Wahl

Habe ich dir nicht gesagt, dass das einfach wird? Also, was ist gerade passiert? Oder besser gesagt, was hat der Browser gerade getan?

Als Sie Ihre Webseite mit Ihrem Browser geöffnet haben, öffnete sich der Browser und verwendete den Pfad zu hi_world.html als URL. Anschließend wurde diese URL verwendet, um den Inhalt von abzurufen hi_world.html. Es hat dann den Inhalt gerendert. Und das ist. Eine statische Webseite. Es tut nichts, sobald es angezeigt wird.

JavaScript kann auch Anfragen stellen!

Der Browser kann also Anfragen stellen. Und JavaScript kann den Browser dazu bringen, Dinge zu tun. Daraus folgt, dass JavaScript den Browser veranlassen kann, Anfragen zu stellen. Das ist der grundlegende Mechanismus von AJAX! Ein gängiger Anwendungsfall davon heißt Paging.

Nehmen wir zum Beispiel an, wir haben eine Webseite mit einer Tabelle darauf. Diese Tabelle enthält eine Liste von … ähm … Kühen. Da es sich bei den Kühen also um die Kühe eines sehr erfolgreichen und fürsorglichen Milchbauern handelt, gibt es einige Tausend von ihnen, und jede hat einen Namen. Aber wir wollen nicht alle Kuhnamen auf einmal laden, weil das sehr viele Daten sind und wir vielleicht nur daran interessiert sind, die ersten 50 Kühe zu sehen. Eintreten Paging. Paging ist jede Technik, die geladen wird Seiten von Daten, wie sie benötigt werden.

Und hier ist, wie wir dies zum Laufen bringen würden.

  1. Erstellen Sie eine statische Seite, die eine Tabelle der Anfangsseite der Kühe zusammen mit a zeichnet next Taste. Bisher ist das alles nur HTML
  2. Verwenden Sie JavaScript, um sicherzustellen, dass wann immer die nächste Schaltfläche angeklickt wird, dann fordern wir den nächsten Haufen Kühe von irgendeiner URL an. Diese Daten können als JSON oder XML übermittelt werden
  3. Wenn eine Antwort eintrifft, füllen Sie die Cows-Tabelle mit den neuen Informationen

Nächste Schritte

Ok, jetzt wollen Sie AJAX tatsächlich verwirklichen. Nun, wenn Sie es geschafft haben, alles bis hierher zu verstehen, sind Sie an einem ziemlich guten Ort. Aber es fehlen noch ein paar Puzzleteile. Erstens, wie stellt man eigentlich AJAX-Anfragen?

Heutzutage ist es üblich, eine JavaScript-Bibliothek namens JQuery zu verwenden. AJAX ist eine knifflige Sache, weil verschiedene Browser unterschiedlich funktionieren, sodass manchmal Code, der auf einem funktioniert, auf einem anderen nicht funktioniert. JQuery bietet AJAX-Funktionalität, die robust genug ist, um auf allen modernen Browsern zu funktionieren. Hier ist ein kleiner Beispielcode, um Ihre Säfte zum Laufen zu bringen:

$.ajax({
    url : 'whatever/fetch_cows_page/',
    success : function(response_data){
        
        populate_cows_table(response_data);
    }
});

Damit ist der clientseitige Code fertig. Die Anfrage muss tatsächlich irgendwohin gehen, also muss die URL auf etwas Nützliches verweisen. Dies wird eine Art Webanwendung sein. Das eigentliche Erstellen einer Web-App liegt weit außerhalb des Rahmens dieses Tutorials. Die Lektion hier ist, dass Sie, wenn Sie die Web-App schreiben, sie so reagieren lassen können, wie Sie möchten (innerhalb des angemessenen Rahmens).

Fazit

Jetzt sollten Sie eine ziemlich gute Vorstellung davon haben, wie AJAX funktioniert. Ich möchte noch einmal betonen, dass dieses Tutorial nur eine Einführung war. Um in einer Position zu sein, in der Sie es tatsächlich implementieren können, würde ich vorschlagen, sich die JQuery AJAX-Dokumentation anzusehen. Wenn du das in den Kopf bekommst, dann bist du bereit zu rocken. Wenn Ihnen das zu viel ist, dann wäre ein einführendes JavaScript-Tutorial der nächste Schritt.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *