Ajax
#3
So Teil 3 - ich glaube so langsam, dass Ajax süchtig macht...

ich habe vorhin eine kleine Datei gebastelt, die ich euch zu allererstmal zeigen möchte hier findet ihr sie:
http://kayela.de/ajax/beispiel3.htm

Hier erstmal der Code:
Code:
<html>
    <head>
        <title>Meine ersten Ajax Erfahrungen</title>
        <script type="text/javascript">
         <!--    
             function doIt(){
            
                 var req = null;

                try{
                    req = new XMLHttpRequest();
                }
                catch (ms){
                    try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (nonms){
                        try{
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (failed){
                            req = null;
                        }
                    }  
                }

                if (req == null)
                      alert("Error creating request object!");
                  
            
                  req.open("GET", 'test2.htm', true);

                req.onreadystatechange = function(){            
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status);
                            }else{    
                                
                                document.getElementById('eins').innerHTML = '<strong>'+
                                                                        req.responseText
                                                                        +'</strong>';
                            }
                            break;
                    
                            default:
                                return false;
                            break;    
                        }
                    };
  
                  req.setRequestHeader("Content-Type",
                                      "application/x-www-form-urlencoded");
                req.send(null);
            }
            

function doIt2(){
            
                 var req = null;

                try{
                    req = new XMLHttpRequest();
                }
                catch (ms){
                    try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (nonms){
                        try{
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (failed){
                            req = null;
                        }
                    }  
                }

                if (req == null)
                      alert("Error creating request object!");
                  
                
                  req.open("GET", 'test.html', true);

                req.onreadystatechange = function(){            
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status);
                            }else{    
                              
                                document.getElementById('eins').innerHTML = '<strong>'+
                                                                        req.responseText
                                                                        +'</strong>';
                            }
                            break;
                    
                            default:
                                return false;
                            break;    
                        }
                    };
  
                  req.setRequestHeader("Content-Type",
                                      "application/x-www-form-urlencoded");
                req.send(null);
            }
            
         //-->
        </script>
    </head>
    <body>
<div style="position:absolute; top: 50px; left: 30px; width: 200px; height: 150 px; background-color: #CCFF00; ">
<a href="javascript:doIt()">Klick mich an :D</a><br>
<br></div>
<div id="eins" style="position:absolute; top: 250px; left: 50px; width:200px; height: 15 px; background-color: #CCFF00; ">

</div>

    </body>
</html>

so gehen wir mal schritt für schritt durch - ich gehe davon aus, dass ihr oben mitgelesen habt und ich bekanntes nicht wieder bis ins detail erklären muss ^^

--- Was macht das Skript?
=> Das Skript liest den Inhalt einer HTML Datei aus, wenn man auf einen Link klickt.
=> In dieser Datei befindet sich wiederrum ein Link, der eine andere Datei läd, wenn sie geklickt wird

--- Was brauchen wir also?
=> Eine Datei, von der aus wir alles ausführen Smile
Diese Datei beinhaltet:
* Zwei Javascript Funktionen, die jeweils eine andere HTML Datei laden
* einen Link um die erste JS funktion auszuführen
=> eine HTML Datei mit einem Link um die andere Datei wieder zu laden Smile
=> eine Datei mit beliebigem Text

So dan gehen wir mal stückchen für stückchen den code durch

Zuerst kommt wieder die Abfrage, die wir schon anderen Beispielen kennen, die prüft welcher Browser verwendet wird etc... dann folgt eine Überprüfung auf Fehler und wenn alles gut geht gehts los =)

Code:
req.open("GET", 'test2.htm', true);

                req.onreadystatechange = function(){            
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status);
                            }else{    
                                
                                document.getElementById('eins').innerHTML = '<strong>'+
                                                                        req.responseText
                                                                        +'</strong>';

in req ist wieder das "Objekt" gespeichert das vom Browser verwendet wird. Es läd auf dem weg "GET" die datei test2.htm und true bedeutet, dass die abfrage asynchron durchgeführt wird.
Dann checkt das Skript welchen wert readyState hat, ihr erinnrt euch ? Das sind diese 5 Stufen die schon von http://developer.mozilla.org/de/docs/AJA...ng_Started beschrieben wurden. Wenn es den wert 4 hat, ist der Vorgang des ladens abgeschlossen.
Dann prüft er nochmal ob ein Fehler vorliegt und wenn nicht:
Code:
document.getElementById('eins').innerHTML = '<strong>'+
                                                                        req.responseText
                                                                        +'</strong>';

Im Dokument macht er aus dem Teil, der mit der ID eins bezeichnet ist also diesem "div-Bereich" ein element. Dieses element wird mit Text gefüllt und zwar handelt es sich dabei um den Text, der aus req gelesen wurde. strong bedeutet lediglich, dass der Text fett dargestellt werden soll. Man könnte also das strong auch durch i ersetzen dann wird der text kursiv dargestellt. So hab ich es bei der zweiten Funktion gemacht Smile

Ihr müsst bei der zweiten Funktion nur den Namen ändern (den Link dementsprechen angleichen) und die zu ladende HTML datei.

Da Programmierer Grundsätzlich faul sind, muss es natürlich auch ne einfachere Methode geben. Wir können einfach das was sich ändert durch variablen ersetzen und diese durch den Link übergeben. Dann können wir auch darauf verzichten den Funktionsnamen zu ändern, denn dann brauchen wir ja nur eine Funktion Smile
Was muss man dann noch ändern? Richtig! Den Namen der Datei, die geladen werden soll.

Dabei können wir auf das Wissen zurückgreifen, dass wir schon in anderen Beispielen erworben haben. Da habe ich nämlich ähnlich gearbeitet Smile
Wir brauchen eine Variable
ich nenne sie einfach mal

Datei
Die wird als Parameter zwischen die Klammern der Funktion angegeben
die Funktion nenne ich einfach mal
dateiLaden[b]
[b]Achtet darauf, dass ihr den Funktionsnamen immer gleich schreibt. Zwischen Groß und kleinschreibung wird unterschieden ^^


So also hier der Code:


Code:
<script type="text/javascript">
         <!--    
             function dateiLaden(datei){
            
                 var req = null;

                try{
                    req = new XMLHttpRequest();
                }
                catch (ms){
                    try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (nonms){
                        try{http://talk.iwebtool.com/thread10377.html
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (failed){
                            req = null;
                        }
                    }  
                }

                if (req == null)
                      alert("Error creating request object!");
                  
            
                  req.open("GET", datei, true);

                req.onreadystatechange = function(){            
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status);
                            }else{    
                                
                                document.getElementById('eins').innerHTML = '<strong>'+
                                                                        req.responseText
                                                                        +'</strong>';
                            }
                            break;
                    
                            default:
                                return false;
                            break;    
                        }
                    };
  
                  req.setRequestHeader("Content-Type",
                                      "application/x-www-form-urlencoded");
                req.send(null);
            }
            
         //-->
        </script>
    </head>
    <body>
<div style="position:absolute; top: 50px; left: 30px; width: 200px; height: 150 px; background-color: #CCFF00; ">
<a href="javascript:dateiLaden('test3.htm')">Klick mich an :D</a><br>
<br></div>
<div id="eins" style="position:absolute; top: 250px; left: 50px; width:200px; height: 15 px; background-color: #CCFF00; ">

</div>

    </body>
</html>

und hier der von test3.htm
Code:
Hallo :D

<a href="javascript:dateiLaden('test.html')">klick mich an =)</a>


Soo
ich fand das schonmal voll praktisch und hab mir überlegt man könnte ja auch mal ein Beispiel machen das wirklich so zum Einsatz kommen kann Wink
Deswegen habe ich mich für ein kleines Menü entschieden Smile


=> Es gibt mit sicherheit bessere und einfachere lösungen um ein menü zu realisieren nur leider kann ich derzeit noch keine bessere umsetzenn Big Grin <=

Vorüberlegungen:
Wir haben eine Datei, die nennen wir mal menue.html das ist unser Menü Wink und dieses Menü hat 3 Obermenüpunkte zB Sport, Musik und Internet mit jeweils 5 Links darin.. die könnt ihr einfach durchnummerieren oder so.. sie müssen ja im prinzip auch nicht gehen Wink ist ja nur zum testen
Die Obermenüpunkte bekommen jeweils HTML Seiten in denen sich die unterpunkte befinden. Also
eine HTML Seite
Sport eine für musik und eine für internet (oder wie uach immer ihr die scahen nennen wollt) ich hab sie einfach mal musik.htm, sport.htm und internet.htm genannt =) und sie sind alle gleich aufgebaut. Einfach nur Links Smile also zB <a href="#">Link1</a> usw usw Wink (weiter unten kommen wir acuh darauf wie man die links in eineiner eigenen div läd ;D )

So das herzstück ist ja nun die datei menü.html =)
Code:
<html>
    <head>
        <title>Meine ersten Ajax Erfahrungen</title>
<script type="text/javascript">
         <!--    
             function dateiLaden(datei){
            
                 var req = null;

                try{
                    req = new XMLHttpRequest();
                }
                catch (ms){
                    try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (nonms){
                        try{
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (failed){
                            req = null;
                        }
                    }  
                }

                if (req == null)
                      alert("Error creating request object!");
                  
            
                  req.open("GET", datei, true);

                req.onreadystatechange = function(){            
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status);
                            }else{    
                                
                                document.getElementById('eins').innerHTML = datei+':<br><strong>'+
                                                                        req.responseText
                                                                        +'</strong>';
                            }
                            break;
                    
                            default:
                                return false;
                            break;    
                        }
                    };
  
                  req.setRequestHeader("Content-Type",
                                      "application/x-www-form-urlencoded");
                req.send(null);
            }
            
         //-->
        </script>
    </head>
    <body>
<div style="width: 150px; position:absolute; top: 20px; left: 20px; background-color:#FFFF66;">
<a href="javascript:dateiLaden('sport.htm')">Sport</a><br>
<a href="javascript:dateiLaden('musik.htm')">Musik</a><br>
<a href="javascript:dateiLaden('internet.htm')">Internet</a><br>

</div>
<div id="eins" style="width: 150px; position: absolute; top: 70px; left:20px; background-color:#336699; ">

</div>

    </body>
</html>

ich find diese Art von Menü sehr viel übersichtlicher (wenn auc einfacher und man bruacht mehr dateien.. Undecided aber die lösung kommt bestimmt bald Big Grin) als die üblichen Javascript menüs Wink ich bin grade dabei auf meiner HP etwas ähnliches als "Newsübersicht" zu programmieren Wink ich zeig euch später das Ergebnis =)
Mein Blog
Facebook
Twitter

Ich freue mich immer über Nachrichten. Falls ihr über einen Facebookaccount verfügt, ist ratsamer mich darüber zu kontaktieren, weil ich diese Nachrichten i.d.R. schneller beantworte.
  Zitieren


Nachrichten in diesem Thema
Ajax - von Mashoo - 06.04.2007, 20:36
[Kein Betreff] - von Mashoo - 06.04.2007, 23:06
[Kein Betreff] - von Mashoo - 07.04.2007, 11:13
[Kein Betreff] - von pattex - 05.05.2007, 17:08
[Kein Betreff] - von KingGO - 06.05.2007, 03:50
[Kein Betreff] - von Mashoo - 06.05.2007, 10:35
[Kein Betreff] - von pattex - 06.05.2007, 16:02
[Kein Betreff] - von KingGO - 06.05.2007, 17:10
[Kein Betreff] - von pattex - 06.05.2007, 17:16
[Kein Betreff] - von KingGO - 06.05.2007, 17:19
[Kein Betreff] - von pattex - 06.05.2007, 17:25
[Kein Betreff] - von KingGO - 06.05.2007, 17:28
[Kein Betreff] - von pattex - 06.05.2007, 17:43
[Kein Betreff] - von KingGO - 06.05.2007, 20:47
[Kein Betreff] - von Mashoo - 07.05.2007, 07:47
[Kein Betreff] - von pattex - 07.05.2007, 15:10
[Kein Betreff] - von Mashoo - 07.05.2007, 17:34
[Kein Betreff] - von CuleX - 08.05.2007, 14:46

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 4 Gast/Gäste