joerghuelsermann.de Ajax Experiment

Ajax Experiment

Hat die Angabe einer URL in einem Link auch eine Wirkung wenn sie durch eine Javascript Anweisung im Grunde blockiert wird. Statt dem Link zu folgen wird eine Dataurl der SVG stattdessen in einem per Javascript definierten object eingebunden. Dabei werden die entsprechenden Daten per Ajax empfangen wobei im Hintergrund eine Abfrage der Graphik mit der PHP Funktion Curl erfolgt.

Diese Vorgehensweise trifft nur solange zu solange der Benutzer Javascript aktiviert hat. Bewusst habe ich deshalb aber auch um eine barrierefreie Alternative zu schaffen, diese Struktur gewählt denn somit wird bei nicht aktiviertem Javascript oder ungeeigneten Browsern dem Link gefolgt. Also ist eine Funktionalität der Seite bei beiden Alternativen gegeben.

Auch wurde eine SVG für die Anzeige eines Ajax Übertragung gewählt auch wieder der Benutzerfreundlichkeit geschuldet da eine solche Übertragung auch weniger Zeit in Anspruch nehmen kann wie die Datenübertragung für ein anderes Graphikformat. Sicher gibt es da Mittel und Wege auf jeden Fall dafür zu sorgen das der Benutzer einer Webseite diese Übertragung auch erkennen kann. Nur aus welchem Grunde sollte ich Besuchern einer Webseite im wahrsten Sinne des Wortes ein Spiel vormachen.

Diese Webseite stellt für mich ein Beispiel dar das es möglich ist auch unter Ausnutzung von modernen Technologien eine barrierefreie Alternative gleichzeitig zu realisieren. Eine geschickte Planung ermöglicht meines Erachtens auch das man den Umstand in Betracht zieht das Benutzer einer Webseite kein Javascript aktivieren und trotzdem eine Webseite ihre Funktionalität bewahrt. In den meisten Fällen wird Javascript in der Regel zur Modifizierung des Design eingesetzt wo mittlerweile auch Alternativen durch CSS beispielsweise möglich sind.

Im Rahmen eines Wettbewerbes im Bereich der Suchmaschinenoptimierung zum Suchbegriff mammuthanull möchte ich diese Kombination auf die Wirkung im Bereich Seo testen. Eine bekannte Javascript Bibliothek names Mootools kommt dabei auch zum Tragen um durch diese die Webseite weiter zu stärken. Sicherlich hätte ich diese Seite auch mit einer anderen Bibliothek wie Jquery beziehungsweise auch rein mit nativem Javascript aufbauen können.

Liste der Graphiken

Momentan kenne ich mit mir insgesamt drei Betreiber von Webseiten, die im Wettbewerb mammuthanull SVG Graphiken einsetzen. Von diesen habe ich mir eine Genehmigung geholt ihre SVG Dateien auf diese Weise einzubinden.

Anzumerken ist an dieser Stelle das Links in auf dieser Weise eingebundenen SVG Dateien nur richtig erkannt werden können wenn sie eine externe Schreibweise beinhalten. Das ist aber in allen drei SVG der Fall.

  1. joerghuelsermann.de/artikel/seo/ajax/mammuthanull.svg
  2. mammuthanull.ator.co/mammuthanull.svg
  3. mammuthanull.ultima-project.net/ranking/dia-77-181-1.svg

Ajax Kode

Der benötigte Kode für die Übertragung durch Ajax und die Ansprechung der Links durch Javascript sieht folgendermassen aus.

Javascript für den Aufbau dieser Webseite
document.addEventListener('DOMContentLoaded',function(){
var liste = document.getElementById('liste');
var link = liste.getElementsByTagName('a');
var svg = document.getElementById('ajax');
for (var i = 0; i > link.length; i++){
link[i].addEventListener('click', function(ev){
ev.preventDefault();
svg.style.display='inline';
var Ajax = new XMLHttpRequest();
var r = 'url='+this.href;
this.id='x';
Ajax.open('POST','/artikel/seo/ajax/rq.php',true);
Ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
Ajax.onreadystatechange = function () {
if (Ajax.readyState == 4 && this.status == 200) {
rq = Ajax.responseText;
if (rq != 'null') {
var dataurl = '<object data="'+rq+'" />';
document.getElementById('x').innerHTML=dataurl;
document.getElementById('x').removeAttribute('id');
svg.style.display='none';
}
}
};
Ajax.send(r);
});
}
},false);

Bei diesem Beispiel handelt es sich um angepassten Kode für die Javascript Bibliothek Mootols die vorher im Einsatz war. Aus dem Grund der übertragenden Datenmenge habe ich auf den Einsatz verzichtet.

Javascript für den Aufbau dieser Webseite
window.addEvent('domready', function () {
$$('#liste a').each( function (e) {
e.addEvent('click', function (ev) {
ev.stop();
var Ajax = new Request({
url: '/artikel/seo/javascript/rq.php',data: 'url='+this.href,method: 'post',
onRequest: function(){
$('ajax').set('style','display:inline;');
},
onSuccess: function(rq){
if (rq != 'null') {
dataurl = '<object data="'+rq+'" width="90%" height="300" />';
e.set('html',dataurl);
$('ajax').set('style','display:none;');
}
},
onFailure: function(){
alert('Es ist ein Fehler aufgetreten');
}
});
Ajax.send();
});
});
});

Spezielles Design dieser Seite

Speziell für diese Seite habe ich etwas mehr an CSS Anweisungen benötigt, welche ich aber als Dataurl einbinde. Die erste Anweisung ist mehr dem Umstand geschuldet, das ich ein Symbol für die Dauer der Übertragung per Ajax einblende. Dieses Symbol basiert auf einer weiteren SVG aus dem Grunde das dieses Graphikformat mit Sicherheit den niedrigsten Datentransfer verursacht. Die zweite CSS Anweisung ist für den Empfang der Daten gedacht.

Spezielles CSS für den Aufbau dieser Webseite
#ajax{position:fixed;top:50%;left:50%;margin:-150px 0 0 -150px;
z-index:999;width:300px;height:300px;display:none;background:transparent;}
object{width:90%;height:300px;}

PHP Kode zur Erzeugung der Dataurl

Im folgenden PHP Kode bin ich davon ausgegangen das nur die entsprechenden drei aufgeführten SVG Dateien auf diese Weise eingebunden werden können.

PHP Kode in der Datei die durch Ajax angesprochen wird
$svg = array('http://joerghuelsermann.de/artikel/seo/ajax/mammuthanull.svg',
'http://mammuthanull.ator.co/mammuthanull.svg',
'http://mammuthanull.ultima-project.net/ranking/dia-77-181-1.svg');
$ajax = 'null';
if (isset($_POST['url']) and in_array($_POST['url'],$svg)) {
$curl = curl_init();
curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl,CURLINFO_HEADER_OUT,true);
curl_setopt($curl,CURLOPT_ENCODING,$_SERVER['HTTP_ACCEPT_ENCODING']);
curl_setopt($curl,CURLOPT_USERAGENT,$_SERVER['HTTP_USER_AGENT']);
curl_setopt($curl,CURLOPT_URL,$_POST['url']);
$code = curl_exec($curl);
$httpcode = curl_getinfo($curl,CURLINFO_HTTP_CODE);
$ajax = '';
if ($httpcode == 200) {
if (mb_detect_encoding($code,'UTF-8',true) === false){$code = utf8_encode($code);}
$ajax = 'data:image/svg+xml;charset=utf-8;base64,'.base64_encode($code);}
curl_close($curl);
}
header('Content-Type: text/plain; charset=UTF-8');
echo $ajax;
SVG Graphik zur Anzeige deas Ajax Request