html tutorial - Ajax - html5 tutorial

AJAX - Anwendungen mit Desktopstil – AJAX

• Ermöglicht die Aktualisierung von Seitenteilen
• Somit muss nicht immer die ganze Seite neu geladen werden und die Anwendung bekommt desktop-feeling
• Bestandteile:
• Über JavaScript wird ein „XMLHttpRequest“ an Server geschickt
• Server verarbeitet Request und gibt XML oder HTML zurück
• JavaScript nimmt Request entgegen und verarbeitet diesen, meist durch Aktualisierung eines Seitenbereichs (z.B. Layers)
• Keine wirklich neue Technologie, sondern eine Kombination von bestehenden Techniken

AJAX in der Praxis

• Auto-Complete für Suchanfragen
• Pop-Up Fenster (in Seite integriert)
• Drag & Drop
• Direkte Fehlermeldungen auf Falscheingaben in Formularen

• AJAX-Funktionen manuell zu erstellen ist zeitaufwendig und fehleranfällig (Nur für JavaScript Experten). Verwendung eines geeigneten Rahmenwerks
• Bei Aktualisierung von Seitenteilen: Aktion dem Benutzer anzeigen (z.B. durch Ladebalken)
• AJAX nicht wahllos einsetzen!

AJAX integriert in Web-Frameworks

• Komplexität der JavaScript Aufrufe verbergen
• Methoden für AJAX-Calls anbieten
• Aktualisierung von Seitenteilen / Komponenten ermöglichen

Auswahl des geeigneten Rahmenwerks

• AJAX-Support
• Erweiterbarkeit
• Trennung von Anwendung und Darstellung

Eine Ajax-Anwendung basiert auf folgenden Web-Techniken:

• HTML (oder XHTML)
• Document Object Model (DOM) zur Repräsentation der Daten oder Inhalte
• JavaScript zur Manipulation des Document Object Models und zur dynamischen Darstellung der Inhalte. JavaScript dient auch als Schnittstelle zwischen einzelnen Komponenten.

• Das XMLHttpRequest-Objekt, Bestandteil vieler Browser, um Daten auf asynchroner Basis mit dem Webserver austauschen zu können
• Eine andere Transportmethode ist On-Demand JavaScript, bei der eine JavaScript-Datei per DOM-Manipulation angefordert wird.

• REST – Aufruf mittels klassischer HTTP-Techniken, z. B. GET http://localhost/person/4
• SOAP – Übertragung von Methodenname und Parametern als XML-Dokument

• REST-ähnliche Verfahren, um Nutzdaten in Textform zu übertragen
• JSON, ein auf JavaScript zugeschnittenes, textbasiertes Format für Daten und Objekte
• Diverse proprietäre XML-Formate
• SOAP, ein Protokoll für Webservices, das meist XML als Austauschformat verwendet

• CSS zur Formatierung einer Webseite
• XSLT zur Datentransformation

Weil der Webserver bei jeder Anfrage seitens des Nutzers eine neue Webseite erzeugen und übermitteln muss, erscheint die Anwendung dem Benutzer insgesamt als träge und wenig intuitiv, vergleicht man diese mit einer gewöhnlichen Desktop-Anwendung.

Sind die Daten fertig geladen, dann wird eine zuvor benannte JavaScript-Funktion aufgerufen, die die Daten in die Webseite einbinden kann.

Ajax Beispiel

var myAjax = new Ajax.Request(
  "datum.php",
  { method: 'get', onComplete: zeige_datum }
);

<?php
  echo "Jetzt ist es " . date("r");
?>

 function zeige_datum( originalRequest ) {
  document.getElementById('output').innerHTML = originalRequest.responseText;
}