Nun habe ich doch noch einen "Fehler" in meiner Ajax-Klasse gefunden. In meiner Web-Applikation kann der Benutzer in mehreren Inputfeldern Daten Filtern, die dann in einem Dix-Container ausgegeben werden. Mit einem listener auf den Felder wird überprüft, ob etwas eingegeben wurde und sobald dies der Fall ist, wird mittels Ajax die PHP-Datei aufgerufen und die Daten in den Container geschrieben. Soweit so gut, das hat mit der alte Klasse auch recht gut geklappt. Allerdings ist es ja so, dass je mehr Daten der Benutzer eingab, desto weniger Daten musste die PHP-Datei zurückgeben. Mehr Filterdaten=Weniger Daten.
Das bedeutet aber auch, dass die Requests die anfangs gestartet werden länger dauern als die die später gestartet werden. Nun kann es also sein (wenn der Benutzer schnell ist), dass zuerst ein Request gestartet wird, bei welchem eine grosse Datenmenge zurück kommt. In der Zwischenzeit wird ein nächster Request, vom selben Benutzer in derselben Session ein neuer Request mit mehr Filter-Daten gestartet, bei welchem weniger Daten zurückkommen. Dieser wird natürlich von PHP schneller abgearbeitet und wird auch schneller zum Browser übertragen. So werden diese Daten schön im Div-Container angezeigt. Soweit so gut, das Problem ist nun allerdings, dass noch der andere Request mit der grösseren Datenmenge läuft und sobald der fertig ist, werden die Daten angezeigt. Also die alten, die der Benutzer gar nicht sehen will.
Das bedeutet nun also, dass sobald ein neuer Request gestartet wird, der alte, noch laufende, abgebrochen werden soll. Allerdings sollen aber trotzdem mehre Requests paralell laufen können.

Das bedeutet, dass pro Objekt ein Request aufs mal laufen soll, aber man soll mehrere Objekte erstellen können, die dann paralell laufen können.

In meiner Lösung erstellt man nun als erstes eine Referenz zu einem Objekt in welchem ein XMLHttp Objekt erstellt wird. Wenn nun ein Request gestartet werden soll, ruft man die Methode start() mit URL, und ID des Ziels auf. Sobald ein neuer Request mit demselben Objekt gestartet wird, wird der alte abgebrochen.

ajax=new XMLHttp;
ajax.start("ajax.php?param=test","feld");

Weitere Requests können dann so gestartet werden:

ajax.start("ajax.php?param=blub","feld");

Und auch mehrere paralelle Requests sind kein Problem:

ajax1=new XMLHttp;
ajax2=XMLHttp;

ajax1.start("ajax.php?param=ajax1","feld1");
ajax2.start("ajax.php?param=ajax2","feld2");

Und die ganze Klasse sieht dann so aus:

// Objekt XMLHttp
// Param url: Url der aufzurufenden Datei
// Param dst: ID des HTML-Elements
XMLHttp=function()
{
    // Den Browsertyp auslesen
    var browser=navigator.appName;
    var obj=this;

    if(browser=="Microsoft Internet Explorer")             // IE
    {
        var http=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else                                                   // Mozilla, Safari, Opera, usw.
    {
        var http=new XMLHttpRequest();
    }

    obj.start=function(url,dst)
    {
        // bereits laufende requests abbrechen
        http.abort();

        obj.dst=dst;

        // HTTP-Request senden
        // Parameter url als Adresse
        http.open("GET",url,true);

        // Wenn Status geaendert wurde
        http.onreadystatechange=function()
        {
            // ueberpruefen, ob daten gesendet wurden
            // readystate 4 = complete
            if(http.readyState==4)
            {
                // ueberpruefen, ob status vom server richtig ist
                // status 200 = OK
                if(http.status==200)
                {
                    // Antwort vom Server in HTML-Element schreiben
                    // dst als ID
                    document.getElementById(obj.dst).innerHTML=http.responseText;
                }
                else if(http.status!=0)
                {
                    // HTTP Fehlercode zurückgeben
                    document.getElementById(obj.dst).innerHTML="Fehler:\nHTTP-Status: "+http.status+"\nHTTP-Statustext: "+http.statusText;
                }
            }
        }

        http.send(null);
    }
}

Ich habe vor ca zwei Jahren bereits einen kleinen Beitrag über Ajax geschrieben und muss das nun für ein Projekt im Geschäft neu aufrollen. Mit etwas OOP habe ich eine Ajax-Klasse geschrieben, die die Daten vom Server abholt und in ein beliebiges HTML-Element einfügt.
Mit dieser Klasse sind auch mehrere paralelle Anfragen möglich und das ganze funktioniert im Firefox, IE und Opera. Andere Browser habe ich (noch) nicht getestet. Die Klasse erwartet den Parameter Url (die Adresse die aufgerufen werden soll) und Dst (die ID des HTML-Elements für die Ausgabe). Mit einigen Veränderungen kann die Klasse die Daten vom Server auch anderst ausgeben und natürlich kann man das noch beliebig erweitert (Lade-Bilder usw.).

// Objekt XMLHttp
// Param url: Url der aufzurufenden Datei
// Param dst: ID des HTML-Elements
XMLHttp=function(url,dst)
{
    // Den Browsertyp auslesen
    var browser=navigator.appName;

    if(browser=="Microsoft Internet Explorer")             // IE
    {
        var http=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else                                                   // Mozilla, Safari, Opera, usw.
    {
        var http=new XMLHttpRequest();
    }

    // HTTP-Request senden
    // Parameter url als Adresse
    http.open("GET",url,true);

    // Wenn Status geaendert wurde
    http.onreadystatechange=function()
    {
        // ueberpruefen, ob daten gesendet wurden
        // readystate 4 = complete
        if(http.readyState==4)
        {
            // ueberpruefen, ob status vom server richtig ist
            // status 200 = OK
            if(http.status==200)
            {
                // Antwort vom Server in HTML-Element schreiben
                // dst als ID
                document.getElementById(dst).innerHTML=http.responseText;
            }
            else
            {
                // HTTP Fehlercode zurückgeben
                alert("Fehler:\nHTTP-Status: "+http.status+"\nHTTP-Statustext: "+http.statusText);
            }
        }
    }
    http.send(null);
}

Das ganze wird nun folgendermassen aufgerufen. Hier wird die Adresse ajax.php?param=test angefragt und die Anwort vom Server wird in das HTML-Element (div/span/p/usw..) geschrieben.

ajaxObj=new XMLHttp("ajax.php?param=test","feld");

Noch ein kleiner, zweiter Teil zu OOP mit JavaScript. Und zwar möchte ich kurz erklären, wie es mit Prototypen möglich ist nachträglich noch Variablen und Methoden zu einem Objekt hinzuzufügen.

Beispiel

Zuerst habe ich hier ein kleines Objekt, welches als Basis des Beispiels dient. Darin hat es eine Variable und eine Methode, die beide Public sind.

// Das Objekt (Klasse) erstellen
meinObjekt=function()
{
    // Eine Variable erstellen
    this.variable="Variable";
    
    // Eine Methode
    this.methode=function()
    {
        alert("Methode");
    }

    return true;
}

Variabeln / Methoden hinzufügen

Nun kann man dem bestehenden Objekt (oder einer Referenz) mit dem Stichwort Prototype neune Variabeln oder Mehthoden hinzufügen. Diese sind dann immer Public, also von überall verfügbar. Das sieht dann so aus:

// Eine neue Variable hinzufuegen
meinObjekt.prototype.neueVariable="Eine neue Variable";

// Eine neue Methode hinzufuegen
meinObjekt.prototype.neueMethode=function()
{
    alert(this.neueVariable);
}

Variabeln / Methoden aufrufen

Um auf die neuen Variabel oder Methoden zuzugreifen erstellt man wie übliche eine Referenz und hat sie nun ganz nortmal zur Verfügung.

// Referenz erstellen
var obj=new meinObjekt;

// Ausgabe der Variable
alert(obj.neueVariable);

// Aufruf der Methode
obj.neueMethode();

Ich bin gerade wieder an unserer kleinen Inhouse-Webaplikation am Arbeiten und versuche meine Ajax-Funktion zu verbessern, da das langsam aber sicher ein kleines Chaos wird. Bei Recherechen im Internet bin ich wieder auf die OOP-Möglichkeiten von JavaScript gestossen. Ob JavaScript nun wirklich Objekt-Orientiert oder nur -Basiert ist will ich hier aussen vor lassen, das tut nichts zu Sache. Ich möchte an dieser Stelle nur die wichtigsten Dinge notieren, in der Hoffnung, dass jemand anders, oder ich in einiger Zeit damit etwas weiter kommt. Möglicherweise gibts dann noch einen zweiten Teil dazu.

Ein Objekt erzeugen

Mit JavaScript hat man die Möglichkeit ein Objekt zu erstellen und diesem dann im Nachhinein Eigeschaften (Variabeln) und Methoden (Funktionen) hinzuzufügen. Dies hat aber den Nachteil, dass man die Eigenschaften/Methoden jedem Objekt hinzufügen muss. Von dem her ist das eine weniger praktikable Lösung.

// Ein Objekt erzeugen
var obj=new Object();

// Eine Eigenschaft definieren
obj.eigenschaft="Inhalt";

// Eine Methode definieren
obj.methode=function() 
{
    alert(obj.eigenschaft);
}

// Die Methode aufrufen
obj.methode();

Eine Referenz erstellen

Die bessere Lösung ist es eine Klasse zu erstellen und danach eine Referenz zu diesem Objekt zu machen. In JavaScript gibt es allerdings keine Klassen, so muss man eine Funktion nehmen. Mit new erstellt man dann die Refernz.

// Eine Funktion erstellen
function meinObjekt()
{
    ...
}

// Eine Referenz zum Objekt erstellen
var obj=new meinObjekt();

Variabeln: Privat und Public

Auch in JavaScript hat man die Möglichkeit zu definieren, ob eine Variable Public, oder Private ist. Auf Variabeln die Public sind, kann auch von ausserhalb des Objekts zugegriffen werden, auf private allerdings nicht. Um eine Variable zu erstellen die Public ist muss man this. davorstellen.

// Das Objekt (Klasse) erstellen
meinObjekt=function()
{
    // Eine "Public" Variable erstellen
    this.public="Public";
    
    // Eine Private Variable erstellen
    var privat="Privat";

    return true;
}

// Die Referenz erstellen
var klasse=new klasse();

alert(klasse.public);        // Gibt "Public" zurueck
alert(klasse.privat);        // Gibt "undefined" zurueck

Methoden: Privat und Public

Bei Methoden sieht das ganz ähnlich aus wie bei den Variabeln, auch hier kann man Methoden erstellen die Public oder eben Privat sind.

// Das Objekt (Klasse) erstellen
meinObjekt=function()
{
    // Eine "Public" Methode erstellen
    this.public=function()
    {
        alert("Public");
    }
    
    // Eine Private Methode erstellen
    privat=function()
    {
        alert("Privat");
    }

    return true;
}

// Die Referenz erstellen
var klasse=new klasse();

klasse.public();             // Gibt "Public" zurück
klasse.privat();             // Gibt nichts zurück

So, das war mal ein kleiner Exkurs in die OOP-Möglichkleiten von JavaScript. Es gibt da noch eine andere Funktionen, die ich wohl spätzer noch genauer erläutern werde.

Ein in meiner Meinung guter Film, der die Funktion des Internets einfach und lustig erklärt.
Vielen Informatikern sicher schon bekannt, aber sicher mal wieder lustig.

Über Robert Basic bin ich auf eine interessante Kalederlösung gestossen.
Momentan leider noch in der Beta, aber es sieht sehr vielversprechend aus.

Aber seht selbst:

Edit:
mehr gibts natürlich auf der offiziellen Homepage

Ich bin beim Surfen auf einen SQL - Designer gestossen. Er läuft im Browser und benötigt PHP.
Es ist möglich die Daten aus einer Datenbank oder einer XML Datei zu importieren und das ganze dann auch wieder direkt in eine Datenbank, eine XML oder SQL Datei zu exportieren.
Die Installation ist ganz einfach: Die Daten in einen Ordner im htdocs kopieren und dann über den Browser aufrufen.

Zu finden ist er hier: WWW SQL Designer