AJAX - Kleines "Ein mal Eins" für Trojaner

Bastian Sackermann

http://samisdat.org/ajax-barcamp-ruhr

About

Was kann man googlen:

• Blog: samisdat.org
• CMS: Textpattern
• Politik: SPD Jusos

Sonst noch was

• Amateur
• Autoditakt
• Living GPL: AS IS WITHOUT WARRANTY OF ANY KIND,
  EITHER EXPRESSED OR IMPLIED

AJAX - Was ist das eigentlich?

• AJAX ist eigentlich die Abkürzung für Asynchrones Javascript und XML.
• Das stimmt auch eigentlich, außer dass eigentlich kaum jemand XML benutzt.
• AJAX ist eigentlich nicht definiert.
• AJAX ist eigentlich nichts neues.
• AJAX ist eigentlich keine Technologie, sondern eine Kombination von unterschiedlichen bekannten Techniken.
• Jeder Buchstabe in AJAX ist eigentlich sinnfrei oder überflüssig.

AJAX - Was ist das eigentlich?

Definitionsversuch - Frei nach Jesse James Garrett auf adaptivepath.com

AJAX ist nichts neues, aber es bringt mehrere bekannte Techniken auf neue Art zusammen und dabei ist das Ganze (AJAX) mehr als die Summe seiner Teile.

• (X)HTML & CSS
• Document Object Model
• Datenaustausch und Verarbeitung (Formate: XML, JSON, SOAP)
• XMLHttpRequest für den asynchronen Austausch mit dem Server
• Javascript bringt das alles zusammen

Das J: Javascript

• Javascript war eine ganze Weile richtig out
• Das hatte Gründe:
  • Unterschiedlich schlechte Implementierung während der Browserkriege
  • Die größten Nervtöter waren in Javascript (PopUps, Newsticker, Blinktexte, Schneegestöber)
  • Generell schlechter Ruf als Programmiersprache
• Das hat sich geändert und Javascript ist richtig in:
  • Vor allem: Ein paar richtig gute und richtig große Beispiele für gelungenen Einsatz.
  • In neuen Browsern ist die Implementierung wesentlich besser
  • Gute, einsetzbare und erlernbare Javascript Bibliotheken mit guter Doku

Javascript - Kaltstart

• Firebug!!!
• Javascript Bibliotheken
  • Prototype [API]
  • jQuery [API]
  • Mootools [API]
• Eine Datei zum asynchronen Laden: simple.txt
• Dann kann es schon losgehen:
  • Beispiel mit Prototype
  • Beispiel mit jQuery
  • Beispiel mit Mootools
• Ein bisschen Wissen über Javascript schadet natürlich nicht ;)

Das X - XML X-Beliebige Dateien

Das Ganzen macht natürlich erst richtig Sinn, wenn man statt statische .txt-Dateien zu laden mit einem Server kommuniziert.

Verschiedene Formate

• XML (Extensible Markup Language) Beispiel mit Prototype
• SOAP (Simple Object Access Protocol) Externes Beispiel mit jQuery
• JSON (JavaScript Object Notation) Beispiel mit Prototype
• HTML (Hypertext Markup Language) bzw. Fragmente Beispiel mit Mootools

Das AJAX Format der Wahl: JSON

Wenn die Wahl besteht, dann JSON!

• Nicht von Json.orgverwirren lassen.
• JSON ist Javascript, XML nicht.
• JSON lässt sich serverseitig leicht erzeugen: In PHP json_encode($array)
• JSON lässt sich mit Javascript gut verarbeiten:
  • Einmal eval() über den Response Beispiel mit jQuery
  • Ein nicht vorhandenes Element eines Objectes ist immer undefined
  • Default Werte einfach belegen: Object.extend(Object.extend({},Default), response)
• JSON ist weit verbreitet: del.icio.us, Flickr, Google Calendar

Das A - Asynchron Aber wozu?

Asynchroner Request

Normaler HTTP vs. AJAX

Quelle: http://de.wikipedia.org/wiki/Ajax_(Programmierung)

Vor dem Einsatz von AJAX: Pro & Kontra

Pro

• Entwicklung macht Laune
• Mehrwert für User; vgl. Webmail vs gMail
• Dynamische und interaktive Seiten
• Eyecatcher
• Höhere Wiedererkennungswert der Seiten
• Kein Plugin

Vor dem Einsatz von AJAX: Pro & Kontra

Kontra

• Für sich genommen schwachsinnig: Man benutzt eine Menge Javascript, um Browsern was beizubringen, was sie schon können: Das Senden und Empfangen von Daten
• Komplexität von AJAX Seiten ist wesentlich höher
  • Laufzeit einer Webseite
  • Client- und Serverseitig müssen Schnittstellen bereitgestellt werden
  • Mehr Aufwand bei der Entwicklung
  • Mehr Aufwand beim Testen und mehr Bedarf von Tests
• Usability und Acessability Probleme
• Links bzw. Bookmarks
• Suchmaschinen

Basis & Methode

• Fundament von AJAX ist (X)HTML
• AJAX verhält sich zu DHTML wie standardkonformes Webdesign zu Tabellenlayout
• Alles was wir gelernt haben, seid wir uns von Tabellenlayouts und blind.gif verabschiedet haben, bleib gültig!
• Strikte Trennung von Inhalt, Aussehen und Script
• Javascript kommt im HTML möglichst nicht vor, außer im
  <script src=''/>
• Scripten über Klassen oder IDs
• Die Alternative: mixed.txt

Usability & Accessibility

AJAX ist Javascript; Javscript ist eine Instance eines Browsers; ein Browser ist ein Programm; Programme läuften mit einem Betriebssytem

Das bringt eine Menge Implikationen mit, wenn man sich Gedanken über Benutzbarkeit und Zugänglichkeit macht:

• Zerstöre nicht das Wissen der User
• Wenn es ein Browser Look & Feel gibt, dann arbeite nicht dagegen
• Wenn es (Programm) Metaphern gibt, dann arbeite nicht dagegen
• Wenn es Routinen gibt, dann nutze und verstärke sie

Look & Feel - Browser geben Feedback

Usability - Feedback

User sind von Browsern ein Look & Feel gewöhnt, dass anzeigt, wenn etwas passiert.
AJAX sollte also auch anzeigen, wenn etwas passiert.

• Aktivität mit dem Cursor anzeigen: Beispiel mit Mootools
• Aktivität durch Spinner: Beispiel mit Prototype
• Auch bei Formularen: Spinner und Textrückmeldung: Beispiel mit jQuery

Usability - Das Bookmark Problem

Wenn per AJAX Teile der Seite verändert werden, dann wird die geänderte Seite nicht in der Browserhistory abgelegt und die veränderte Seite ist nicht direkt verlinkbar.

Das führt zu verschiedenen Problemen:

• Die Vor und Zurück-Buttons funktionieren nicht.
• Die veränderte Seite ist nicht bookmarkbar
• Direkte Links funktionieren nicht
• Der per AJAX veränderte Inhalt ist für Suchmaschienen nicht vorhanden.

Der Bookmark Workaround - Server

Mit einem relativ einfachen Workaround, können AJAX-Seiten bookmarkbar und linkbar gemacht werden. Auch die Vor- und Zurück Knöpfe funktionieren! (Zumindest prinzipiell;)

Serverseitig

1. Zu jeder URL, die per AJAX aufgerufen werden soll, existiert auch ein vollständiges HTML-Dokument.
   Es gibt keine Sackgassen, in die der USer nur per AJAX kommen können.
2. Der Server erkennt an den Headern, dass der Request über XMLHttpRequest kam:
   In PHP
   $_SERVER["HTTP_X_REQUESTED_WITH"]
3. Anhand des Headers wird zwischen normalen Template und JSON geswitcht.

Der Bookmark Workaround - Client

1. Jeder AJAX-Link ist ein normaler Link auf die entsprechende HTML Seite und erhält die Klasse ajax
2. Nach dem Laden wird jeder a.ajax geändert: Von /irgendwohin zu #irgendwohin
3. Über eine Timerfunction wird jetzt regelmäßig die window.location.hash auf Änderungen geprüft.
4. Bei Änderungen wird ein AJAX.Request ausgelöst.

Step-By-Step-Beispiel mit Prototype

Eine ähnliche Technik wird in den IE 8 integriet werden: Video AJAX Navigation

Der Bookmark Workaround

Wenn man den Workaround schon bei der Planung und Entwicklung berücksichtigt, dann ist der Aufwand überschaubar.

Die Vorteile:

1. Die komplette Seite ist auch ohne Javascript zugänglich. Beispiel
2. AJAX Inhalte können von Suchmaschinen indiziert werden.
3. AJAX Inhalte können als Lesezeichen gespeichert werden. Beispiel
4. AJAX Inhalte können direkt verlinkt werden.
5. Vor- und Zurück Navigation für AJAX Inhalte. (Nicht Cross Browser!)

Danke

Jetzt gerne Feedback, Kritik und Rechtschreibfehler!