<h1 class="entry-title ">Andere Formen von Ajax</h1>
Je nach dem welches Ziel mit dem Einsatz von Ajax-Techniken verfolgt wird kann es sich unter Umständen heraus stellen, dass einzelne Bestandteile zu kompliziert sind bzw. das Ziel mit deutlich einfacheren Mitteln erreicht werden kann. Insbesondere das Auslesen und Verarbeiten der XML-Daten stellt oftmals einen nicht unerheblichen Aufwand im Vergleich zum relativ geringen Nutzen dar. <div id="content_ad">
</div>
<h2> <a name="ajaxohnexml:json">Ajax ohne XML: JSON</a>
</h2>
Eine Alternative zur Verwendung von XML-Daten stellt hier das sogenannte JSON dar. Gesprochen wird es wie der amerikanische Name Jason und ist im Prinzip nichts anderes als die einfache Objektschreibweise. In Verbindung mit <a href="/ratgeber/ajax">Ajax</a> geschieht hier folgendes:<br>
<br>Um das Auslesen und Verarbeiten der per Ajax abgerufenen Daten zu erleichtern wird vom Server keine XML-Datei sondern direkt JavaScript-Code ausgegeben. Damit dieser möglichst universell verarbeitet werden kann, erfolgt die Ausgabe der Daten hierbei in Form von einfachen Objekten. Man fragt den Code normal per Ajax ab und führt diesen anschließend mittels der <code>eval</code>-Funktion aus. Diese funktioniert im Prinzip wie das <code><script></code> in HTML: Der als String übergebene Wert wird als JavaScript-Code erkannt und ausgeführt. Das im Code enthaltene Objekt wird damit erstellt und kann anschließend verwendet werden. <br>Der vom Server gelieferte Code könnte z.B. so aussehen:</p>
<p class="BSP">{Name:'Max Mustermann', <br> Straße: 'Musterstraße 14', <br> PLZ:'12345', <br> Ort:'Musterhausen'}</p>
... der vom Client dann so verarbeitet wird:</p>
<p class="BSP">o.open('GET','http://www.meineseite.de/seite.php');<br>o.onreadystatechange = function ()<br>{<br> if(o.readyState == 4 && o.status != 200)<br> {<br> kunde = eval(o.responseText);<br> document.writeln(kunde.Name+'<br>');<br> document.writeln(kunde.Straße+'<br>');<br> document.writeln(kunde.PLZ+' ');<br> document.writeln(kunde.Ort+'<br>');<br> }<br>};<br>o.send(null);</p>
<a href="/ratgeber/javascript/json">Mehr zum Thema JSON in JavaScript</a>
<h2> <a name="ajaxohnexmlhttprequest">Ajax ohne XMLHttpRequest</a>
</h2>
Neben dem Problem wie man die XML-Daten sinnvoll verarbeiten kann, taucht in manchen Fällen das Problem auf, dass das zur Übertragung verwendete <code>XMLHttpRequest</code>-Objekt nicht zur Verfügung steht - etwa weil der Browser dies nicht unterstützt. Auch hierfür gibt es in den meisten Fällen eine Lösung.</p>
<h3> <a name="datenperiframeladen">Daten per IFrame laden</a>
</h3>
Die einfachste und zugleich gebräuchlichste Lösung, Daten ohne die Verwendung des <code>XMLHttpRequest</code>-Objekts zu laden, ist die Verwendung von IFrames. Hierbei wir in die Seite hinein ein 1x1 Pixel großer <code><iframe ...></code> erzeugt, der anschließend angesprochen und in den eine Datei geladen werden kann. Werden neue Daten benötigt wird dem IFrame einfach eine neue <acronym title="Uniform Resouce Locator">URL</acronym> zugewiesen und so der Inhalt des IFrames neu geladen. Statt XML-Daten wird in diesem Fall vom Server eine normale HTML-Datei erzeugt die selbst wiederum ein <a href="/ratgeber/javascript">JavaScript</a> mit entsprechenden Anweisungen beinhaltet. Um etwa wie in den vorangegangenen Beispielen jeweils eine Adresse vom Server abzufragen und anzuzeigen könnte z.B. folgender Code dienen:</p>
<p class="BSP">document.writeln('<iframe src="about:blank" name="ajaxframe" '+<br> 'height="1" width="1" ></iframe>');<br>parent.ajaxframe.location.href = 'adressen.php';</p>
... adressen.php könnte dann in etwa so aussehen:</p>
<p class="BSP"><html><br><head></head><br><body ><br><script language="JavaScript"><br><!--<br> alert('Max Mustermannn'+<br> 'Musterstraße 14n'+<br> '12345 Mustehausen')<br>//--><br></script><br></body><br></html></p>
<h3> <a name="datenperscriptladen">Daten per Script laden</a>
</h3>
Ähnlich wie beim Laden eines IFrames kann auch ein einfaches Script-Element dazu verwendet werden, Daten dynamisch bei Bedarf nachzuladen. Hierzu erstellt man einfach ein neues <code>script</code>-Element und hängt es an den <code><head></code> an. Der Browser lädt das Script nach und führt es aus. Die so gewonnenen Daten können anschließend entsprechend verarbeitet und angezeigt werden. Einfaches Beispiel für die HTML-Datei:</p>
<p class="BSP">var Head = document.getElementsByTagName("head")[0];<br>var Script = document.createElement('script');<br>Script.setAttribute('type', 'text/javascript');<br>Script.setAttribute('src', daten.php');<br>Head.appendChild(Script);</p>
... in daten.php würde dann z.B. folgendes stehen:</p>
<p class="BSP">var Name = 'Max Mustermann';<br>var Straße = 'Musterstraße 14';<br>var plzort = '12345 Mustehausen';<br>var fertiggeladen = true;</p>
Der Knackpunkt an dieser Variante liegt darin, dass man nicht genau weiß ob/wann die Daten geladen sind. Insbesondere wenn sich das geladene Script nicht selbst ausführt sondern lediglich Variablen auf einen neuen Wert setzt muss irgendwie in Erfahrung gebracht werden wann und ob das Script geladen wurde. Hierzu bedient man sich mehreren Timeouts und prüft regelmäßig ob das Script angekommen ist:</p>
<p class="BSP">var fertiggeladen = false;<br>var dl = 0;<br>
<br>function scriptGeladen(callback)<br>{<br> if(!fertiggeladen)<br> {<br> dl++;<br> if(dl>100){return false;}<br> window.setTimeout('scriptGeladen("'+callback+'"',500);<br> return false;<br> }<br> eval(callback);<br>}<br>
<br>function sagan()<br>{<br> alert(Name+'n'+<br> Straße+'n'+<br> plzort);<br>}<br>
<br>var Head = document.getElementsByTagName("head")[0];<br>var Script = document.createElement('script');<br>Script.setAttribute('type', 'text/javascript');<br>Script.setAttribute('src', daten.php');<br>Head.appendChild(Script);<br>scriptGeladen('sagan()');</p>
<h3> <a name="datensendenperimage">Daten senden per Image</a>
</h3>
Noch deutlich einfacher und zudem selbst mit älteren Browsern kompatibel geht es, wenn es einzig darum geht, Daten an den Server zu senden, ohne dass dazu das Ergebnis vom Browser interessant ist. Hierzu bedient man sich einfach einer Grafik die geladen und damit vom Server abgerufen wird. Statt einem Bild lädt man jedoch eine PHP-, <a href="/ratgeber/asp-net">ASP</a> oder andere Datei und um die Daten an den Server zu übermitteln werden diese dabei einfach als Parameter mit übergeben. Das Script kann die Parameter dann auswerten und leitet einfach zu einer echten Grafik weiter. Das Script dazu könnte z.B. recht einfach so aussehen:</p>
<p class="BSP">a = new Image();<br>a.src = 'speichere.php?id=123&wert=7252';</p>
... bzw. sofern der Nutzer eine Rückmeldung über den Zustand bekommen soll, einfach so:</p>
<p class="BSP"><img src="leer.gif" width="20" height="20" name="speichere"><br>...<br><script language="JavaScript"><br><!--<br> document.speichere.src = 'speichere.php?id=123&wert=7252';<br>//--><br></script></p>
... auf dem Server macht speichere.php dann z.B. folgendes:</p>
<p class="BSP"><?php<br>
<br>mysql_query('INSERT INTO daten (id,wert) <br> VALUES("'.addslashes($_GET['id']).'",<br> "'.addslashes($_GET['wert']).'")');<br>header('Location: gespeichert.jpg');<br>exit;<br>
<br>?></p>
Für alle nicht PHP-ler: Das Script schreibt die beiden per Parameter id und wert übergebenen Daten in die mySQL-Datenbank und leitet den Abruf dann an die Datei gespeichert.jpg weiter. Der Besucher sieht also lediglich das Resultat, nämlich die Datei gespeichert.jpg die vielleicht einfach nur ein "Ok" oder dergleichen anzeigt.</p>
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Ajax-Frameworks
