07.04.2007, 11:13
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:
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
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
=> 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 =)
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:
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
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
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
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:
und hier der von test3.htm
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
Deswegen habe ich mich für ein kleines Menü entschieden
=> Es gibt mit sicherheit bessere und einfachere lösungen um ein menü zu realisieren nur leider kann ich derzeit noch keine bessere umsetzenn
<=
Vorüberlegungen:
Wir haben eine Datei, die nennen wir mal menue.html das ist unser Menü 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 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 also zB <a href="#">Link1</a> usw usw (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 =)
ich find diese Art von Menü sehr viel übersichtlicher (wenn auc einfacher und man bruacht mehr dateien..
aber die lösung kommt bestimmt bald ) als die üblichen Javascript menüs ich bin grade dabei auf meiner HP etwas ähnliches als "Newsübersicht" zu programmieren ich zeig euch später das Ergebnis =)
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
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
=> 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
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
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
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
Deswegen habe ich mich für ein kleines Menü entschieden
=> Es gibt mit sicherheit bessere und einfachere lösungen um ein menü zu realisieren nur leider kann ich derzeit noch keine bessere umsetzenn
<=Vorüberlegungen:
Wir haben eine Datei, die nennen wir mal menue.html das ist unser Menü
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 ist ja nur zum testenDie 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
also zB <a href="#">Link1</a> usw usw (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..
aber die lösung kommt bestimmt bald ) als die üblichen Javascript menüs ich bin grade dabei auf meiner HP etwas ähnliches als "Newsübersicht" zu programmieren ich zeig euch später das Ergebnis =)