Meerdere AJAX requests - Softwareontwikkeling

dinsdag 3 juli 2007 21:40

Acties:

Verwijderd

Topicstarter

Hallo,

Ik wil graag meerdere AJAX requests uitvoeren na een event.
Ik heb het vorige topic hierover al gelezen en alle bijbehorende links, plus google afgespeurt, maar ik kan helaas geen oplossing vinden.

Dit is mijn huidige javascript:

JavaScript:

var xmlHttp
function getXmlHttp()
{
    if(!xmlHttp)
    {
        var xmlHttp = null;
        try
        {
            //voor alle niet Internet Explorer browsers.
            xmlHttp=new XMLHttpRequest();
        }
        catch (e)
        {
            try
            {
                //internet explorer
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    //internet explorer
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                    // de browser onsteunt geen AJAX
                    return false;
                }
            }
        }
        return xmlHttp;
    }
    else
    {
    
        var xmlHttp2 = null;
        try
        {
            //voor alle niet Internet Explorer browsers.
            xmlHttp2=new XMLHttpRequest();
        }
        catch (e)
        {
            try
            {
                //internet explorer
                xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    //internet explorer
                    xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                    // de browser onsteunt geen AJAX
                    return false;
                }
            }
        }
        return xmlHttp2;
    }
}


function send_request(url, element)
{
    xmlHttp = getXmlHttp();
    xmlHttp.onreadystatechange=function() { stateChanged(element) };
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

function stateChanged(element) 
{ 
    if(xmlHttp.readyState == 4)
    { 
        document.getElementById(element).innerHTML=xmlHttp.responseText;
    }
}

HTML:

<!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>AJAX Test</title>
<script src="../includes/ajax/multi_open.js" type="text/javascript">
</script>
</head>

<body>
    <p>
        <a href="javascript:void(0)" onclick="send_request('data.php?test=cool&keep_testing=cooler', 'content'); send_request('data2.php?param=2', 'menu')">Geef inhoud weer</a>
        <div id="content"></div>
        <div id="menu"></div>
     </p>
</body>
</html>

Het voorbeeld op: http://javascript.about.com/library/blajax13.htm werkt niet voor mij (foutmelding bij laden, ajaxObject does not exists op de regel met if(!ajaxObject).
Ik begrijp er ook vrij weinig van, het lijkt allemaal zo complex geschreven met klassen. Ik kan best een beetje OOP maar dab wel met PHP.

Kan iemand mij een beetje opweg helpen?
Het mooist zo zijn de requests te queen maar 2 requests is in principe genoeg dus 2 objecten voldeon ook, maar dit krijg ik dus ook niet voorelkaar.

dinsdag 3 juli 2007 22:23

Acties:

Verwijderd

heb je uberhaupt door wat je script doet? je getXmlHttp() functie slaat nergens op, en sowieso ken je de return value altijd toe aan dezelfde variabele, dus je hebt altijd maar 1 httprequestobject, de gein is dus juist dat je er inderdaad meer moet maken

dinsdag 3 juli 2007 22:26

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 03 juli 2007 @ 22:23:
... de gein is dus juist dat je er inderdaad meer moet maken

Of queuen

Intentionally left blank

woensdag 4 juli 2007 09:19

Acties:

Verwijderd

Verwijderd schreef op dinsdag 03 juli 2007 @ 22:23:
heb je uberhaupt door wat je script doet? je getXmlHttp() functie slaat nergens op, en sowieso ken je de return value altijd toe aan dezelfde variabele, dus je hebt altijd maar 1 httprequestobject, de gein is dus juist dat je er inderdaad meer moet maken

Volgens mij valt dat wel mee hoor de var xmlhttp staat buiten zijn functie getXmlHttp() standaard zal deze dus op false (null) staan. Wat er dus gebeurd is dat hij de eerste keer er door heen loopt xmlHttp terug geeft en de rest van de keren xmlHttp2 aangezien xmlHttp nergens meer op false wordt gezet na het uitlezen van de response. Of zie ik het nou verkeerd?

Ik zou in ieder geval wel de try-catch voor het aanmaken van de xmlhttp in een aparte functie zetten, scheelt weer wat regels code en geeft een beter overzicht.

woensdag 4 juli 2007 09:21

Acties:

BasieP

crisp schreef op dinsdag 03 juli 2007 @ 22:26:
[...]

Of queuen

of multithread queuen (heet dat zo?)
dus zowel meerdere ajax requests als een queue. Dan ben je wel snel (je werkt paralel) maar kan wel prioriteit instellen

This message was sent on 100% recyclable electrons.

woensdag 4 juli 2007 10:38

Acties:

Fibbers

Als je meerdere (in principe: een oneindig aantal) requests wilt kunnen sturen, moet je ervoor zorgen dat je niet gaat werken met 1 globale variabele, zoals je dat nu wel doet.

Haal dus je eerste regel code gewoon weg, deze dus:

JavaScript:

1	var xmlHttp

En verander dus even alle functies zodat zij het nieuw aangemaakte xmlrequest-object als parameter meekrijgen, dus zoiets:

JavaScript:

function getXmlHttp()
{
        var xmlHttp = null;
        try
        {
            //voor alle niet Internet Explorer browsers.
            xmlHttp=new XMLHttpRequest();
        }
        catch (e)
        {
            try
            {
                //internet explorer
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    //internet explorer
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                    // de browser onsteunt geen AJAX
                    xmlHttp = false;
                }
            }
        }
        return xmlHttp;
    }
}


function send_request(url, element)
{
    var xmlHttp = getXmlHttp();
    xmlHttp.onreadystatechange=function() { stateChanged(xmlHttp, element) };
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

function stateChanged(xmlHttp, element) 
{ 
    if(xmlHttp.readyState == 4)
    { 
        document.getElementById(element).innerHTML=xmlHttp.responseText;
    }
}

Er wordt nu dus steeds een nieuwe, aparte variabele 'xmlHttp' aangemaakt die de request stuurt. Als je daarna dus opnieuw een request stuurt, wordt er dus weer een nieuw object aangemaakt, die dus niet stoort met de voorheen aangemaakte request-objecten.

Overigens: het woordje 'var' zorgt ervoor dat de variabele aangemaakt wordt op de huidige stack. Haal je het woordje var weg in de eerste regel van send_request, dan zorg je ervoor dat de xmlHttp-variabele globaal wordt en zal het waarschijnlijk niet werken. Erg belangrijk dus om die 'var' daar te laten staan.

woensdag 4 juli 2007 21:50

Acties:

Verwijderd

Topicstarter

Oke. Maar var is toch juist om een variabele globaal beschikbaar te maken of werkt dat binnen een functie tegengesteld?
Bedankt he

vrijdag 6 juli 2007 11:18

Acties:

sopsop

[v] [;,,;] [v]

Verwijderd schreef op woensdag 04 juli 2007 @ 21:50:
Oke. Maar var is toch juist om een variabele globaal beschikbaar te maken of werkt dat binnen een functie tegengesteld?
Bedankt he

'var' is om een variabele te declareren. De scope van de variabele bepaal je door de plaats waar je de variabele declaratie neerzet. Binnen een functie zal de scope dus ook alleen binnen die functie zijn.

zaterdag 7 juli 2007 16:16

Acties:

funkwurm

Wat sopsop zegt klopt, de verwarring ontstaat omdat javascript een variabele voor jou declareert als je dat niet zelf hebt gedaan. En als javascript dat voor jou moet doen, zal hij dat altijd in de global scope doen.

Dus juist als je var weglaat bij de eerste aanroep wordt de variabele global, maar het is goed gebruik om, indien dat wel het gewenste resultaat is, gewoon zelf var myVar; bovenaan je script (buiten een functie) te zetten.