XMLHttpRequest Ausgabe in zwei Div's

PoldivonPösel · 26. August 2010

Hallo

Ich habe eine Frage zu diesem Script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Beispiel</title>
<script type="text/javascript">



var LoaderObject = function()
{
    this.connection                = false;
    this.running                = false;
    this.requestQueue            = new Array();
    this.requestCounter            = 0;
    this.requestQueueCounter    = 0;
};


LoaderObject.prototype.initialize = function()
{
    if (window.XMLHttpRequest)
    {
        this.connection = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        try
        {
            this.connection = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e)
        {
            try
            {
                this.connection = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            { 
                return false;
            }
        }
    }

    return true;
};


LoaderObject.prototype.runRequest = function()
{
    if(this.running)
    {
        return false;
    }

    if(!this.connection)
    {
        var reconnected = this.initialize();
        if(!reconnected)
        {
            return false;
        }
    }

    this.running = true;

    var request = this.requestQueue[this.requestCounter];

    if
    (
        !request['url'] ||
        !request['elementId']
    )
    {
        return false;
    }

    try
    {
        this.connection.open('GET', request['url'], true);
    }
    catch(e)
    {
        return false;
    }

    this.connection.onreadystatechange = function()
    {
        if (Loader.connection.readyState == 4)
        {
            if (Loader.connection.status == 200)
            {
                document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText;

                Loader.requestCounter++;
                Loader.requestQueueCounter--;

                if (Loader.requestQueue.length > Loader.requestCounter)
                {
                    Loader.running = false;
                    setTimeout("Loader.runRequest()",100);
                }
                else
                {
                    Loader.running = false;
                    Loader.requestQueue = new Array();
                    Loader.requestCounter = 0;
                    Loader.requestQueueCounter = 0;
                }
            }
            else
            {
                alert('connection error : '+Loader.connection.status);
            }
        }
    };

    this.connection.send(request['send']);
    return true;
};


LoaderObject.prototype.add = function(requestObject)
{
    var requestsParams = requestObject.split('|');

    this.requestQueue[this.requestQueue.length] = {
            'elementId'        : requestsParams[0]        || false,
            'url'            : requestsParams[1]        || false
    };

    this.requestQueueCounter++;
}


LoaderObject.prototype.register = function(request)
{
    if(typeof(request) != 'string')
    {
        return false;
    }

    var requestObjects    = request.split(',');

    if(typeof(requestObjects) == 'object')
    {
        for(var index in requestObjects)
        {
            this.add(requestObjects[index]);
        }
    }

    if
    (
        !this.running &&
        this.requestQueueCounter > 0
    )
    {
        this.runRequest();
    }

    return null;
};

var Loader = new LoaderObject();

</script>
</head>
<body>

<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
<br /><br />
<a href="#" onclick="javascript:Loader.register('content1|datei1.php');">SET CONTENT 1</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content2|datei2.php');">SET CONTENT 2</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content3|datei3.php');">SET CONTENT 3</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content1|datei1.php,content2|datei2.php,content3|datei3.php');">SET ALL</a>

</body>
</html>

Wie passe ich den Code so an, dass automatisch - also ohne Klick auf einen Link- der Inhalt von content1 -> datei1.php und content2 -> datei2.php nachgeladen wird? Ich bin für jeden Hinweis sehr dankbar. Meine JavaScript-Kenntnisse sind einfach zu schlecht - will aber gerne dazu lernen.

Danke schonmal,
Poldi

Quaese · 26. August 2010

Hi,

wann soll der Inhalt nachgeladen werden?

Wenn er nachgeladen werden soll, wenn das Dokument fertig geladen ist und somit die erforderlichen Elemente (content1, content2) existieren, bietet sich der onload-Event an.

Beispiel:

Code:

window.onload = function(){
  Loader.register('content1|datei1.php');
  Loader.register('content2|datei2.php');
}

Eingefügt wird das Codefragment nach der letzten Zeile deines bisherigen Scripts.

Code:

var Loader = new LoaderObject();

Ciao
Quaese

PoldivonPösel · 26. August 2010

Hallo Quaese

Danke für Deine rasche Antwort. Der Code der jeweiligen Datei (kann gerne gleichzeitig) soll alle 60 Sekunden nachgeladen werden.

Quaese · 26. August 2010

Hi,

dann könntest du zusätzlich die Methode setInterval verwenden. Damit ist es möglich, Anweisungen periodisch zu wiederholen.

Beispiel:

Code:

window.onload = function(){
  // Anzahl der Sekunden angeben, nach denen der Inhalt aktualisiert werden soll
  var intSek = 60;

  // Inhalte zu Beginn laden
  Loader.register('content1|datei1.php');
  Loader.register('content2|datei2.php');

  // Inhalte periodisch aktualisieren
  hTimer = window.setInterval(function(){
    Loader.register('content1|datei1.php');
    Loader.register('content2|datei2.php');
  }, intSek * 1000);
}

Die Anzahl der Sekunden, nach denen die Inhalte aktualisiert werden sollen, kannst du über die Variable intSek einstellen.

Ciao
Quaese

PoldivonPösel · 26. August 2010

Habe Deinen Code nun direkt unter

var Loader = new LoaderObject();

angefügt. Der Reload funktioniert leider nicht. Habe beide Sekundenwerte auf 10 gesetzt. Leider tut sich nichts :-(
Was mache ich falsch?

Im Body steht:
<div id="content1"></div>
<div id="content2"></div>

Darf ich Dich nochmals bitten mir zu helfen?

Danke & Gruss
Poldi

PoldivonPösel · 26. August 2010

Der Fehler scheint im Reaload zu liegen. Nach dem Reaload kriege ich folgende Fehlermeldung:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3)
Zeitstempel: Thu, 26 Aug 2010 11:53:48 UTC

Meldung: 'url' ist Null oder kein Objekt

Es scheint so, dass durch den Reload die URL verloren geht!**** Ich verstehe das nicht!
Muss ich im Header was ändern?

Das steht bei mir im Header:

<!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">

Kann mir bitte jemand auf die Sprünge helfen? Danke!

Quaese · 26. August 2010

Hi,

folgendes Testdokument funktioniert bei mir tadellos:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Beispiel</title>
<script type="text/javascript">
var LoaderObject = function()
{
    this.connection                = false;
    this.running                = false;
    this.requestQueue            = new Array();
    this.requestCounter            = 0;
    this.requestQueueCounter    = 0;
};


LoaderObject.prototype.initialize = function()
{
    if (window.XMLHttpRequest)
    {
        this.connection = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        try
        {
            this.connection = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                this.connection = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                return false;
            }
        }
    }

    return true;
};


LoaderObject.prototype.runRequest = function()
{
    if(this.running)
    {
        return false;
    }

    if(!this.connection)
    {
        var reconnected = this.initialize();
        if(!reconnected)
        {
            return false;
        }
    }

    this.running = true;

    var request = this.requestQueue[this.requestCounter];

    if
    (
        !request['url'] ||
        !request['elementId']
    )
    {
        return false;
    }

    try
    {
        this.connection.open('GET', request['url'], true);
    }
    catch(e)
    {
        return false;
    }

    this.connection.onreadystatechange = function()
    {
        if (Loader.connection.readyState == 4)
        {
            if (Loader.connection.status == 200)
            {
                document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText;

                Loader.requestCounter++;
                Loader.requestQueueCounter--;

                if (Loader.requestQueue.length > Loader.requestCounter)
                {
                    Loader.running = false;
                    setTimeout("Loader.runRequest()",100);
                }
                else
                {
                    Loader.running = false;
                    Loader.requestQueue = new Array();
                    Loader.requestCounter = 0;
                    Loader.requestQueueCounter = 0;
                }
            }
            else
            {
                alert('connection error : '+Loader.connection.status);
            }
        }
    };

    this.connection.send(request['send']);
    return true;
};


LoaderObject.prototype.add = function(requestObject)
{
    var requestsParams = requestObject.split('|');

    this.requestQueue[this.requestQueue.length] = {
            'elementId'        : requestsParams[0]        || false,
            'url'            : requestsParams[1]        || false
    };

    this.requestQueueCounter++;
}


LoaderObject.prototype.register = function(request)
{
    if(typeof(request) != 'string')
    {
        return false;
    }

    var requestObjects    = request.split(',');

    if(typeof(requestObjects) == 'object')
    {
        for(var index in requestObjects)
        {
            this.add(requestObjects[index]);
        }
    }

    if
    (
        !this.running &&
        this.requestQueueCounter > 0
    )
    {
        this.runRequest();
    }

    return null;
};

var Loader = new LoaderObject();

window.onload = function(){
  // Anzahl der Sekunden angeben, nach denen der Inhalt aktualisiert werden soll
  var intSek = 5;

  Loader.register('content1|datei1.php');
  Loader.register('content2|datei2.php');

  hTimer = window.setInterval(function(){
    Loader.register('content1|datei1.php');
    Loader.register('content2|datei2.php');
  }, intSek * 1000);
}
</script>
</head>
<body>
<button onclick="window.clearInterval(hTimer);">clearTimer</button>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
<br /><br />
<a href="#" onclick="javascript:Loader.register('content1|datei1.php');">SET CONTENT 1</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content2|datei2.php');">SET CONTENT 2</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content3|datei3.php');">SET CONTENT 3</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content1|datei1.php,content2|datei2.php,content3|datei3.php');">SET ALL</a>

</body>
</html>

Ciao
Quaese

PoldivonPösel · 26. August 2010

Jetzt klappt es bei mir auch. Vielen Dank für Deine Mühe!!
Ich suche nun den Fehler...

Grüsse
Poldi

PoldivonPösel · 26. August 2010

Quaese,

Hast Du das Script nur mit Firefox getestet? Denn da gehts.
Der Internet-Explorer reloaded den Code leider nicht.

Habe hier genau Dein Code laufen.
Der Inhalt der Dateien datei1.php-datei3.php ist jeweils ausschliesslich:
Innerhalb des Reload-Bereichs: <?=date ("H:i:s", time())?>

Gruss
Poldi

Quaese · 26. August 2010

Hi,

wahrscheinlich handelt es sich um ein Cache-Problem beim IE. Gib des URLs mal Timestamps mit.

Code:

window.onload = function(){
  // Anzahl der Sekunden angeben, nach denen der Inhalt aktualisiert werden soll
  var intSek = 5;
 
  Loader.register('content1|datei1.php' + "?" + new Date().getTime());
  Loader.register('content2|datei2.php' + "?" + new Date().getTime());
 
  hTimer = window.setInterval(function(){
    Loader.register('content1|datei1.php' + "?" + new Date().getTime());
    Loader.register('content2|datei2.php' + "?" + new Date().getTime());
  }, intSek * 1000);
}

Ciao
Quaese

XMLHttpRequest Ausgabe in zwei Div's

PoldivonPösel

Grünschnabel

Quaese

Moderator

PoldivonPösel

Grünschnabel

Quaese

Moderator

PoldivonPösel

Grünschnabel

PoldivonPösel

Grünschnabel

Quaese

Moderator

PoldivonPösel

Grünschnabel

PoldivonPösel

Grünschnabel

Quaese

Moderator

Neue Beiträge