Effektives Updaten

So langsam kommts mir vor, als ob ich hier allein schreibe – aber gut.
Heute möchte ich euch eine Technik vorstellen, die es erlaubt Daten sehr effektiv via AJAX zu akualisieren. Ich werde in diesem Artikel voraussetzen, dass schon gewisse Grundkenntnisse in JavaScript und vor allem in AJAX vorliegen. Denjenigen, die dieses Wissen noch nicht ihr Eigen nennen können, möchte ich das AJAX: Getting Started Tutorial in der Developerzone von Mozilla ans Herz legen.

Kurze Vorgeschichte

Vorweg: Diese Methode habe ich mir während der Programmierung eines AJAX-Administrationsclienten für GTA San Andreas – Multiplayer (kurz SA:MP) einfallen lassen. Hier ging es darum, dass gewisse Daten (Servername, aktuelle Spielerzahl, derzeit laufender Gamemode, Highscores, …) in frei definierbaren Abständen automatisch aktualisiert werden sollten. Ich dachte mir, dass es doch schön wäre, wenn man nicht jedes Mal, wenn man ein „aktualisierbares Feld“ einfügt den gesamten AJAX-Code öffnen und erweitern müsste.

Preisfrage

Nun kommt die große Preisfrage: Was kann man allen Elementen, die man mit einem bestimmten Wert aktualisieren möchte an Eigenschaften verpassen? Des Rätsels Lösung ist: eine Klasse.
Ich glaube, das ist mit Beispielen am Besten erklärt:

<p>Es spielen zuzeit <i class="spieler_gesamt">0</i> Spieler im Gamemode <i class="gamemode">0</i>.</p>

Hier werden den i-Tags jeweils die Klassen spieler_gesamt und gamemode zugewiesen. Das kann man jetzt einfach überall auf der Seite machen und so die dynamischen Felder markieren. Das brauchen wir jetzt gleich, damit wir sie im JavaScript wiederfinden 😉

Scripting

Kurzer Situationsbericht: Wir haben nun alle Elemente, die wir aktualiseren wollen durch Klassen markiert.
Was brauchen wir jetzt?

  1. eine Funktion, die uns alle Elemente mit einem bestimmten className liefert
  2. eine Funtion, die die erste Funktion verwendet und die entsprechenden Elemente aktualisiert

Gut – 1. können wir uns leicht aus den Weiten des WWW besorgen. Ich habe hier eine Funktion von Jonathan Snook und Robert Nyman verwendet, es gibt aber hunderte Implementationen von getElementsByClassName().

/*
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\\-/g, "\\\\-");
	var oRegExp = new RegExp("(^|\\\\s)" + strClassName + "(\\\\s|$)");
	var oElement;
	for(var i=0; i<arrelements.length; i++){
		oElement = arrElements[i];      
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}

An die 2. Funktion müssen wir uns wohl selbst setzen:

function updateElement(className, value) {
	var elements = getElementsByClassName(document, '*', className);
	if(elements.length > 0) {
		for(var i=0; i<elements .length; i++) {
			if(elements[i].tagName.toLowerCase() == ‚input‘) {
				// the element is a form input – try to set the value
				elements[i].value = value;
			} else if(elements[i].tagName.toLowerCase() == ‚a‘) {
				// it is a link! (most likely weburl)
				elements[i].setAttribute(‘href‘, value);
			} else {
				// try to set the text range…
				elements[i].firstChild.data = value;
			}
		}
	} else return false;
	return true;
}

Sehen wir uns an, was die Funktion tut:
Zunächst werden alle Elemente, mit der Klasse, die mit dem ersten Parameter (className) übergeben wird, in die Variable elements gelesen. Wenn Elemente gefunden wurden, dann werden diese durchgegangen.
Nun wird unterschieden: Wenn dieses Element ein input-Feld ist, dann wird das value-Attribut gesetzt. Sollte ein Link vorliegen, wird das href-Attribut gesetzt. Als letzte Möglichkeit wird versucht einfach das data-Feld des ersten Kindknotens zu setzen. Diese letzte Möglichkeit trifft auf sehr viele Elemente zu (p, i, b, u, …). Es wird einfach nur der Text, der im Element enthalten ist, gesetzt.
Der Vorteil bei dieser Methode ist, dass man ohne weiteres noch weitere dynamische Felder hinzufügen kann, ohne dass man sich Sorgen machen müsste, dass diese nicht gefunden und aktualisiert werden. Eine große Hilfe, wenn man Design und Programmierung in zwei verschiedene Arbeitsgruppen getrennt hat. Die Designer müssen dann nur wissen, dass sie den dynamischen Feldern eine bestimmte Klasse verpassen müssen, den Rest übernimmt dann besagtes Script.

Nun noch ein kurzes Anwendungsbeispiel (muss in einen lokalen Webserver eingespielt werden!):
effektiv-updaten-ajax-stephantom.zip

4 Kommentare to “Effektives Updaten”

  1.  Leonce schrieb am 21. Mai 2006 um 10:49 zitieren

    Schöner Beitrag, jedoch funktioniert dein Beispiel nicht. Es wird nicht aktuallisiert.

  2.  stephantom schrieb am 29. Mai 2006 um 20:08 zitieren

    Du musst auf Zeile 83 in der HTML-Datei schauen und da den richtigen Pfad zur PHP-Datei anpassen.

  3.  Leonce schrieb am 06. Jul 2007 um 19:03 zitieren

    Funktioniert trotzdem nicht…

  4.  GTA SAMP Server schrieb am 30. Nov 2012 um 23:03 zitieren

    GTA SAMP Server…

    » Effektives Updaten « Trash-Log Blog Archive…

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>