"Hello World" in ajax mit Prototype umsetzen

1 | 16023 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie ""Hello World" in ajax mit Prototype umsetzen" mit Ihrem Wissen!

Anzeige Hier werben

Der Anfang

Als erstes braucht man das Prototype Framework, welches ihr hier in der Version 1.6 downloaden könnt.
Eine API und alle weitern Informationen zum Prototype Framework findet Ihr auf www.prototypejs.org.

Textdatei erstellen

Erstellen Sie in Ihrem Arbeitsordner, der gleiche Ordner wo sich auf Ihre HTML und JavaScript-Datei befindet, eine Textdatei mit dem Namen "hallo.txt" mit beliebigen Inhalt. In meinem Beispiel steht einfach nur Hallo Welt drin.

HTML-Code erstellen

Der HTML Code sieht wie folgend aus:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<title>Prototype Tutorial</title>
</head>
<body>

    <a href="#" id="button"> Aktualisieren </a>
    <div id="myContent">
     Das ist mein Content der noch nicht Aktualisiert wurde. <br />
     Klicke auf den Link "Aktualisieren" um den Content aus der hallo.txt zu laden.
    </div>

</body>
</html>

Zur Erklärung, warum kein onclick-Event auf dem Link ist komme ich später.

Prototype einbinden

Das Prototype Framework muss nun noch eingebunden werden.
Dazu muss nur folgende Zeile innerhalb des <head> Tags eingefügt werden.

 
HTML
1
<script type="text/javascript" src="prototype.js"></script>

In meinem Fall habe ich die Datei einfach nur prototype.js genant, um mir viel Schreibarbeit zu sparen.

Des weiteren brauchen wir für mein Beispiel noch folgende Codezeilen, die Ihr auch innerhalb des <head> Tags und unterhalb des eingebundenen Prototype Frameworks einfügen müsst:

 
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
<script type="text/javascript" >
/* Sagt dem Skript, dass es erst losgeht, wenn der Dom geladen wurde. Quasi dann wenn das Dokument ganz zur Verfügung steht*/
document.observe('dom:loaded', function () { 
    /* über die $ Methode holen wir uns das Element <a> mit der ID 'button' */
    var elButton = $('button');
    
    /* nun überwachen wir mit observe('click') den Button/Link auf etweilig Klicks */
    elButton.observe('click', function () {
        /* Wenn auf den Link geklickt wird, wird nun die funktion loadContent aufgerufen,
         der wir die Textdatei hallo.txt übergeben und das Element indem später der Content aus
         der hallo.txt geladen werden soll
        */
        loadContent('hallo.txt',"myContent");
    });
});

function loadContent(file,element)
{
  /* Nun führen wir einfach den Ajax.Updater aus mit den definierten Parametern.
   Außerdem geben wir dem Updater noch die Methode "GET" mit damit er sich den Content "HOLT"
  */
  new Ajax.Updater(element,file, {
    method: 'get'
  });
}
</script>

Ich habe den Quellcode Dokumentiert.

Nun könnt Ihr die Seite in euerem Browser öffnen und auf den Link klicken und euch erfreuen an dem Content aus der hallo.txt =)


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite ""Hello World" in ajax mit Prototype umsetzen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung ""Hello World" in ajax mit Prototype umsetzen" hier bearbeiten.

Mitarbeiter