Ajax

Ajax heißt asnychronous JavaScript and XML. Damit kann man Internetanwendungen interaktiver, reaktionsschneller und einfacher erstellen.

Die alte Methode des Anfrage-Antwort-Modells war ziemlich langsam und hat so funktioniert:

Da das ziemlich nervig war, jedes Mal auf eine Antwort zu warten, hat Ajax einen ganz anderen Ansatz für die Web-Programmierung.

Um Verständnis hier eine Übersicht über dynamische Websiten:

Ajax kommuniziert asynchron mit dem Server, das bedeutet, dass JS eine Anfrage an den Server sendet, aber als Benutzer kann mann dennoch weiterhin Eingaben in Webformularen vornehmen und auch noch Buttons weiterhin anklicken. Währenddessen arbeitet der Webserver im Hintergrund. Wenn er fertig ist, kann der Code einfach den Teil der Seite aktualisieren, der wich geändert hat, aber man muss nicht mehr warten. Zusätzlich, muss man mit Ajax Seiten nicht neu zu laden, wenn man diese aktualisiert.

Noch einmal kurz Ajax im Überblick zusammengefasst:

• Client (Browser) sendet Anfrage an Server über JS
• Client muss nicht warten, bis die Antwort fertig ankommt
• weitere Nutzerinteraktionen sind möglich
• Der Server führt das Programm, bzw. das Skript aus
• Der Client-Browser empfängt Server-Daten und ruft Callback-Funktion (JS) auf

Nachdem wir die Basics über Ajax gelernt haben, gab es eine Story von einer Snowboard-Unternehmerin, die für ihre Website nun Ajax einbauen möchte, damit nicht immer der ganze Bildschirm neu geladen werden muss. Dies haben wir dann während der Stunde eingerichtet. Dafür haben wir folgendes gemacht:

1. Ein neues Objekt erstellt, das Anfragen an den Server sendet. Diese haben wir erzeugeAnfrage() genannt, welche ein neues Anfrage-Objekt erzeugt.
2. Danach haben wir eine JS-Funktion geschrieben, die die neuen Board-Verkaufszahlen anfordern. Diese haben wir getVerkaufteBoards() genannt, also eine get-Methode. Diese verwendet erzeugeAnfrage(), um ein neues Anfrage-Objekt zu erzeugen. Anschließend haben wir eine Variable eingerichtet, die auf die Ajax-Version eines PHP-Skripts auf Katjas Server verwies und die Verbindung initialisiert und die Anfrage an den Server gesendet. Wir haben eine Verbindung initialisiert, indem wir dem Anfrage-Objekt mitgeteilt haben, wie es die Server-Verbindung herstellen soll. Das haben wir mit anfrage.open(„GET“, url, true);. Die Methode open() initialisiert eine Verbindung, GET gibt an, wie Daten an den Server gesendet werden und true gibt an, dass die Anfrage asynchron sein soll
3. Anschließend haben wir einen Event-Handler hinzugefügt, denn jedes Mal, wenn Katja den den Button „Ich will Geld sehen“ anklickt, soll die Funktion getVerkaufteBoards() ausgeführt werden. Deshalb haben wir eine einen Event-Handler eingefügt, um den Button mit der Funktion getVerkaufteBoards() zu verbinden. Da es sich um einen Klick handelt, haben wir den onClick Handler benutzt (onClick=“getVerkaufteBoards();“)
4. Nächster Schtitt: die Funktion updateSeite()codieren. Das soll die Funktion tun können:

Der Browser speichert die Server-Antwort im Anfrage-Objekt und führt dann updateSeite()aus. Die aktualisierte Anzahl an verkauften Boards, haben wir so bekommen, indem wir var neueSumme = anfrage.responseText eingefügt haben. Anschließend, haben wir die zu aktualisierten HTML Elemente ermittelt, durch document.getElementById(„verkaufe-boards“) und document.getElementById(„gewinn“). Der nächste Schritt war es, eine Referenz auf die Text Utilities hinzuzufügen. Das macht man, wie bei allen externen Links.

6. Da wir die Daten brauchen, die der Server zurückgegeben hat, speichert der Browser diese Daten in einer anderen Eigenschaft des Anfrage-Objekts, der Eigenschaft: responseText

Der Bereitschaftsstatus

Dieser teilt dem Browser mit, in welchem Stadium sich eine Anfrage befindet. Die vier Schritte von Antwort und Frage sehen so aus:

Somit kann man feststellen, oder festlegen, was passieren soll, wenn die Antwort des Servers einsatzbereit ist. Zum Beispiel, kann man das gut in eine Schleife einbauen, wenn man immer wenn eine Antwort zum weiterverarbeiten bereit ist. Das würde man dann so aufbauen:

if (anfrage.readyState == 4) {//Hier kommt der Code hin, der ausgeführt werden soll, wenn die Antwort vom Server bereitgestellt wurde}

Der Browser weiß immer, in welchem Bereitschaftsstatus sich eine Anfrage befindet. Man kann den Browser dazu bringen, bei jedem Wechsel des Bereitschaftsstatus eine JS-Funktion auszuführen,, indem man die Eigenschaft onreadystatechange eines Anfrage-Objekts verwendet. Wenn der Bereitschaftsstatus einer Anfrage 4 ist, wurde die Anfrage bearbeitet und der Server besitzt eine fertige Antwort. Eine Callback-Funktion wird aufgerufen, wenn der Browser eine Antwort vom Server erhält.

Wichtig!!!

• Asynchrone Anwendungen führen Anfragen mit Hilfe eines JS-Objekts und nicht per Formularversand durch
• Anfragen und Antworten werden vom Webbrowser durchgeführt, nicht direkt von dem JS-Code
• Nachdem der Webbrowser eine Antwort auf die asynchrone Anfrage erhält, wird er eine Callback-Funktion ausführen

Um den Unterschied zu sehen, was wir Menschen (und um ehrlich zu sein etwas in Computer-Sachen fortgeschrittenere Menschen) denken, wie Webanwendungen funktionieren und wie das ganze wirklich aussieht, habe ich im Folgenden zwei Graphiken aufgeführt:

Was Menschen denken, was der Webbrowser macht:

Was macht der Browser wirklich?

Außer den ganzen offensichtlichen Aufgaben, speichert der Webbrowser auch die Werte der Variablen, erstellt neue Typen, oder verarbeitet Netzwerkanfragen. Jedoch stellt der Webbrowser nicht wirklich die Anfragen an den Server. Er stellt nur das Low-Level-Netzwerkdiesnte zur Verfügung, durch diesen ein Code wie dieser:

durchgeführt werden kann.

Allgemein: DOM funktioniert mit Ajax, aber ist kein Bestandteil davon.

XMLHTTPRequest

Dieses Anfrage-Objekt funktioniert in fast allen Browsern, außer dem Internet Explorer. Man erzeugt es wie folgt:

anfrage = new XMLHttpRequest();

Out of order:

Hier ein wenig außerhalb der Reihe, aber in dieser Vorlesung sind wir darauf eingegangen

<div>

Dieses ist ein Container-Element für zusammengehörige Elemente, welches einem ermöglicht, viele Elemente durch eine gemeinsame CSS-Regel zu formatieren. Häufig wird es verwendet, um Elemente mit ähnlichem Verwendungszweck zu gruppieren. Man kann sich in seinem CSS auf die ID eines <div> zu beziehen, um den gesamten Inhalt des <div> i einem Ruck zu formatieren.

<span>

Ermöglicht es einem, ein wenig Inline-Text von seiner Umgebung abzutrennen. Man kann <span>-Elemente mit Hilfe von CSS formatieren und Text somit leicht hervorheben. Sie beginnen aber keine neuen Absätze. So funktioniert es: