Ajax, Dateien in eine Div laden

[cssneuling]

Hi
Aus dem Internet habe ich das folgende Script, welches Dateien in eine Div lädt. Das funktioniert jedoch nur, wenn man auf ein li in einer bestimmten ul klickt (die ul hat eine ID, für getelementbyid) und IDs sind nunmal einzigartig.
Ich habe aber auch vor, Dateien in diese Div zu laden, wenn ich auf einen Link, bzw. ein li in dieser Div klicke.
Bsp: Ich klickte auf <li>Gästebuch</li>, die Datei gästebuch.php wird in die Div geladen. Diese Datei enthält einen Link, bzw. ein <li>: Eintragen, dann soll in dieser Div ein Formular erscheinen, welches z.B. in der Datei formular.php liegt.

Das Script:

var ajax = new sack();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj    // Reference to article content <div>

function mouseoverArticle()    // Highlight article
{
    if(this==clickedArticle)return;
    if(activeArticle && activeArticle!=this){
        if(activeArticle==clickedArticle)
            activeArticle.className='Click';
        else
            activeArticle.className='';
        
    }
    this.className='Hover';
    activeArticle = this;    // Storing reference to this article
}

function showContent()    // Displaying content in the content <div>
{
    contentObj.innerHTML = ajax.response;    // ajax.response is a variable that contains the content of the external file    
}

function showWaitMessage()
{
    contentObj.innerHTML = 'Seite wird geladen';
}
function getAjaxFile(fileName)
{
    ajax.requestFile = fileName;    // Specifying which file to get
    ajax.onCompletion = showContent;    // Specify function that will be executed after file has been found
    ajax.onLoading = showWaitMessage;    // Action when AJAX is loading the file
    ajax.runAJAX();        // Execute AJAX function    
}

function selectArticle()    // User have clicked on an article
{
    getAjaxFile(this.id + '.php');    // Calling the getAjaxFile function. argument to the function is id of this <li> + '.html', example "article1.html"
    if(clickedArticle && clickedArticle!=this)clickedArticle.className='Hover';
    this.className='Click';
    clickedArticle = this;
}


function initAjaxDemo()
{
    articleListObj = document.getElementById('navi_list');
    var articles = articleListObj.getElementsByTagName('li');
    for(var no=0;no<articles.length;no++){
        articles[no].onmouseover = mouseoverArticle;
        articles[no].onclick = selectArticle;
    }    
    
    contentObj = document.getElementById('content');
}
window.onload = initAjaxDemo;

 

[Efchen]

Soll das ein Frame-Ersatz werden?
Wenn ja, dann lass mich Dir gleich davon abraten, denn diese Lösung ist um keinen Deut besser als Frames, eher schlechter.

Denn - wie bei Frames - ist z.B. das Deep-Linking (oder Bookmark-Setzen) nicht möglich.
Und wenn JavaScript deaktiviert ist, geht gar nichts mehr.

In dem Fall hilft nur eine serverseitige include-Lösung.

 

[cssneuling]

Frame Ersatz auf keinen Fall. Eher ein Ersatz für die serverseitige Include-Lösung. Bei der wird immer die komplette Seit neu geladen.

 

[Efchen]

Ja, also doch.
Letztendlich ist eine Ajax-Version also noch anfälliger und unbenutzbarer als die Frame-Lösung. Mach es nicht.

Was ist dagegen einzuwenden, dass eine Seite neu geladen wird? Das ist normal im WWW! Warum willst Du das Rad neu erfinden? Warum willst Du einen Workaround erstellen für etwas, das in dieser Umgebung üblich ist?

Klar, man kann auch einen Link so erstellen, dass man ihn als <p> auszeichnet, und dann per CSS oder besser noch JavaScript den Block anklickbar macht und dann auf die Zielseite weiterleitet. Aber warum wollte man das tun?

Viel wichtiger ist, dass Du keine Tabellenlayouts hast, sondern Deinen Inhalt strikt von Layout&Design trennst. Dann werden nur Deine HTML-Seiten neu geladen, die sind in aller Regel eher ziemlich klein. Das Stylesheet oder die Stylesheets, die Du verwendest, werden nur einmal geladen und landen dann im Cache. Wenn Du Inhalt mit Layout mischst, musst Du in der Tat jedesmal noch die Layoutinformationen mitladen. Aber arbeitest Du sauber, kann die Ladezeit nicht das Problem sein.

Und die Nutzer sind es gewohnt, dass sie einen Link anklicken und die Seite neu geladen wird. Daran wird sich auch in Zukunft nichts ändern. Das ist okay so.

 

[cssneuling]

Du meinst es ist ok so?
Nun, du bist ein erfahrener Benutzer, dann werd ich dir das wohl glauben.
Jo, ich trenne Layout und Inhalt, aber die Seiten, die includet werden, enthalten durchaus mal 300 Zeilen PHP Code (ca 4 KB). Ich weiß nicht, wie schnell sowas lädt.
Das Rad neu erfinden...kann man so nicht sagen. Eher will ich etwas erfinden, was das Rad dazu bringt, sich schneller zu drehen

 

[Efchen]

Natürlich ist es okay so. Das ist das Prinzip des WWW.

Der Client sendet eine Anfrage an den Server.
Der Server stellt die Seite zur Verfügung und sendet sie zurück an den Client.
Der Client stellt sie dar.

Was den PHP-Code angeht, der wird ja nicht auf den Client übertragen! PHP-Code wird serverseitig ausgeführt, wie schnell das geht, hängt also allein von der Leistungsfähigkeit des Rechners ab. Nur die fertige Seite wird zurück an den Client übertragen.

Wenn Du einen 300-Zeilen PHP-Code hast, dann wird der genauso schnell ausgeführt, egal ob durch Klicken auf einen Link oder durch Anforderung per Ajax. Beides verursacht eine Anfrage nach einer Seite beim Server, der dann das PHP-Script parsed und das Ergebnis an den Client zurückliefert.

Auch wenn im Falle Ajax der Server eine leicht kleinere Seite zurückliefert, ist der Geschwindigkeitsvorteil auf Hochleistungsservern so gering, dass sich damit nicht die immensen Nachteile, die sich durch die Notwendigkeit von JavaScript (und nichts anderes ist Ajax ja) ergeben, ausgleichen lassen.

Ajax ist ne schöne Sache. Es lässt sich IMHO aber nur in einem definierten Umfeld oder für zusätzliche Gimmicks einsetzen, ganz wie JavaScript auch.

Auch wenn Du mir vielleicht nicht in allen Einzelheiten hast folgen können, so ist doch wahrscheinlich schon allein verständlich für Dich, dass nichts mehr geht, wenn JavaScript deaktiviert ist und dass Du mit dieser Methode keine Bookmarks oder Deeplinks setzen kannst, weil alle unterschiedlichen Seiten - wie bei Frames - ein und die selbe URl haben. Bei Frames ist es sogar noch etwas besser, weil man da die Unterseite verlinken kann. Den Zustand, den Du durch Ajax erzeugst, kannst Du aber nicht über eine URL abbilden.

Gruß,
-Efchen

P.S.: Du kannst es ja spaßeshalber mal ausprobieren. Dann siehst Du auch wies funktioniert. Empfehlen kann ich dafür die prototype-Library, die nimmt Dir alle Ajax-Aufgaben ab und stellt Dir einfache Funktionen zur Verfügung.

 

[marlin-b]

Eine Ajax Lösung, die auch ohne JS funktioniert:
phatfusion : page loader
(gefunden auf Ajaxr.de)

Dieser läd von einer Seite einen bestimmten Teil (<div>).
Wenn Js nicht an ist, wird einfach die Seite geöffnet.

Marlin

 

[Efchen]

Wenn JS nicht an ist, kann es ja kein Ajax mehr sein.