Ajax

[Mashoo]

Hey leute!

Ich fange grade mit Ajax an.
Aus der Vergangenheit weiß ich, dass man oft sehr viel intensiver und erfolgreicher lernen kann wenn man das gelernte gleich reproduziert
deswegen dieses kleine Tutorial.
(copyright liegt bei chaim dönnewald - bei verwendung bitte angeben danke)
Es soll zum einen andern - die sich auch mit Ajax beschäftigen - die möglichkeit geben, einen Einblick u gewinnen und mir selbst abei helfen das gelernte zu verinnerlichen.

Ich habe mir vorgenommen regelmässig ein bisschen Ajax zu lernen (vielleicht schaffe ich es ja täglich) und hier meine fortschritte in tutorialform zu dokumentieren.

WEnn sich außer mir auch jemand mit Ajax beschäftigt, würde ich micht echt freuen wenn ihr eurer wissen hier beisteuret
so und nun los
Lektion 1 8)

1. Was ist Ajax?
Ich hasse ja eigentlich solche Einleitung aber na ja ein bisschn "Theoriewissen" sollte vielleiht auch ab und an sein Ajax ist eine abkürzung für
* Asyncronous
* JavaScript
* and
* XML

Ajax stellt eine Kombination aus länger existierenden Technologien da. JavaScript wird benutzt um im Browser des Client eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde, wird eine Funktion beim Client ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingen, es kann auch eine Codierung als simpler Text erfolgen. XML bietet sich aber an um einen standardisierten Mechanismus zum parsen von Daten zu haben.

Wie oben bereits erwähnt, führt der Server etwas aus und sendet eine Antwort als XML Dokument. Die Implementierung auf der Serverseite kann in einer beliebigen Programmier oder Skriptsprache realisiert werden. In diesem Tutorial und den Schaubildern verwende ich jedoch PHP als serverseitige Skriptsprache.

Da die Anforderung vom Browser des Benutzers über JavaScript ausgelöst wird und mit JavaScript auch die Verarbeitung der Antwort erfolgt, ist kein Reload der Webseite notwendig. In modernen Webandwendungen wird diese Technologie gerne benutzt, um ein ähnliche Verhalten der Anwendung wie bei einer herkömlichen Desktopanwendung zu realisieren.

Da ein gewisser Teil des Codes von Ajax Anwendungen immer ähnlich ist, gibt es im Internet einige Frameworks die die Programmierung von Ajax Anwendungen erleichtern wollen.

(Quelle: http://www.admin-wissen.de/tutorials/eig...g-in-ajax/)

Hier habe ich ein ein Beispiel auf englisch gefunden: http://www.sematopia.com/?p=34

Dieses wollte ich nun genauer erklären
(es wird darauf hingewiesen, dass das Beispiel nur im firefox geht... laut drweb.de soll es aber auch im IE geben, wenn man javascript anpasst)

zum testen hab ich das ganze mal hier installiert:
http://www.kayela.de/ajax

Wir ihr seht, sind auf der Seite 2 verschiedene Arten darsgestellt um zwei Zahlen miteinder zu multiplizieren.

Die klassische Methode mit PHP

-> Beide zahlen werden innerhalb einer Funktion miteinander multipliziert und das ergebnis im nebenstehenden feld angezeigt

Die Ajaxmethode:
im prinzip das selbe, der unterschied die webseite muss nicht neu geladen werden !!!

So gehen wir mal den Code durch

Die index.php Datei.

[code=php]
include("ajaxClass.php");

$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();

echo $objSem->result;
[/code]

Die Klasse ajaxClass.php wird geladen.

(Der Rest der Index.php steht etwas weiter unten)

Nun kommt ein wenig OOP Objekt orientierte Programmierung
Eine neue Instanz der Klasse Ajax wird erzeugt und die beiden funktionen readURLParameters(); und staticExample(); werden bearbeitet. am ende wird das ergebnis ausgegeben.

So die Funktionen findet ihr wo?
Natürlich in der ajaxClass.php

hier der Code:
[code=php]<?php

class ajax {

var $queryParam = array();
var $result = 0;
var $num1 = 0;
var $num2 = 0;

function readURLParameters() {
$qstr = explode("&", $_SERVER['QUERY_STRING']);
foreach ($qstr as $value) {
$paramVal = explode("=",$value);
if (array_key_exists(1,$paramVal)) {
$this->queryParam[$paramVal[0]] = $paramVal[1];
}
}
}

function staticExample() {
if (array_key_exists("num1",$this->queryParam) & array_key_exists("num2",$this->queryParam)) {
$this->result = $this->queryParam["num1"] * $this->queryParam["num2"];
$this->num1 = $this->queryParam["num1"];
$this->num2 = $this->queryParam["num2"];
}
}

}
?>[/code]

Sooo dann gehen wir mal schritt für schritt durch

Also erstmal hier findet ihr die beiden Funktionen die erste liest die Parameter aus der URL aus

--> Bei der Abfragae über das PHP Beispiel werden die eingegebenen Werte in die URL übertragen, diese müssen dann noch vom Skript wieder aus der URL ausgelesen werden um verarbeitet werden zu können! Dies tut diese Funktion!
Ich werde jetzt nicht näher auf diese Funktion eingehen, weil es sich dabei nur um PHP handelt

Funktion 2
staticExample

wie dr Name schon sagt, ist sie für das Standard Beispiel zuständig, also das Beispiel mit PHP
hier brauch ich wohl auch nicht näher drauf eingehen? Im Prinzip multipliziert sie nur auf klassischem wege also zahl1 * zahl2 und speichert das ergebnis in einer neuen Variable

so um nochmal auf die Index.php zurück zu kommen
der restliche code

Code:

<html>
<script src="ajax.js" type="text/javascript"></script>
<body>
<br><br>
<p>AJAX Example:</p>
<form name="form1" action="" onsubmit="return ajax_call()">
    <input type="text" name="num1" id="num1"></input> *
    <input type="text" name="num2" id="num2"></input> =
    <input type="text" name="result" id="result"></input>
    <br><br>
    <input type="submit" name="semajax" value="AJAX"></input>
</form>
<!-- -->
<br><br>
<p>Standard Example:</p>
<form name="form1" action="index.php">
    <input type="text" name="num1" id="num1" value=<? echo $objSem->num1 ?>></input> *
    <input type="text" name="num2" id="num2" value=<? echo $objSem->num2 ?>></input> =
    <input type="text" name="result" id="result" value=<? echo $objSem->result ?>></input>
    <br><br>
    <input type="submit" name="semajax" value="Standard"></input>
</form>
</body>
</html>

Das meiste ist ja üblicher HTMl Code dürfte also nicht so schwer sein
wichtig ist:
Die ajax.js Datei wird geladen
Es werden zwei formulare erstellt (im PHP Formular werden die eingegeben werte - sofern vorhanden - als standardwerte eingetragen)

und:
Das Standardformular schickt die Eingaben an die Seite !
Deswegen wird die Page neu geladen !
Das Ajax Formular hingegen sendet die Eingaben an die Funktion return ajax_call()

Die eigentliche Ajax datei
hier die ajax.js

Code:

var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

function ajax_call() {
    xmlhttp.open("GET", 'ajaxWork.php?num1=' +
                    document.getElementById('num1').value +
                        '&num2=' + document.getElementById('num2').value , true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            document.getElementById('result').value = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null)
    return false;
}

Ok wahrscheinlich gehts euch so wie mir und das ganze sieht auf den ersten Blick zwar irgendwie vertraut (Die Syntax kennt man ja auch Javascript) aber dennoch verwirrend aus
deswegen eins nach dem anderen

Zuerst wird die Variable var xmlhttp auf false gesetzt
ich hab dann auch gleich mal gegoogled und folgendes ist heraus gekommen 8)
http://de.wikipedia.org/wiki/XMLHttpRequest

Hier wird erklärt worum es geht
ich fasse mal eben zusammen

XMLHttpRequest ermöglicht einem Skript einer Webseite, Daten dynamisch vom Webserver abzurufen, ohne dass dazu die Seite neu geladen werden müsste

Das haben wir ja in unserem Beispiel

Da XMLHttpRequest Anfragen asynchron verarbeiten kann, muss ein Script nicht warten, bis die Anfrage beantwortet ist, sondern kann solange andere Aufgaben abarbeiten.

Da spart man ja richtig Zeit

Trotz der guten Verfügbarkeit der API in neueren Browsern wird an ihr auch Kritik geübt, da es schwierig ist, Webseiten, die XMLHttpRequest einsetzen, auch älteren Browsern in vollem Umfang zugänglich zu machen. (...) Ein weiterer Kritikpunkt ist, dass sich Web-Anwendungen, die auf XMLHttpRequest setzen, nur schwer barrierefrei umsetzen lassen.

Aus meiner Sicht beides nicht unwichtige Kritikpunkte. Bei Punkt eins sage ich mal: Es kommt auf die Zielgruppe an, wenn man Ajax auf einer Tutorialpage o.ä. anwenden will kannman eigentlich davon ausgehen, dass die Besuhcer über neuere Browser etc verfügen...

Code:

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

Wenn also die Variable xmlhttp leer ist und XMLHttpRequest noch nicht definiert wurden:

Wird der Variable xmthttp eine neue instanz der klasse XMLHttPRequest zugeteilt.
Dabei handelt es sich um eine vorgefertigte klasse (müsste so sein oder?)
Wenn ich das richtig verstanden habe ist ja XMLHttpRequest die Anfrage die an das Skript gesendet wurde, also speichert die Variable xmlhttp nun alle eingaben

Code:

function ajax_call() {
    xmlhttp.open("GET", 'ajaxWork.php?num1=' +
                    document.getElementById('num1').value +
                        '&num2=' + document.getElementById('num2').value , true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            document.getElementById('result').value = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null)
    return false;
}

Hier nun endlich das Herzstück der Arbeit
Die Funktion ajax_call

1. Sie öffnet aus der Variablen xmlhttp (die ja die Anfrage speichert) die Werte aus dem Formular die sich in den Feldern num1 und num2 und multipliziert sie miteinander
2. "onreadystatechange"

Dazu:

An dieser Stelle muss man dem HTTP Request-Objekt lediglich mitteilen, welche JavaScript-Funktion die Antwort abarbeiten soll. Dies erreicht man, indem man die onreadystatechange-Eigenschaft des Objektes genauso nennt wie die JavaScript-Funktion, welche man benutzen möchte (...)

(http://developer.mozilla.org/de/docs/AJA...ng_Started)

Dieser teil hier if (xmlhttp.readyState==4) { prüft ob die xmlhttp überhaupt VOLLSTÄNDIG ist (siehe dazu einfach wieder http://developer.mozilla.org/de/docs/AJA...ng_Started )
Wenn alles klappt sendet er danach alles wieder an das Formular dabei ird der wert von "result" auf das ergebnis gesetzt

und vóila


so und das war vielleicht etwas trocken.... deswegen kommt im nächsten beitrag etwas selbst erprobtes




Kommentare, Fragen, Korrekture, Ergänzungen?

[Mashoo]

So nun Teil 2
Ein kleines Beispiel
dieses basiert auf den erfahrungen die ich hier: http://developer.mozilla.org/de/docs/AJA...ng_Started gesammelt habe

In dem Beispiel möchte ich ein HTML Dokument auslesen und den Inhalt in einem Alert wiedergeben.

Was müssen wir also tun?
Wir erstellen auf jedenfall schonmal eine Funktion, die den Inhalt aus der Datei ausliest
und eine weitere Funktion, die diesen Inhalt in das Fensterchen schreibt
Über einen Link, button oder auch unaufgefordert wird der alert dann geöffnet.

Wir brauchen also diesmal
* Ein ganz normales HTML Dokument
* Ein html dokument (z.b. test.html) mit dem Text der aufgerufen werden soll - legt dieses dokument im selben verzeichnis ab wie das skript oder gleicht den link im funktionsaufruf an

Im Headbereich arbeiten wir mit Javascript:

Zuerst setzen wir http_request auf false!

---> Was st das nochmal?

Später implementierten Mozilla, Safari und andere Browser eine Klasse namens XMLHttpRequest, welche die Methoden und Eigenschaften des originalen ActiveX-Objektes von Microsoft unterstützt.

(http://developer.mozilla.org/de/docs/AJA...ng_Started)
In der Variable wird also später gespeichert um welches "objekt" es sich handlt.. damit es nicht zu problemen mit verschiedenen Browsern kommt.

Code:

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

Zuerst haben wir die Variable http_request auf false gesetzt, damit sie leer ist - so können wir sie danach mit dem inhalt füllen, den wir benötigen

Hier wird eine Abfrage durchgeführt, die überprüft welcher Browser verwendet wird.
Wird das XMLHttpRequest verwendet, handelt es sich um Mozilla, Safari etc etc etc. Falls wirklich jemand das ActiveXObject verwendet muss er ein IE User sein (steinigt ihn, nein spaß )

Hierzu ein kleiner Exkurs

http://kayela.de/ajax/beispiel1.htm

Eine kleine Abfrage ob man einen Ie hat... ich konnte sie lleider bisher nur im Firefox testen, deswegen würde ich mich freuen wenn sich ein paar IE Nutzer nicht angegriffen fühlen, sondern auch mal testen danke

hier der Code mit erklärung

Code:

<script type="text/javascript" language="javascript">

var http_request = false;

function browser() {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');

alert('Nein hast du nicht :D');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
alert('ja..... auf zur steinigung');
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
alert('ja..... auf zur steinigung');
} catch (e) {}
}
}



}
</script>

<font onclick="browser()">Habe ich einen Internet Explorer?</font>

Es gibt eine Funktion sie heißt.... (wär hätts gedacht) BROWSER

Hier wird die Abfrage gestartet die ich schon oben erwähnt hatte
Wenn sie als Ergebnis ergibt, dass der User IE nutzt, gibt sie einen Alert aus, der ihm das sagt
Nutzt er einen anderen Browser bekommt der User den Alert, dass er keinen IE nutzt.

Die ganze Funktion wird über onclick aufgerufen.
Das ganze geht auch mit einem normalen Link

Code:

<a href="javascript:browser();">Test mit link</a>

hierbei ist zu beachten, dass man bei href noch JAVASCRIPT erwähnen muss =)


So nun wieder zurück zum Topic

Wenn wir abgefragt haben, welcher Browser verwendet wird und das Objekt, as verwendet wir in http_request gespeichert wurde, machen wir eine kleine Fehlermeldung für den Fall, dass der Browser nicht erkannt wurde oder ähnliches.
Wir prüfen ob http_request IMMERNOCH leer ist (wir haben die Variable ja vor der abfrage auf false gesetzt. Bei der Abfrage wurde sie - wenn alles geklappt hat - mit einem bestimmten wert gefüllt)

Code:

if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
http_request.onreadystatechange = alertInhalt;
http_request.open('GET', url, true);
http_request.send(null);

Also if(!http_request) { // ist die variable leer?
wenn ja wird eine Fehlermeldung zurückgegeben

Wenn dieser Teil abgeareitet wurde, werden die Sachen, die wir schon erarbeitet hatten in der Funktion alert gespeichert
siehe dazu uach hier:

http_request.onreadystatechange = nameDerFunktion;

Es ist zu beachten, dass nach dem Funktionsnamen keine Klammern auftauchen und der Funktion keine Parameter übergeben werden. Des weiteren kann man anstelle der Angabe eines Funktionsnamens die Funktion "on the fly" definieren (...)

Danach muss der Request wieder abgesetzt werden

(...)Dazu ruft man die Methoden open() und send() der HTTP-Request Klasse auf (...)

Code:

http_request.open('GET', url, true);
http_request.send(null);

So und nun kommen wir zur zweiten Funktion!
die alertinhalt ()

Code:

function alertInhalt() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Bei dem Request ist ein Problem aufgetreten.');
}
}

}

so und zur guter letzt müssen wir das ganze noch aufrufen ich denk mal das schafft ihr auch ohne weitere erkklärungen ich habs ja oben schonma beschrieben

Hier der gesamte Code:

Code:

<script type="text/javascript" language="javascript">

var http_request = false;

function macheRequest(url) {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
http_request.onreadystatechange = alertInhalt;
http_request.open('GET', url, true);
http_request.send(null);

}

function alertInhalt() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Bei dem Request ist ein Problem aufgetreten.');
}
}

}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="macheRequest('test.html')">Einen Request absetzen
</span>

Anmerkung: bei mir funktioniert nur online ! Ich weiß aber nicht ob es an mir liegt oder am skript... wenn jemand anders es schafft das ding offline zum laufen zu bringen würd ich mich über ne meldung freuen danke

Die Zitate stammen alle von http://developer.mozilla.org/de/docs/AJA...ng_Started

[Mashoo]

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
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 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 =)

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 =)

[pattex]

Dann möchte ich mich mal ganz herzlich für dieses Tutorial bedanken. Bin gerade dabei ein Script mit Einsatz von Ajax zu programmieren (natürlich um up-to-date zu bleiben ) und finde Ajax echt schön.
Leider kann ich kaum java Script aber ich denke das wird sich ändern wenn ich mich weiter damit beschäftige.

[KingGO]

wau echt geil das wollt ich mir auch mal vornehmen zu lernen =)

Super wenn du das jetzt lernst und uns damit beibringst

hab mich ma an nen chat versucht mit ajax =)
aber der lief relativ buggy ^^ aber die möglichkeiten sind natürlich genial. :heiligen:

[Mashoo]

Hallo Leute!

Endlich antwortet mal jemand :party:
ich bin leider aus zeitgründen noch ncit wieder dazu gekommen am tutorial weiter u screiben mache es aber bald


Gestern habe ich auch etwas mit Ajax und php programmiert ein kleines rating skript. Was ich daran so super fand war, dass ich das rating abgeschickt habe und es auch in die datenbank eingetragen wurde, OHNE dass die seite neu geladen wurde !!!

[pattex]

Das war wieder typisch. Ich saß stundenlang dran weil ich:

Ein Formular welches über MySQL Werte ausliest. Diese kann man dann per Radiobutton auswählen. Per Ajax rufe ich ein Script auf welches dann aus der Datenbank neue Einträge ausliest für die 2. Box darunter.
Nur ich wusste nicht wie man radiobuttons anspricht :-!
Lösung gabs dann per google *g*

Eigentlich ist das totale Spielerei, es sieht aber cool aus :yipie:

Den Rest des Scriptes mache ich ohne Ajax. Da bin ich in der hälfte der Zeit fertig

[KingGO]

ich find ajax wirklich gut daa es echt lässtige zeit spart mit diesen refreshes...

das wbb3 hat ja gottseidank auch etwas ajax abbekommen beim moderiern

[pattex]

Das moderieren beim WBB3 ist total super gelöst finde ich. Da merkt man gar nicht mehr die Grenzen des Browsers bzw. der Forenkategorie. Bis ich das Ajax verstehe dauert es wohl noch ne Weile. Bin aber mit meinem bisherigen Ergebnis recht zufrieden

Jetzt muss ich nur noch schauen wie ich die Seite für die User ohne JS anzeigen lasse. Gibts da was in php? Also irgendwie eine überprüfung bräuchte ich ob JS an oder eben nicht.

[KingGO]

du meinst nen hinweiß ey user mach dein java an oder was