Maschinendenk

Ajax

0 Kommentare

Prototype macht es sehr einfach Ajax einzusetzen.
Zu diesem Zweck bietet Prototype 3 verschiedene Objekte, die hier im Einzelnen besprochen werden.

Ajax Objekte

  • AjaxRequest(url,[optionen]) - führt ein Ajax Request aus
  • AjaxUpdater(container,url,[optionen]) - führt ein Ajax Request aus und aktualisiert ein HTML Element mit dem Ergebnis.
  • AjaxPeriodicalUpdater(container,url,[optionen]) - Genau wie AjaxUpdater, nur das das Request periodisch ausgeführt wird

Optionen

Alle 3 Objekte haben einen gemeinsames Set an Optionen:

  • asynchronous - Legt fest ob das Request asynchron erfolgt (default: true)
  • encoding - Das Content Encoding (default: utf8)
  • method - legt fest welche Request Method genutzt wird (POST / GET)
  • postBody - bei POST Anfragen können hier die Datenfelder übertragen werden

Beispiele

Script asynchron aufrufen und ein HTML Element aktualisieren:

<html>
<head>
function change(script,element)
{
  new Ajax.Updater(element,script, {
  method: 'get'
  });
}
</head>
<body>
<a href = "javascript:change("meinscript.php?arg1=meinargument","meincontent");">Mein Script asynchron aufrufen</a>
<div id = "meincontent"></div>
</body>
</html>

Zunächst definieren wir die Funktion change im Seitenkopf. Diese nimmt die Argumente element und script entgegen.
Der Parameter element legt das HTML Element fest, das aktualisiert werden soll. Der Parameter Script steuert das aufzurufende Script.
Diese beiden Parameter werden dem Konstruktor von Ajax.Updater übergeben. Die Option method:get legt fest, dass der Request Typ HTTP GET ist.

Danach rufen wir die JS Funktion mittels eines Hyperlinks auf.

Script alle 2 Sekunden aufrufen:

<html>
<head>
new Ajax.PeriodicalUpdater('meincontent', 'meinscript.php?arg1=wert1', {
  method: 'get', frequency: 2, decay: 2
});
</head>
<body>
<div id = "meincontent"></div>
</body>
</html>

Hiermit wird “meinscript.php?arg1=wert1″ alle 2 Sekunden aufgerufen (frequency:2).
Die Option decay:2 wirkt als Multiplikator für frequency, wenn der Rückgabewert gegenüber dem vorigen Request unverändert blieb.

Das bedeutet:Wenn beim zweiten Request der gleiche Response Text herauskommt wie beim Ersten, wird das nächste Request erst in 4 Sekunden (2*2) ausgeführt. Ist das Ergebnis dann wieder das Gleiche, wird erst in 8 Sekunden der nächste Request abgesetzt, usw.

Dies hilft die Serverlast moderat zu halten. :)

Geschrieben von Philipp

Juli 19th, 2007 at 7:40

Veröffentlicht in Allgemein

Kommentar schreiben

Sie müssen eingeloggt sein um einen Kommentar zu verfassen.