"Hello World" mit Ajax - Inhalt dynamisch nachladen

0 | 70824 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie ""Hello World" mit Ajax - Inhalt dynamisch nachladen" mit Ihrem Wissen!

Anzeige Hier werben

Im vorherigen Artikel haben Sie erlernt wie Sie ein XMLHttpRequest-Objekt erstellen, so dass dieses auf allen gängigen Browsern läuft. Jetzt werden wir dieses das erste Mal verwenden, in dem wir eine kleine "Hello World" Anwendung in Ajax entwickeln.

Dabei werden wir mit Ajax eine Textdatei nachladen und den enthaltenden Inhalt auf in einer HTML-Seite nachladen.

Textdatei erstellen

Legen Sie sich einen Ordner auf Ihrer Festplatte mit dem Namen "Ajax" an. Anschließend erstellen Sie eine neue Textdatei mit dem Namen "hallo.txt", in welcher Sie einen beliebigen Text reinschreiben und speichern diese in dem Ordner.

HTML-Datei anlegen

Erstellen Sie eine HTML-Datei im gleichen Ordner mit dem Namen "index.html". In diese HTML-Seite schreiben wir folgenden Quellcode, der zwei einfache Absatze enthält.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
<head>
</head>
<body>
<p>Ich werde nicht neu geladen</p>
<p id="myContent">
    <a href="#" onclick="loadContent();">Klick mich</a>.
    Ich werde neu geladen
</p>
</body>
</html>

Der zweite Absatz besitzt eine id "myContent", sowie einen Link auf eine JavaScript-Funktion mit dem Namen "loadContent", welche aufgerufen wird, wenn der Link angeklickt wird. Dies bewirkt der Ausdruck "onclick".

Ruft man diese HTML-Seite jetzt und klickt den Link an, passiert noch gar nichts. Der Grund dafür ist, wir haben noch keine JavaScript-Funktion mit dem Namen "loadContent()" im selbigen Dokument erstellt.

Javascript erstellen

Jetzt geht es daran das JavaScript zu erstellen. Dieses packen wir für unser Beispiel direkt in die HTML-Datei, JavaScript-Dateien können aber natürlich auch ausgelagert werden, so dass in der HTML-Datei nur noch ein Link auf die JavaScript-Datei vorhanden ist. (JavaScript in HTML einbinden)

Wie wir bereits gelernt haben brauchen wir für jede Ajax-Anwendung ein XMLHttpRequest-Objekt, das auf allen Browsern laufen muss. Den entsprechen Code für das instanzieren XMLHttpRequest-Objekts fügen wir als ersten Schritt in unserem HTML-Code über den beiden Absätzen ein.

 
HTML
 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
39
<html>
<head>
</head>
<body>

<script type="text/javascript">

var xmlHttpObject = false;

if (typeof XMLHttpRequest != 'undefined') 
{
    xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject) 
{
    try 
    {
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) 
    {
        try 
        {
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) 
        {
            xmlHttpObject = null;
        }
    }
}
</script>

<p>Ich werde nicht neu geladen</p>
<p id="myContent">
<a href="#" onclick="loadContent();">Klick mich</a>.
Ich werde neu geladen</p>
</body>
</html>

Damit instanzieren wir eine XMLHttpRequest-Objekt für unsere Ajax Anwendung. Jetzt erstellen wir die Funktion "loadContent()", mit welcher wir den Inhalt der Textdatei nachladen möchten.

 
JavaScript
1
2
3
4
5
6
7
function loadContent()
{
    xmlHttpObject.open('get','hallo.txt');
    xmlHttpObject.onreadystatechange = handleContent;
    xmlHttpObject.send(null);
    return false;
}

Zur kurzen Erklärung. Die Variable "xmlHttpObject" haben wir im vorherigen Code instanziert, sie wird den Datenaustausch mit der Text-Datei organisieren und ist zwingend notwendig. Mit xmlHttpObject.open legen wir fest, welche Datenquelle auf welchem Weg geöffnet werden soll. Die darauf folgende Zeile legt fest, was passieren soll, wenn die Textdatei "hallo.txt" erfolgreich geladen wurde.

Durch die Zeile xmlHttpObject.send(null) wird festgelegt, dass keine Daten über Post verschickt werden. return false ist notwenig um, den Klick abzubrechen, damit keine neue Seite geladen wird.

Die zweite Funktion die wir benötigen "handleContent" soll die entsprechende Seite nachladen und den Inhalt des Absatzes mit dem Inhalt der Textdatei austauschen. Diese schaut wie folgt aus:

 
JavaScript
1
2
3
4
5
6
7
function handleContent()
{
    if (xmlHttpObject.readyState == 4)
    {
        document.getElementById('myContent').innerHTML = xmlHttpObject.responseText;
    }
}

Es wird überprüft, ob die Anfrage an die Textdatei erfolgreich war. Der Code für einen erfolgreichen http-Request lautet "4", daher wird überprüft ob dies hier der Fall ist. Andere wichtige Bearbeitungszustände in Ajax sind:

  • 0: Der Request wurde noch nicht eingeleitet
  • 1: Der Request wurde gesetzt aber noch nicht gesendet
  • 2: Der Request wurde gesendet und wird gerade bearbeitet
  • 3: Der Request wird noch bearbeitet, Teildaten stehen aber zur Bearbeitung bereit
  • 4: Der Request (=Response) ist abgeschlossen, alle Daten sind verfügbar

Anschließend greifen wir auf unsere HTML-Seite zu und wählen uns das HTML-Element mit dem Namen "absatztausch" aus. In unserem Fall den Absatz <p id="myContent"> ... </p>. Mit .innerHTML wird abschließend nur noch festgelegt, dass der gesamte Inhalt des Absatzes verändert werden soll.

Abschließend wird mit xmlHttpObject.responseText festgelegt, dass der Inhalt unserer Textdatei mit dem Inhalt des Absatzes getauscht wird.

Beide Funktionen setzen Sie nun unterhalb Ihres JavaScript-Codes, welcher dass XMLHttpRequest-Objekt instanziert

hat, jedoch noch bevor der </script> Tag geschlossen wird. Der gesamte Code schaut jetzt also wie folgt aus.

Vollständiges Ajax "Hello World"

 
HTML
 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
</head>
<body>

<script type="text/javascript">

var xmlHttpObject = false;

if (typeof XMLHttpRequest != 'undefined') 
{
    xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject) 
{
    try 
    {
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) 
    {
        try 
        {
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) 
        {
            xmlHttpObject = null;
        }
    }
}

function loadContent()
{
    xmlHttpObject.open('get','hallo.txt');
    xmlHttpObject.onreadystatechange = handleContent;
    xmlHttpObject.send(null);
    return false;
}

function handleContent()
{
    if (xmlHttpObject.readyState == 4)
    {
        document.getElementById('myContent').innerHTML = xmlHttpObject.responseText;
    }
}
</script>

<p>Ich werde nicht neu geladen</p>
<p id="myContent">
    <a href="#" onclick="loadContent();">Klick mich</a>.
    Ich werde neu geladen
</p>
</body>
</html>

Rufen Sie Ihre Seite in einem Browser Ihrer Wahl auf und klicken Sie den Link. Der Absatz mit dem Link sollte verschwinden und dafür der Inhalt der Textdatei dargestellt werden. Dabei wird die Seite jedoch nicht neu geladen. Herzlichen Glückwunsch, Sie haben damit erfolgreich Ihre erste Ajax-Anwendung programmiert.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite ""Hello World" mit Ajax - Inhalt dynamisch nachladen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung ""Hello World" mit Ajax - Inhalt dynamisch nachladen" hier bearbeiten.