AJAX Einführung

2 | 15199 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "AJAX Einführung" mit Ihrem Wissen!

Anzeige Hier werben

Was ist AJAX?

Als Entwickler und Benutzer im Web kommt man immer häufiger mit dem Kultwort AJAX in Berührung.
AJAX steht für Asyncronous JavaScript and XML und bezeichnet eine Technik der asynchronen Datenübertragung zwischen dem Client (Webbrowser) und dem Server. Dies ermöglicht Anfragen mit einem Server durchzuführen ohne die Webseite komplett neu laden zu müssen. Google ist wahrscheinlich eines der bekanntesten Dienstleister, der diese Technik unter anderem in ihrem Service „Google Maps“ verwendet um dem Benutzer eine Desktop ähnliche Navigation der Weltkarte im Browser zu ermöglichen.

Die Schichten von AJAX sind in 2 Teile aufgeteilt, die Clientschicht und die Serverschicht. Clientseitig wird immer eine Form von HTML und JavaScript vorausgesetzt. Auf dem Server ist es dem Entwickler überlassen, welche Skriptspache gewählt wird. In diesem Beispiel wird PHP als serverseitige Skriptsprache verwendt. In einem simplen Beispiel, welches die aktuelle Uhrzeit ausgeben wird, wird erläutert, wie AJAX funktioniert.

Der Code

ajaxclock.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>AJAX Tutorial</title>
    </head>
    <body>
        <div id="time"></div>
        <button onclick="getTime();">Aktualisieren</button>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html> 
script.js  
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var req = getXmlHttpRequestObject();
window.onload = getTime();

function getXmlHttpRequestObject()
{
    if(window.XMLHttpRequest) 
    {
        return new XMLHttpRequest();
    } 
    else if(window.ActiveXObject) 
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else 
    {
        alert('Ajax funktioniert bei Ihnen nicht!');
    }
}

function getTime()
{
    if(req.readyState == 4 || req.readyState == 0) 
    {
        req.open('GET', 'ajaxclock.php', true);
        req.setRequestHeader("Content-Type","text/plain");
        req.onreadystatechange = setMessage;
        req.send(null);
    }
}

function setMessage()
{
    if(req.readyState == 4) 
    {
        var response = eval('(' + req.responseText+ ')');
        document.getElementById('time').innerHTML = response.time;
    }
}
ajaxclock.php  
PHP
1
<?php echo '{"time": "'.date("H:i:s").'"}'; ?>

Die Dateien können als Zip-Archiv heruntergeladen werden.

Die Erklärung

ajaxclock.html

Der HTML Code erstellt eine simple HTML-Datei, die den Titel "AJAX Tutorial" trägt. Es erstellt einen leeren Div Container mit der ID time und einen Knopf, der die Funktion getTime() aus der JavaScript-Datei aufruft, die mit dem <script> Befehl eingebunden wurde.

script.js

Zunächst wird die Variable reg erstellt und mit dem Ergebnis von getXmlHttpRequestObject gefüllt.
Die nächste Zeile gibt an, dass beim Laden der Seite getTime() ausgeführt werden soll.

getXmlHttpRequestObject()

Die Funktion getXmlHttpRequestObject()erstellt eine Instanz von XMLHttpRequest, welches es ermöglich asynchrone Datenverbindungen aufzubauen (diese Funktion wird bei AJAX immer benötigt).

getTime()

Die Funktion getTime() schickt eine GET-Anfrage an die ajaxclock.php, der Inhalt wird als text/plain deklariert, was dem Browser sagt, dass er es wie Klartext behandeln soll. Die Funktion wartet nun solange bis die Datei abgeschickt wurde und ruft bei einer Antwort die Funktion setMessage() auf.

setMessage()

Gibt wenn der readyState 4 ist den Text aus, der von der ajaxclock.php gesendet wurde.

ajaxclock.php

Diese Datei gibt simples JSON aus, welches eine Alternative zu XML ist. Wenn die Uhrzeit z.B. 19:18:17 ist, wird der JSON Code {"time": "19:18:17"} von der PHP Datei versandt.

Die Probleme

Das Hauptproblem von AJAX ist, dass es JavaScript vorraussetzt. Bei manchen Browsern ist dieses entweder deaktiviert oder nicht vorhanden. Dies hat zur Folge, dass diese Menschen die Seite nicht vollständig benutzen können. Ein Webseitenbetreiber der AJAX benutzt, sollte daher darauf achten, dass die Seite auch ohne die Verwendung von AJAX bzw. JavaScript benutzbar ist. Die meisten Crawler der Suchmaschinen unterstützen ebenfalls kein JavaScript und hierdurch können Sie eventuell nicht den ganzen Inhalt der Webseite spidern.

Außerdem benötigt AJAX die entsprechende Untersützung vom Browser. Dies ist im Falle von Firefox (und anderen Gecko-Browsern) das XMLHTTPRequest-Objekt (kurz: XHR), das die Untersützung von AJAX erst ermöglicht. Im Internet Explorer wird das XHR-Objekt mehr oder weniger durch die ActiveX-Schnittstelle von Windows in den Browser geladen, was einen kleinen Mehraufwand bedeutet und natürlich die API ein wenig verändert.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "AJAX Einführung" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "AJAX Einführung" hier bearbeiten.