Button-Menü

Ajax-Beispiel: E-Mail-Adressen schützen

XHTML-fähig durch Nutzung des DOM

Grundsätzliches zu Ajax finden Sie in der Rubrik "WebWissen" unter Ajax. Weitere Artikel zu Ajax – mitunter auch als einer der Eckpfeiler des "Web 2.0" bezeichnet – finden Sie im Internet wie Sand am Meer, weswegen ich hier nicht weiter darauf eingehen will. Sinn des Gratis-Archivs ist (a) den Kern von Ajax zu demonstrieren ohne Floskel, aber in der Praxis einsetzbar, d.h. die Lösung funktioniert in allen wichtigen modernen Browsern; und (b) die nützliche Anwendung zu verteilen, E-Mail Adressen vor Spambots auf eleganter Weise zu verstecken (English: Email-Cloaking). Die Antwort vom Server wird im XML-Format übertragen - das JSON-Format wäre einfacher für diesen Fall alleine, doch XML lässt sich eleganter mit verschiedenen anderen Daten ausbauen.

Verfahren

Ursprunglich enthält die Seite für jede E-Mail-Adresse einen <img>-Tag, der eine Grafik mit der jeweiligen E-Mail-Adresse referenziert. Der <img>-Tag befindet sich innerhalb eines <span>-Tags mit einem id nach dem Schema "email<n>", wobei (auf die jeweilige Webseite bezogen) <n> bei 1 beginnt und lückenlos durchnummeriert werden muss. Der <img>-Tag wiederum erhält als id einen eindeutigen String, der die gewünschte E-Mail-Adresse identifiziert.

Ist JavaScript oder Ajax im Browser nicht verfügbar, so bleibt die Grafik stehen – zwar ohne "mailto:" Link, aber immerhin für den Menschen lesbar. Funktioniert Ajax, wird das Dokument beim "onload" Event nach Elementen mit id's nach dem Schema "email<n>" durchsucht, und für jedes gefundene id wird einen Get-Parameter "email<n>=<id>" dem Ajax-Aufruf hinzugefügt. Der so aufgerufene PHP-Script liefert per XML für jede gewünschte E-Mail-Nr. den Link-Text und den Alt-Text an den Browser zurück.

Dann geht es im DOM-Modell für jede E-Mail Adresse wie folgt weiter: Es wird ein neues Anchor-Element erzeugt, mit den entsprechenden Daten aus der XML-Liste vom Server. Dann wird das jeweilige <img>-Element aus dem DOM-Baum entfernt und durch das neue Anchor-Element ersetzt.

Vorteile
  • Robust: Grafik enthält Adresse wenn kein JavaScript / Ajax
  • In der Regel erhält der Benutzer einen echten Link
  • Echt XHTML-fähig:
    Da nur im DOM-Modell, ohne "document.write()"
  • Gratis dazu: Per Ajax am Server merken, ob Ajax verfügbar
Das Archiv

Hier können Sie die entsprechenden Dateien (ISO und UTF-8) downloaden, ähnlich wie sie auf dieser Website zum Einsatz kommen und die hier erwähnten Techniken umsetzen:

Zum Herunterladen bitte einloggen.

  
IE6 und UTF-8

Es gibt eine leidige Schwäche in IE6 wie folgt: Wenn eine HTML-Datei als UTF-8 serviert wird, dann liest IE6 eine includierte JavaScript-Datei auch als UTF-8, auch wenn sie per HTTP-Header eindeutig als in ISO-8859-1 angegeben wird. Enthält die ISO-Datei dann auch deutsche Umlaut-Zeichen in einer String-Konstante stolpert IE6 und meint dass die Konstante nicht abgeschlossen sei. Abhilfe:

  1. Keine Umlautzeichen in der JavaScript-Datei
    (inelegant aber klappt)
  2. Die JavaScript-Datei auch – tatsächlich – in UTF-8 servieren.

Das Archiv enthält eine Variante "ajaxutf8". Sie unterscheidet sich von der ISO-Fassung wie folgt:

  • Eine "index.html" ist dabei im Zeichensatz UTF-8 und aufrufbar.
  • Die Datei 'ajax/ajax.js' ist ebenfalls im Zeichensatz UTF-8.
  • Für Apache liegt eine .htaccess dabei.

Man kann Apache anweisen, Dateien mit bestimmten Endungen mit Charset-Headers zu versehen (z.B. "AddCharset UTF-8 .html" und "AddCharset UTF-8 .js"), oder gleich alles über einen Kamm scheren: "AddDefaultCharset UTF-8".

Zu sehen unter: www.timreeves.de/ajaxutf8

<title>Ajax-Code zum Schutz von E-Mail-Adressen - Tim Reeves Internet-Programmierung</title> <meta name= "description" content= "Tim Reeves Internet-Programmierung - Ajax-Code zum Schutz von E-Mail-Adressen" /> <meta name= "keywords" content= "Ajax, E-Mail-Adressen, Email-Cloaking" /> <meta name= "date" content= "2010-03-28" /> <?php include("../head.inc.php"); include("../navi.inc.php"); include("../cntdown.inc.php"); ?> <div class= "content"> <h1>Ajax-Beispiel: E-Mail-Adressen schützen</h1> <table cellpadding= "0" cellspacing= "0" class= "spalten"> <tr> <td class= "sp3"> <h4 class= "spaltenkopf">XHTML-fähig durch Nutzung des DOM</h4> <p class= "mehrluft">Grundsätzliches zu Ajax finden Sie in der Rubrik "WebWissen" unter <a href= "../wissen/ajax.php" title= "Webseiten mit Webserver-Daten dynamisch anreichern">Ajax</a>. Weitere Artikel zu Ajax &ndash; mitunter auch als einer der Eckpfeiler des "Web 2.0" bezeichnet &ndash; finden Sie im Internet wie Sand am Meer, weswegen ich hier nicht weiter darauf eingehen will. Sinn des Gratis-Archivs ist (a) den Kern von Ajax zu demonstrieren ohne Floskel, aber in der Praxis einsetzbar, d.h. die Lösung funktioniert in allen wichtigen modernen Browsern; und (b) die nützliche Anwendung zu verteilen, E-Mail Adressen vor Spambots auf eleganter Weise zu verstecken (English: Email-Cloaking). Die Antwort vom Server wird im <a href= "../wissen/internet-abkuerzungen.php#X" title= "Zur Kurzerklärung von XML">XML</a>-Format übertragen - das <a href= "../wissen/internet-abkuerzungen.php#J" title= "Zur Kurzerklärung von JSON">JSON</a>-Format wäre einfacher für diesen Fall alleine, doch XML lässt sich eleganter mit verschiedenen anderen Daten ausbauen.</p> <h5>Verfahren</h5> <p>Ursprunglich enthält die Seite für jede E-Mail-Adresse einen &lt;img&gt;-Tag, der eine Grafik mit der jeweiligen E-Mail-Adresse referenziert. Der &lt;img&gt;-Tag befindet sich innerhalb eines &lt;span&gt;-Tags mit einem id nach dem Schema "email&lt;n&gt;", wobei (auf die jeweilige Webseite bezogen)