JavaScript in Nacigation bestimmte Container mit parametern aufrufen

[klexen]

Liebe Leute,

ich bin dabei mich in php und javascript umzusehen und wir wollten gerne über eine Navigation bestimmte Container nachladen. Funktioniert über javascript auch.
Allerdings möcht ich die Methode etwas flexibler gestalten und als parameter (zusätzlich zum inhalt) den zielcontainer übergeben. Hier gibt es Probleme mit dem Methodenaufruf.
damit ihr wisst, wovon ich rede:

die navigation, welche über include eingebunden wird:

	<nav>

                <ul class="clearfix">

                    <li><a href="#" onclick="loadContent('start','content');"><span>Startseite</span></a></li>

                    <li><a href="#" onclick="loadContent('search','content');"><span>1 Suchen</span></a></li>
                    
                    <li><a href="#" onclick="loadContent('login','action');"><span>2</span></a></li>

                    <li><a href="#" onclick="loadContent('register','content');"><span>3</span></a></li>

                  
                </ul>

            </nav>

und das entsprechende script:

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(action, destination)
{
    xmlHttpObject.open('get','php/'+action+'.php');
    xmlHttpObject.onreadystatechange = handleContent(destination);
    xmlHttpObject.send(null);
	
	return false;
}

function handleContent(container)
{
    if (xmlHttpObject.readyState == 4)
    {
        document.getElementById(container).innerHTML = xmlHttpObject.responseText;
    }
}

Das Problem liegt meiner Meinung nach beim Aufruf von "handleContent(destination)".
Wenn ich den aufruf mit handleContent() gestalte und ich getElementById(container) zB durch getElementById('content') ersetzte klappts (obwohl handleContent mit parameter definiert wurde....)
Die paramenterübergabe nach loadContent klappt soweit, sobald ich handleContent mit parameter aufrufe, tut sich nichts (egal was da drin steht)

Ich hoffe das problem ist einigermaßen verständlich formuliert. ich bin mir sicher, dass die lösung wohl recht trivial ist, allerdings konnt mir noch niemand helfen, deswegen frage ich hier.

vielen dank schonmal und einen schönen restsonntag
mfg

 

[character]

Aendere Zeile 29 mal zu

xmlHttpObject.onreadystatechange = function () { handleContent(destination); };

Sollte das funktionieren, werde ich eine Erklaerung bei Interesse nachreichen.

 

[klexen]

Es hat funktioniert!
vielen Dank.
Die Erklärung würde mich schon interessieren, da ich ja grad noch im Lernprozess bin

 

[character]

onreadystatechange soll eine Funktion zugewiesen werden, die der Browser als Callback aufrufen kann.

handleContent an sich, referenziert eine Funktion, daher hat onreadystatechange = handleContent; auch etwas gemacht. Allerdings ruft der Browser die Funktion einfach ohne Argumente auf, weil er sie eben als allgemeinen Callback fuer den XHR-Kram verwendet und nichts mit deinem selbst erfundenen Parameter container anfangen kann.

Durch onreadystatechange = handleContent(container); ist jetzt etwas anderes passiert. Anstatt die Funktion zuzuweisen, hast du deine Funktion handleContent aufgerufen (mit container als Argument). Die Funktion hat keinen expliziten Rückgabewert, gibt also undefined zurück. Dieses Ergebnis wird dann onreadystatechange zugewiesen. Daher passiert nichts, denn onreadystatechange ist jetzt keine Funktion, sondern eben undefined.

Um den Callback also nun zu parametrisieren, nutzen wir Closures aus.

Im konkreten Fall wird eine anonyme Funktion eingeführt (also eine neue Funktion ohne einen Namen). Diese Funktion weisen wir onreadystatechange direkt zu. Das ist der eigentliche Callback, den der Browser verwenden wird. Beachte, dass sie keine Parameter hat. Der Browser kann sie sozusagen einfach so als Callback aufrufen.

Die Funktion wiederum hat als einzige Aufgabe, deine eigene Funktion handleContent aufzurufen, aber diesmal auch mit dem Argument destination. Der Aufruf findet aber nicht bei Zuweisung an onreadystatechange statt, sondern eben erst, wenn die anonyme Funktion auch ausgeführt wird (als Callback).

Die eigentliche "Magie" dabei ist jetzt, dass sich die anonyme Funktion die Variable destination merkt, bis sie tatsächlich irgendwann mal ausgeführt wird, obwohl diese Variable ja gar nicht innerhalb der anonymen Funktion deklariert wurde. Die Funktion weiß also nicht nur, was sie machen soll, sondern kennt auch die nicht-lokalen Variablen zur Zeit ihrer Erstellung.

destination in der anonymen Funktion ist jetzt an destination aus ihrer umgebenden Funktion loadContent(action, destination) gebunden. Der Browser kann den Callback ohne Argumente aufrufen, aber der Callback an sich hat sich den container gemerkt und kann ihn deshalb an handleContent weitergeben.

 

[klexen]

darauf wäre ich wohl nie gekommen... da gibts wohl noch einiges zu tun für mich.
vielen dank!