Ajax-Schnittstelle für Partner-Websites
Webservice mit Ajax
Partner gewinnen
Ajax-Schnittstelle für Partner-Websites
Von Suchmaschinenoptimierung und teurer Werbung einmal abgesehen gibt es eine ganz einfache Methode, mehr Traffic auf die eigene Website zu lotsen: bekannt zu werden. Das mag zynisch klingen, aber ist ein Ansatz, den mittlerweile sehr viele Websites gehen. Sehr beliebt sind Affiliate-Programme: Kunden werden über Partner-Websites auf die eigene Website gelotst, um dort einzukaufen. Dabei profitieren mehrere: Die E-Commerce-Website selbst, denn diese verkauft ihre Waren. Aber auch die Partner-Sites werden – meist prozentual – am Umsatz beteiligt und können somit oftmals die Hosting-Kosten hereinholen oder sogar noch mehr.
Es gibt mehrere Möglichkeiten, das technisch zu realisieren. Häufig stehen für den Affiliate-Partner vorgefertigtes HTML-Markup und Grafiken zur Verfügung, doch das ist nicht immer ein gut gangbarer Weg. Die meisten Betreiber einer Website hätten gern die Kontrolle über das Layout, auch beim Affiliate-Programm. Gerade wenn die Informationen der E-Commerce-Site möglichst geschickt innerhalb der Site platziert werden sollen, ist ein vorgefertigtes Layout, das sich vom Aussehen der restlichen Site unterscheidet, oftmals fehl am Platz.
Eine nahe liegende Möglichkeit besteht in der Verwendung von Webservices. Doch hier gibt es einige kleinere Nachteile. Der Aufwand steigt unter Umständen an, und es ist immer eine serverseitige Technik notwendig. Im Zuge des aktuellen Ajax-Hypes wäre es doch schön, wenn die Daten von der E-Commerce-Website in einem Ajax-fähigen Format verfügbar gemacht würden. Zwar ist es technisch möglich, mit dem XMLHttpRequest-Objekt auch Webservice-Anfragen zu machen, doch das Sicherheitssystem des Browsers schiebt vielen Bemühungen einen technischen Riegel vor: XMLHttpRequest-Anfragen sind nur an dieselbe Domain erlaubt, von der die aktuelle Seite samt Javascript kommt. Umwege sind möglich, aber auch diese erfordern meist eine Servertechnik und erhöhen damit die Einstiegshürde. Jedes derartige Hindernis jedoch verringert die potenzielle Anzahl von Partner-Websites des Affiliate-Programms.
Aus diesem Grund sollte man sich nach Alternativen umsehen. Es gibt mehrere Ansätze, von denen die geeignetsten in diesem Workshop vorgestellt werden. Sie sind zwar auf das Beispiel des virtuellen Shops zugeschnitten, aber so modular aufgebaut, dass Sie den Code auch leicht auf Ihre Anforderungen anpassen können. Sie müssen nur wissen, wie Sie auf Ihrem Server Daten erzeugen, die dann der Client, der die Affiliate-Website besucht, per Javascript verarbeiten kann. Sprich, Sie generieren Daten für eine Ajax-Anwendung, und Sie erstellen nicht selbst eine Ajax-Applikation.
Vorbereitung
Ajax-Schnittstelle für Partner-Websites
Ausgangsbasis soll eine fiktive Produktdatenbank sein. Aus Gründen der Einfachheit kommt SQLite zum Einsatz. Serverseitige Technik der Wahl ist PHP. Die Beispiele finden Sie wie gewohnt auf der Heft-CD im Listings-Bereich.
Die Datenbankdatei produkte.db – aus Gründen der Einfachheit im selben Verzeichnis wie der restliche Code, was prinzipiell gefährlich ist – enthält eine Tabelle produkte mit den folgenden Feldern:
– id: Primärschlüssel
– name: Produktname
– beschreibung: etwas ausführlichere Produkt-Infos
– preis_in_cent: Produktpreis
Hier der dazugehörige SQL-Code zur Erstellung der Datenbank:
CREATE TABLE produkte (
id INTEGER PRIMARY KEY ,
name VARCHAR(100),
beschreibung VARCHAR(255),
preis_in_cent INTEGER
);
Die Datei db-erzeugen.php erledigt diesen Schritt auf Wunsch für Sie. Ansonsten finden Sie eine vorgefertigte Datenbankdatei ebenfalls auf der Heft-CD. Die Daten aus der Datenbank sollen nun Affiliate-Websites zur Verfügung stehen.
XML liefern
Ajax-Schnittstelle für Partner-Websites
Das X in Ajax steht nicht etwa für XMLHttpRequest, sondern für XML, auch wenn man es nicht immer einsetzt. Schuld daran sind die Browser-Hersteller, die die Javascript-Unterstützung von XML komplett unterschiedlich implementiert haben. Dennoch ist es möglich, Client-seitig mit Javascript XML-Daten zu parsen.
Zunächst zur Generierung des XML. Auf dem Server kommt dazu PHP 5.1 mit der XMLwriter-Erweiterung (ext/xmlwriter) zum Einsatz. Diese finden Sie in PECL unter pecl.php.net/package/xmlwriter oder auch in der PHP-Distribution. Sie müssen lediglich noch die Erweiterung in der php.ini laden, beispielsweise unter Windows wie folgt:
extension=php_xmlwriter.dll
Dann ist es möglich, per bequemer API extrem performant XML zu erzeugen. Zunächst öffnen Sie die Verbindung mit der Datenbank und lesen alle Daten ein:
$sql = 'SELECT * FROM produkte';
if ($db = sqlite_open('produkte.db')) {
$ergebnis = sqlite_query($db, $sql);
$zeilen = sqlite_fetch_all($ergebnis, SQLITE_ASSOC);
Die PHP-Funktion sqlite_fetch_all() liest dabei alle Daten auf einmal in den Speicher. Sollten Sie einmal eine umfangreiche Produktdatenbank haben, setzen Sie besser auf ein zeilenweises Auslesen.
XMLwriter im Einsatz
Ajax-Schnittstelle für Partner-Websites
Sind die Daten erst einmal im Speicher, geben Sie sie via XMLwriter im XML-Format aus:
$xml = xmlwriter_open_memory();
xmlwriter_start_document($xml);
xmlwriter_start_element($xml, 'produkte');
foreach ($zeilen as $zeile) {
xmlwriter_start_element($xml, 'produkt');
xmlwriter_start_element($xml, 'name');
xmlwriter_text($xml, $zeile['name']);
xmlwriter_end_element($xml);
xmlwriter_start_element($xml, 'beschreibung');
xmlwriter_text($xml, $zeile['beschreibung']);
xmlwriter_end_element($xml);
xmlwriter_start_element($xml, 'preis');
xmlwriter_text($xml, sprintf('%.2f', $zeile['preis_in_cent']/100));
xmlwriter_end_element($xml);
xmlwriter_end_element($xml);
}
xmlwriter_end_element($xml);
xmlwriter_end_document($xml);
Die Ausgabe sieht dann ungefähr wie folgt aus:
Doch damit allein ist noch nicht gedient, denn wie soll der Client an die Daten herankommen? Also muss das PHP-Skript Javascript-Code ausgeben, der dann wiederum im Client auf das XML-Objekt zugreifen kann:
Zunächst gilt es, das XML in einen String umzuwandeln, mit dem Javascript etwas anfangen kann:
$xml = str_replace("\n", '', addslashes(xmlwriter_output_memory($xml)));
PHP übernimmt
Ajax-Schnittstelle für Partner-Websites
Dann geben Sie – mit PHP, wohlgemerkt – den Javascript-Code aus, der ein Javascript-XML-Dokument erzeugt und das soeben erzeugte XML-Markup lädt. Je nach Browser läuft das ein wenig anders ab. Der folgende Code funktioniert sowohl mit Mozilla-Browsern und dem Internet Explorer als auch mit dem neuen Opera 9, der dieselbe XML-Schnittstelle wie Mozilla verwendet:
echo <<
if (window.ActiveXObject) {
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.loadXML(xmltext);
} else if (document.implementation) {
var xmldoc = document.implementation.createDocument("", "", null);
xmldoc = (new DOMParser()).parseFrom String(xmltext, "text/xml");
}
DatenVerarbeiten();
ENDE;
exit;
}
?>
Beachten Sie, dass am Ende eine Javascript-Funktion namens DatenVerarbeiten() aufgerufen wird. Das löst ein Timing-Problem, das die Anwendung sonst haben würde.
Der dynamisch erzeugte Javascript-Code wird per
So weit die Implementierung des E-Commerce-Shops. Die Aufgabe des Affiliate-Partners besteht nun darin, das XML-Dokument weiterzuverarbeiten, indem die Funktion DatenVerarbeiten() implementiert wird.
Auch diese Aufgabenstellung lässt sich mit etwas Aufwand lösen. Pro Produkt gibt es ein eigenes Element im XML-Dokument, produkt. Per DOM-Methode getElementsByTagName() erhalten Sie eine Liste aller Produkte, die Sie per Schleife durchschreiten:
Das war es auch schon: Der Aufwand war recht groß, aber dafür lässt sich XML auf dem Server sehr gut erzeugen, ganz gleich welche der modernen Servertechniken verwendet wird. Lediglich die Verwendung der Daten im Client ist etwas komplizierter und funktioniert beispielsweise im Safari-Browser so nicht. Dort müssten Sie das XML manuell parsen.
Json liefern
Ajax-Schnittstelle für Partner-Websites
Gerade wegen der mangelnden Browserkompatibilität setzen moderne Ajax-Anwendungen eher selten auf XML, sondern verwenden ein alternatives Serialisierungsformat: Json (json.org).
Sie stellen auf dem Server wie gehabt die Verbindung zur SQLite-Datenquelle her und laden alle hinterlegten Produkte. Diesmal geben Sie diese aber im Json-Format aus. Das kann dann wie folgt aussehen:
$sql = 'SELECT * FROM produkte';
if ($db = sqlite_open('produkte.db')) {
$ergebnis = sqlite_query($db, $sql);
$zeilen = sqlite_fetch_all ($ergebnis, SQLITE_ASSOC);
$json = '';
foreach ($zeilen as $zeile) {
$name = addslashes($zeile['name']);
$beschreibung = addslashes($zeile['beschreibung']);
$preis = sprintf('%.2f', $zeile['preis_in_cent']/100);
$json .= ",{'name':'$name','beschreibung': '$beschreibung','preis':'$preis'}";
}
$json .= ']';
$json = '[' . substr($json, 1);
$json = str_replace("\n", '', $json);
echo "var json = \"$json\";
DatenVerarbeiten();";
exit;
}
?>
Das Ergebnis dieses PHP-Codes ist der folgende, dynamisch generierte Javascript-Code (etwas gekürzt):
var json = "[{'name':'IPro aktuell', 'beschreibung':'Die aktuelle Ausgabe der Internet Professionell','preis': '4.50'},..."; DatenVerarbeiten();
Javascript-Objekte
Ajax-Schnittstelle für Partner-Websites
So weit die Serverseite. Ein Großteil der Arbeit wird erneut auf den Client ausgelagert, denn der Affiliate-Partner will ja das Design der Produktinformationen selbst bestimmen.
Die Javascript-Funktion eval() kann den Json-Text vom Server in ein Javascript-Objekt umwandeln, was die Weiterverarbeitung vereinfacht. Dieses Objekt ist ein Array (wegen der eckigen Klammern).
Jedes Array-Element besitzt die Eigenschaften name, beschreibung und preis. Damit gestaltet sich die Datenverarbeitung in der Funktion DatenVerarbeiten() als sehr einfach:
var DatenVerarbeiten = function() {
var produkte = eval("(" + json + ")");
var liste = document.getElementById("Produkte");
for (var i = 0; i < produkte.length; i++) {
var name = produkte[i].name;
var beschreibung = produkte[i].beschreibung;
var preis = produkte[i].preis;
var li = document.createElement("li");
var text = document.createTextNode(name + ": " + beschreibung + " (" + preis + " ?)");
li.appendChild(text);
liste.appendChild(li);
}
};
Der Code reduziert sich damit erheblich, und auch andere Ajax-fähige Browser haben keine Probleme damit.
Fazit
Ajax-Schnittstelle für Partner-Websites
Der Schwerpunkt des Workshops liegt darauf, diese Informationen in verschiedenen Formaten anzugeben, nicht jedoch auf dem restlichen Rahmenwerk, etwa einer Verwaltung der Affiliates. Einige zusätzliche Features wären natürlich wünschenswert:
- Generierung von speziellen Affiliate-Links auf dem Server (die dann mit ausgegeben werden)
- Verwaltung der Affiliates
- personalisiertes Javascript für jeden Affiliate
- mehr Flexibilität beim Aufruf des Client-seitigen Javascript-Codes - beispielsweise sollte es möglich sein, den Namen der aufzurufenden Javascript-Funktion selbst anzugeben
Es ist also insgesamt eine ganze Menge zu tun, aber die ersten Schritte sind hiermit bereits erledigt: Die Daten sind so aufbereitet, dass Ajax-Anwendungen damit umgehen können. Und wenn das Affiliate-Programm Erfolg hat, geht es auch dem Shop gut - ganz ohne Suchmaschinenoptimierung.
Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter