[auerhahn]

Ich suche auf diesen Wege Literatur zu AJAX.
Am Besten von Anfang an mit Grundlagen usw. mit einfachen Beispielen zum leichten Einstieg in die Materie.
Ich habe schon gegoogelt, aber noch nichts einfaches gefunden.

Danke schonmal im Voraus

[xardias]

Welche Kenntnisse sind denn schon vorhanden? Wenn du dich bereits mit Javascript/HTML/Serverseitigen Sprachen auskennst ist da denke ich ein Buch nicht nötig. Da sollte ein AJAX Tutorial reichen.
Wenn du noch nicht mit Javascript gearbeitet hast wäre ein Blick nach amazon nicht verkehrt glaube ich.

Direkte Empfehlungen kann ich dir nicht geben, da ich keine Javascript Bücher gelesen habe.

[Alberto]

Hu,

Zwar ein Video Training, aber ich fands gut als Einstieg und zur Kenntniserweiterung.

JavaScript und AJAX

LG
Alberto

[auerhahn]

Ok danke. Ich glaube ich befasse mich nochmal intensiver mit Javascript, da verstehe ich einige Sachen nicht so ganz... bzw. davon hab ich noch nie was gehört. Böse Falle

[Neq']

Zitat von auerhahn

Ok danke. Ich glaube ich befasse mich nochmal intensiver mit Javascript, da verstehe ich einige Sachen nicht so ganz... bzw. davon hab ich noch nie was gehört. Böse Falle

Wenn du dich spielend in AJAX einarbeitest, kommst du auch auf ziemlich "kniffige" Syntaxspielereien von ganz alleine darauf. Je nachdem, welches Tutorial du verwendest, wirst du auf Function Expressions, Object Literals usw. treffen, dies wird dir auch eine Menge an Wissen über JavaScript vermitteln.

[Jann Hendrik]

Ich denke, dass du dir auch Gedanken machen solltest, ob du das alles alleine programmieren willst, oder ob du auf ein framework zurückgreifen willst.

Dann wäre es nämlich durchaus sinnvoll gleich eine literarische Quelle, die das berücksichtigt zu benutzen.

[auerhahn]

Framework? Verstehe ich nicht ganz. Wie? Wozu? Sorry davon hab ich noch nie was gehört.

Na davon mal abgesehen. Eine Frage hätte ich dann noch zu der ganzen Sache.
Ich habe mir jetzt das Büchlein und die Tutorials aus dem Internet mal reingezogen und für mich Stück für Stück auseinandergenommen um erst mal zu raffen wie alles abläuft.
Nun habe ich mir ein kleines Script gemacht, weil ich mal probieren wollte ob und wie alles geht. Ich kann nun aber nicht schauen ob Daten übertragen werden und sich die Seite irgendwie ändert.
Ich welche Seite oder Teile der Hauptseite, welche ich ja ursprünglich mit Frames machen wollte, kommt dieses Stückchen Ajax? Muß ich es mehrfach einfügen? Für jedes <div>, also das was mal ein Frame darstellen sollte. Oder einfach einmal für alle Daten, die irgendwann mal einzeln gesendet werden sollen?

[robo47]

Es gibt Java-Script Bibliotheken und Frameworks die einem Viel arbeit abnehmen und schon einiges an Funktionalität mitbringen:

dojo, jquery, mootools, prototype, script.aculo.us, yui ...

[Jann Hendrik]

ggf. für dich interessant: Nutzt ihr JavaScript-Frameworks/Bibliotheken?

[auerhahn]

Mhh... was meine Javascript-Kenntnisse angeht ist eher wenig von daher werde ich mich vorerst auf das beschränken was wirklich sinnvoll und notwendig erscheint.
Beschriebene Spielereien, wie Werbung, Popups und der ganze Müll ist lästig und hat daher Javascript ziemlich zugesetzt. Ich denke schon das ich den User mit derartigen Mist nicht belasten will. Zum anderen vergrault man damit auch viele Leute.

Ich hatte hier aber noch eine wichtige Frage zu AJAX, die mich bissel aufhält weiter zu kommen:
"... Ich welche Seite oder Teile der Hauptseite, welche ich ja ursprünglich mit Frames machen wollte, kommt dieses Stückchen Ajax? Muß ich es mehrfach einfügen? Für jedes <div>, also das was mal ein Frame darstellen sollte. Oder einfach einmal für alle Daten, die irgendwann mal einzeln gesendet werden sollen?"

thx

[Neq']

Zitat von auerhahn

"... Ich welche Seite oder Teile der Hauptseite, welche ich ja ursprünglich mit Frames machen wollte, kommt dieses Stückchen Ajax? Muß ich es mehrfach einfügen? Für jedes <div>, also das was mal ein Frame darstellen sollte. Oder einfach einmal für alle Daten, die irgendwann mal einzeln gesendet werden sollen?"

thx

Grundsätzlich gilt: Zeig mir deinen Code und ich zeige dir wo er hingehört. ;)

Ansonsten gilt die Regel, dass man den JavaScript-Code in den Head der Seite definiert (<head></head>). Dass heißt widerrum das man alle EventHandler usw. auch im Head definieren muss, also kein onclick oder javascript: im Link definiert.

[auerhahn]

LOL stimmt.

Ja ok. Klar in den <head> ist ja <script...> man bin ich blöd .
Ich glaub jetzt könnts was werden... ich werds später mal testen.
thx

[Ben]

"AJAX, kompakt und schnell", weg vom AJAX-Hype

[auerhahn]

Tja da hab ich es wohl doch noch nicht begriffen!

Ich habe jetzt schon einige Stunden probiert aber irgendwie geht das trotzdem nicht. Ich habe alles auf ein Minimum beschränkt, aber da passiert nix. Ich habe auch dieses Buch zu Rate gezogen. Nach dem Bsp angeglichen und... nix passiert...

hauptseite.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hauptseite</title>
<script type="txt/javascript">
var XMLHTTP = null;

if (window.XMLHttpRequest)
    {
    XMLHTTP = new XMLHttpRequest();
    }
else if (window.ActiveXObject)
    {
    try
        {
        XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
        }
    catch (ex)
        {
        try
            {
            XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
            }
        catch (ex)
            {
            XMLHTTP = null;
            }
        }
    }

if (XMLHTTP == null)
    {
    alert ("Fehler XMLHTTP");
    }

function Ausgeben()
    {
    if (XMLHTTP.readstate == 4)
        {
        var b = document.getElementById("b");
        b.innerHTML += XMLHTTP.responseText;
        }
    }

window.onload = function()
    {
    XMLHTTP.open("GET", "navi_inc.php?b=links", true)
    XMLHTTP.onreadystatechange = Ausgeben;
    XMLHTTP.send(null);
    }

</script>
</head>

<body>

<table style="width: 750px" align="center">
    <tr>
        <td style="width: 250px; height: 400px">
            <div class="hauptseite" id="anzeigeEins" style="width: 250px; height: 400px">
                <?php include("anzeigeEins_inc.php"); ?>
            </div>
        </td>
        <td style="width: 500px; height: 400px">
            <div class="hauptseite" id="navi" style="width: 500px; height: 400px">
                <?php include("navi_inc.php"); ?>
            </div>
        </td>
    </tr>
</table>
<p id="b">hier: </p>
</body>
</html>

dann die anzeigeEins_inc.php

<?php
echo "Hier ist Anzeige Eins";
?>

und die navi_inc.php

<?php
if (isset($_GET['b']) && is_string($_GET['b']))
    {
    echo "Hier ist Navi";
    echo " b=" . htmlspecialchars($GET['b']);
    }
?>

Ich weiß nicht ob was falsch ist oder was fehlt. Ich kann ja noch nicht einmal genau sagen, ob überhaupt Daten übertragen werden.
Vielleicht hat einer ein funktionierendes kleines Script mit php und diesen ajax, welches man sich mal anschauen kann.
thx

[Neq']

Hallo auerhahn,

doch, du scheinst das Ganze schon kapiert zu haben. Du machst lediglich noch Flüchtigkeitsfehler.

<script type="txt/javascript"></script>

Das stimmt nicht. Es müsste

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

heißen, dann führt der Browser den Request auch aus.

Um solche Fehler vermeiden zu können, sollte man eine gute Entwicklungsumgebung besitzen.

[auerhahn]

Ich habe das Ganze jetzt zum laufen gekriegt.
Jetzt habe ich versucht das Fertige zu erweitern, weil ich nicht nur einen button habe sondern mehrere mit unterschiedlichen Werten.

Also habe ich es jetzt mit zwei button versucht, und leider geht wieder nichts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hauptseite</title>
<script type="text/javascript">
function eins()
    {
    var XMLHTTP_eins = null;

    if (window.XMLHttpRequest)
        {
        XMLHTTP_eins = new XMLHttpRequest();
        }
    else if (window.ActiveXObject)
        {
        try
            {
            XMLHTTP_eins = new ActiveXObject("Msxml2.XMLHTTP");
            }
        catch (ex)
            {
            try
                {
                XMLHTTP_eins = new ActiveXObject("Microsoft.XMLHTTP");
                }
            catch (ex)
                {
                XMLHTTP_eins = null;
                }
            }
        }

    if (XMLHTTP_eins == null)
        {
        alert ("Fehler XMLHTTP");
        }

    window.onload = function()
        {
        XMLHTTP_eins.open("GET", "navi_inc.php?b=1", true)
        XMLHTTP_eins.onreadystatechange = Ausgeben;
        XMLHTTP_eins.send(null);
        }
    }
    
function zwei()
    {
    var XMLHTTP_zwei = null;

    if (window.XMLHttpRequest)
        {
        XMLHTTP_zwei = new XMLHttpRequest();
        }
    else if (window.ActiveXObject)
        {
        try
            {
            XMLHTTP_zwei = new ActiveXObject("Msxml2.XMLHTTP");
            }
        catch (ex)
            {
            try
                {
                XMLHTTP_zwei = new ActiveXObject("Microsoft.XMLHTTP");
                }
            catch (ex)
                {
                XMLHTTP_zwei = null;
                }
            }
        }

    if (XMLHTTP_zwei == null)
        {
        alert ("Fehler XMLHTTP");
        }

    window.onload = function()
        {
        XMLHTTP_zwei.open("GET", "navi_inc.php?b=2", true)
        XMLHTTP_zwei.onreadystatechange = Ausgeben;
        XMLHTTP_zwei.send(null);
        }
    }
    
function Ausgeben()
    {
    if (XMLHTTP_eins.readyState == 4)
        {
        var b = document.getElementById("eins");
        b.innerHTML += XMLHTTP_eins.responseText;
        }
    else if (XMLHTTP_zwei.readyState == 4)
        {
        var c = document.getElementById("zwei");
        c.innerHTML += XMLHTTP_zwei.responseText;
        }
    }


</script>
</head>

<body>

<table style="width: 750px" align="center">
    <tr>
        <td style="width: 250px; height: 400px">
            <div class="hauptseite" id="anzeigeEins" style="width: 250px; height: 400px">
                <?php include("anzeigeEins_inc.php"); ?>
            </div>
        </td>
        <td style="width: 500px; height: 400px">
            <div class="hauptseite" id="navi" style="width: 500px; height: 400px">
                
                <form>
                <button type="submit" onclick="eins();" name="b" value="1"/>
                </form>
                <p id="eins"> </p>
                </div>

                
                <br />
                
                <div>
                <form>
                <button type="submit" onclick="zwei();" name="b" value="2"/>
                </form>
                <p id="zwei"> </p>
            

            </div>
        </td>
    </tr>
</table>

</body>
</html>

Der Rest ist so geblieben.

Ich habe die Button mit <input> und im Bsp. mit <button> versucht, aber irgendwie funktioniert es nicht. Beim <button> sehe ich wieder das Problem das er die Werte in die Adresszeile schreibt, was ich ja umgehen will, wegen den Aktualisieren mit F5.

Mein Problem ist das ich ursprünglich vor hatte, die input-Zeile durch eine Ausgabe mit printf im Feld navi darzustellen, aber die wird nicht angezeigt (durch include() ).
Ich habe noch andere Sachen probiert, aber erfolglos.

Noch zur Ergänzung ich hab den firebug an und der zeigt keine Probleme.

[auerhahn]

Hmm... hat noch keiner etwas mit mehreren Button gemacht. Das kann ich doch nicht glauben.
Ich habe noch ein bißchen probiert, aber leider funktioniert es nicht. Anscheinend wird die Funktion eins() bzw. zwei() nicht ausgeführt. Aber warum? Der Button scheint zu gehen den irgendwas rührert er rum.
Ich weiß auch nicht wo ich nachschauen könnte was gerade passiert. Ich habe den Firebug vielleicht hat einer einen Tip.

[robo47]

dein problem ist, du nutzt SUBMIT, dann will er die buttons auch zum absenden nutzen.

das kannst du umgehen indem du

<button type="submit" onclick="eins(); return false;" name="b" value="1"/>

schreibst, damit wird das submit unterbunden.

oder halt direkt nen normalen button machen

<button type="button" onclick="eins();" name="b" value="1"/>

dann solltest du das return false; nicht mehr brauchen. Nachteil von Lösung 2, bei deaktiviertem javascript passiert nichts.

[auerhahn]

Ok jetzt funktioniert es fast, nachdem ich nochmal alles mehrmals umgeschrieben habe. Zumindest bekomme ich jetzt nach jeden Klick auf den entsprechenden Button auch den zugehörigen Wert zurück. Bloß mein Problem ist jetzt das die Rückgabewerte an der Stelle...

<p id="eins">hier: </p>

... hintereinander aufgelistet werden und nicht jedesmal ersetzt werden, wie gewünscht.

[auerhahn]

Ich habe ein kleines Problem mit dem erstellen der ersten Seite, also im Prinzip die die nach dem Anmelden angezeigt wird, bevor man loslegen kann.
Ich habe mir dazu gedacht eine Funktion in die Hauptseite einzufügen, die nur einmal am Anfang ausgeführt werden soll und dann deaktiviert werden soll und diesen Zustand halten soll. Außerdem soll ein Aktualisieren wirkungslos bleiben. Dazu wird nur a=0 und b=0 übertragen.

So weit so gut. Da der letzte Zustand in der Datenbank gespeichert ist, lese ich die Daten daraus für den ersten Zustand.

In meinen Script habe ich eine Variable g definiert, die den Zustand 0 für Anfang (noch nicht abgeschlossen) auf 1 (Seite komplett) ändert.
Die Seite wird so angezeigt wie gewünscht, nur leider funktionieren die Button für die jeweiligen Funktionen eins() und zwei() nicht.

Ich habe das Script schon mehrmals mit verschiedenen Möglichkeiten probiert, aber leider funktionieren die Button bei keinen.


Der Codeausschnitt der Hauptseite

...
var g = 0;

...

window.onload = function anfang()
    {
    XMLHTTP.open("GET", "navi_inc.php?a=0&b=0", true);
    XMLHTTP.onreadystatechange = Ausgeben;
    XMLHTTP.send(null);
    }

function eins()
    {
    if (g == 1)
    {
    if (XMLHTTP.readyState < 4)
        {
        XMLHTTP.abort();
        }
    XMLHTTP.open("GET", "navi_inc.php?a=1&b=1", true);
    XMLHTTP.onreadystatechange = Ausgeben;
    XMLHTTP.send(null);
    }}

function zwei()
    {
        if (g == 1)
    {
    if (XMLHTTP.readyState < 4)
        {
        XMLHTTP.abort();
        }
    XMLHTTP.open("GET", "navi_inc.php?a=0&b=2", true);
    XMLHTTP.onreadystatechange = Ausgeben;
    XMLHTTP.send(null);
    }}

...

function Ausgeben()
    {
    if (XMLHTTP.readyState == 4)
        {
        if (g == 0 )
            {
            g = 1;
            }
        var naviausgabe = document.getElementById("navi");
        naviausgabe.innerHTML = XMLHTTP.responseText;
        }
    }

...

PS: Wie groß darf der ResponseText maximal sein? (Zeichen)