Ajax - Nachladen von Infos

aargau · 8. Juni 2007

Ich möchte mit Ajax Informationen von User nachladen. Nun habe ich mal ein wenig das Ajax angeschaut, bin nun aber Ratlos wie ich weiter Arbeiten soll.

Ich möchte Toolboxen anzeigen beim Mousover des Usernames. In der Toolbox sollen dan Grundinfos wie alter, geschlecht, Avatar etc angezeigt werden. Nun bin ich aber etwas ratlos wie ich das machen muss.

Die Toolboxen Funktionieren soweit recht gut. Nur wie kriege ich nun die Informationen in die Toolbox?
Mein grösstes Problem ist
A) Wie Zeige ich die Infos welche Nachgeladen worden sind ah?
B) Wie schaffe ich es das diese nur geladen werden wenn die Toolbox geöffnet wird?

Das Ajax habe ich bis jetzt so:

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('htm/html');
                // 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"
    onmouseover="macheRequest('tool.php?id=22')">Testuser 22
</span>

Denke mal das dies anderst sein muss:
alert(http_request.responseText);

Hoffe ihr wisst was ich meine

Sven Mintel · 8. Juni 2007

A: )Weise sie dem innerHTML des <span> zu:
B: )Indem du die Funktion nur aufrufst, wenn die Box geöffnet wird :-(

Habs mal angepasst...die Änderungen sind fett markiert:

Code:

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

    var http_request = false;

    function macheRequest(url,obj) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('htm/html');
                // 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 = new Function("alertInhalt('"+obj.id+"')");
        obj.onmouseover={};
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertInhalt(o) {

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

    }
</script>
<span id="user_22"
    style="cursor: pointer; text-decoration: underline"
    onmouseover="macheRequest('tool.php?id=22',this)">Testuser 22
</span>

aargau · 8. Juni 2007

Danke dir erstmals für deine Hilfe.
Bin nun doch schon ein rechtes stück weiter gekommen. Aber so ganz klappen will es irgend wie noch nicht.

Ich weis nicht genau wie ich das Ajax Script einbinden muss damit es korrekt angezeigt wird

Habe mal das angehängt was ich bis jetzt habe. Hoffe es kann mir jemand weiter helfen. Java Script ist leider nicht mein gebiet.

Sven Mintel · 8. Juni 2007

Code:

<html>
<head>
<title>Test</title>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>

<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('htm/html');
                // 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 = new Function("alertInhalt()");
        
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertInhalt(o) {

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

    }





function TooltipTxt(u,o)
{
    macheRequest(u,o);
    return 'lade Infos...';
}
</script>
</head>
<body>
<a href="index.htm" onmouseover="Tip(TooltipTxt('tool.php?id=22'))" >Startseite</a>

</body>
</html>

Du musst dann allerdings eine fixe Breite für den Tooltip angeben, das dynamische ermitteln funktioniert nicht, da der dafür benötigte Inhalt beim mouseover noch nicht vorhanden ist.

aargau · 8. Juni 2007

Danke dir, es Funktioniert so

aargau · 22. Juli 2007

hmm bin etwas durcheinander... Im Firefox geht das ganze wirklich Super, doch im IE will es nicht so ganz. Die Infos werden Geladen, wenn ich aber schnell über mehrere Namen gehe mit der maus bringt er ein Scriotfehler. Ich weis nicht was da nicht gut ist. Am JS hab ich nichts geändert, ausser das ich es in der index Datei habe nicht bei jeder Includeten Datei einzeln einfüge.

Sollte aber trozdem gehen. Wenn der Fehler kommt steht im IE einfach nur noch lade Infos... und sonst nichts. Weis jemand was da los ist?

Quaese · 22. Juli 2007

Hi,

also ein Blick in die JavaScript-Konsole des Firefox offenbart, dass dort ebenfalls Fehler auftreten. Es handelt sich dabei um zwei unterschiedliche Fehlertypen:

Der erste wird hervorgerufen, weil das Element mit der ID WzBoDyI nicht existiert
Lösung:
innerHTML mit Hilfe der try..catch-Anweisung setzen.
Der zweite ist die Folge eines nicht existenten xmlHttpRequest-Objektes
Lösung:
Der Request wird zeitverzögert aufgerufen. Damit wird gewährleistet, dass die Serveranfrage erst dann erfolgt, wenn der
Cursor lange genug nicht bewegt wurde.

Beispiel:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<script type="text/javascript">

var http_request = false;

var hTimer = null;
function sleep(url, intSleep){
  if(hTimer != null){
    window.clearTimeout(hTimer);
  }
  hTimer = window.setTimeout("macheRequest('"+url+"')", intSleep);
}

function macheRequest(url) {

    // Falls noch ein Request-Objekt existiert -> zunächst beenden
    if(http_request && http_request.readyState){
      http_request.abort( );
      http_request = false;
    }

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('htm/html');
            // 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 = new Function("alertInhalt()");

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

}

function alertInhalt(o) {

    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
          try{
            document.getElementById('WzBoDyI').innerHTML=unescape(http_request.responseText);
          }catch(objError){}

        } else {
            alert('Bei dem Request ist ein Problem aufgetreten.');
        }
    }

}

function TooltipTxt(u,o){
    //macheRequest(u,o);
    sleep(u, 300);
    return 'lade Infos...';
}
</script>
</head>
<body>
<script type="text/javascript" src="../JS-Scripts/walter_zorn/wz_tooltip_v4_12/wz_tooltip.js"></script>

<p><a href="index.htm" onmouseover="Tip(TooltipTxt('../blindtext.php?text=1'))" >Startseite</a></p>
<p><a href="index.htm" onmouseover="Tip(TooltipTxt('../blindtext.php?text=1'))" >Startseite</a></p>
<p><a href="index.htm" onmouseover="Tip(TooltipTxt('../blindtext.php?text=1'))" >Startseite</a></p>
<p><a href="index.htm" onmouseover="Tip(TooltipTxt('../blindtext.php?text=1'))" >Startseite</a></p>
<p><a href="index.htm" onmouseover="Tip(TooltipTxt('../blindtext.php?text=1'))" >Startseite</a></p>
<p><a href="index.htm" onmouseover="Tip(TooltipTxt('../blindtext.php?text=1'))" >Startseite</a></p>

</body>
</html>

Vielleicht kannst Du damit etwas anfangen.

Ciao
Quaese

aargau · 22. Juli 2007

Hallo,
Ich Danke dir! Scheint so zu Funktionieren.
Mir JS komme ich leider nicht mit

PHP ist da schon eher mein Gebiet.

Grüsse
Marco

aargau · 25. Oktober 2007

Nochmals ein Problem mit dem IE: Bilder können nicht geladen werden. Muss ich da irgend was ändern das die Bilder + HTML auch im IE geladen werden? Im FF geht es, da wird das Bild angezeigt

Sanfan · 25. Oktober 2007

Probier mal das Bild per CSS als Hintergrund eines DIVs zu laden!

Ajax - Nachladen von Infos

aargau

Erfahrenes Mitglied

Sven Mintel

Mitglied

aargau

Erfahrenes Mitglied

Anhänge

Sven Mintel

Mitglied

aargau

Erfahrenes Mitglied

aargau

Erfahrenes Mitglied

Quaese

Moderator

aargau

Erfahrenes Mitglied

aargau

Erfahrenes Mitglied

Sanfan

Grünschnabel

Neue Beiträge