Websiteentwicklung: AJAX: Referenz
Im Folgenden sind die im Buch verwendeten Objekte, Eigenschaften, Methoden von Prototype, script.aculo.us und Google Maps kurz und knapp aufgeführt.
Für detaillierte Informationen folgen Sie bitte den Links. Die englische Wikipedia bietet zudem eine List of JavaScript libraries an.
Prototype
[Bearbeiten]Die vollständige Funktionsreferenz findet sich unter: http://api.prototypejs.org/.
- $(id)
- Abkürzung für document.getElementById(id)[1]
- new Ajax.Request(url, options-objekt)
- Startet eine AJAX-Abfrage, gibt ein Objekt zurück. [2]
- Argumente:
- URL
- Objekt mit folgenden Eigenschaften
- method = Zugriffsmethode, entweder 'get' oder 'post'
- onComplete = Funktion die aufgerufen wird wenn eine Antwort vom Server vorliegt. Sie erhält als einziges Argument das XMLHTTPRequest-Objekt der AJAX-Abfrage.
- parameters = Parameter für die HTTP-Abfrage, im URL-encoded Format
- Ajax.PeriodicalUpdater
- Element.show(element)
- Element.hide(element)
- Zeigt ein beliebiges Element der Seite an bzw. versteckt es. Dabei wird die Style-Anweisung display:none eingefügt bzw. gelöscht.[3]
- Form.serialize(form)
- gibt eine URL-encoded Parameter-Zeichenkette die dem aktuellen Zustand des Formulars entspricht.[4]
script.aculo.us
[Bearbeiten]Die vollständige Funktionsreferenz findet sich unter: http://madrobby.github.com/scriptaculous/.
- new Ajax.InPlaceEditor(id, url)
- Wenn das HTML-Element mit der id angeklickt wird verwandelt es sich in ein Eingabefeld mit ok-Button und Cancel-Link. Hier kann die LeserIn den Text verändern und mit Enter oder klick auf den ok speichern. Der eingegeben Text wird an das Server-Programm mit der url geschickt, der Parameter-Name ist value. Der Output des Server-Programms wird als neuer Text im HTML-Element dargestellt.[5]
- new Ajax.Autocompleter(name eingabefeld, id div, url, {})
- Wenn die UserIn etwas in das Eingabefeld mit name eintippt, dann wird dieses Text-Fragment an das Server-Skript url geschickt. (Der Parametername wird der Namen des Eingabefelds verwendet). Der Output des Server-Skript soll eine Liste sein (mit ul und li-Tags). Diese Liste wird in der div mit der angegebenen id angezeigt. Die UserIn kann daraus einen Wert mit der Maus auswählen (anklicken), dann wird dieser Wert in das Eingabefeld übernommen.[6]
- Sortable.create(id, {})
- Die einzelnen Kind-Elemente des HTML-Containers id werden sortierbar - die LeserIn kann sie mit der Maus verschieben.[7]
Google Maps API
[Bearbeiten]Die vollständige Funktionsreferenz der Version 2 (inzwischen veraltet) findet sich unter: https://developers.google.com/maps/documentation/javascript/v2/reference?hl=de-DE.
- GBrowserIsCompatible
- Testet ob im aktuellen Browser Google Maps überhaupt funktioniert. In einem if() verwenden![8]
- map = new GMap2(id)
- Verwandelt die div mit der id in eine Landkarte. Rückgabewert ist ein map-Objekt.[9]
- point = new GLatLng(47.810001, 13.039999)
- Erzeugt ein Koordinatenpaar[10]
- map.addControl(new GSmallMapControl())
- Fügt ein Steuerelement für Rein- und Raus-zoomen und Verschieben der Karte hinzu.[11][12]
- map.addControl(new GMapTypeControl())
- Fügt ein Steuerelement hinzu, mit dem man zwischen Satellitenkarte und Strassenkarte hin und her schalten kann.[13][14]
- map.setCenter(point, level)
- zentriert die Landkarte auf Korrdinaten point, Kartengrösse level (Werte von 1 bis 14)[15]
- GUnload()
- ent-lädt die Landkarte, sollte man ins onUnload-Event des body einbauen.[16]
