[javascript] refresh variable via ajax

[Verwijderd]

Ik ben op zoek naar een stukje code wat een variabele van een andere pagina uitleest en die vervolgens in een variabele in mijn code plaatst (opslaat)

De meeste ajax code haalt een variabele op en plaatst die rechtsreeks in een DIV of ander html component. Maar ik wil deze waarde expliciet in mijn eigen variabele hebben.

Het vreemd is dat ik al een stuk code heb, maar daar gebeurt iets vreemd. Ik gebruik twee functies, waarbij de tweede de eerste aanroept. Op e.o.a. manier komt de waarde van de variabele uit functie 1 niet terug naar functie 2.

code:

<script type="text/javascript" id="script1a">
var MijnVAr=0; // mijn globale variabele
    function callback(responseText, callbackParam){
        // hier staat dan code die responseText bewerkt en uiteindelijk MijnVAr vult
        document.write(MijnVAr); //hier wordt MijnVAr goed afgedrukt
        return MijnVAr; // met en zonder return geprobeerd. zou niet hoeven aangezien MijnVAr globaal gedeclareerd is. 
    }
function twee(){
    for (var i = 0; i < 200; i++) {
        AjaxRequestProvider.RegisterRequest('/createVar.php?_bals', callback, 1 );
        document.getElementById("Content").innerHTML=MijnVAr;
        document.write(MijnVAr); //hier wordt MijnVAr altijd als 0 afgedrukt
        // hier is MijnVAr altijd 0 ? 
    }
}
</script>

[Gamebuster]

De meest gebruikte vorm van AJAX die ik ken is data ophalen in JSON formaat met behulp van allerlei frameworks en deze vervolgens afhandelen met een Javascript functie.

Een veel gebruikt framework, wat ik zeker iedere javascript niet-expert zou aanraden, is jQuery. Alternatief, die ik persoonlijk prettiger vind, is Mootools. Deze 2 frameworks zijn gewoon grote pakketjes aan Javascript-code die crossbrowser-problemen oplost en allerlei geinige mogelijkheden van Javascript makkelijker maakt, zoals animaties.

Beide bevatten handige functies, o.a. voor AJAX i.c.m. JSON en HTML.

jQuery: http://jquery.com/
Mootools: http://mootools.net/

Doe een query met Mootools en haal data op in JSON formaat en doe er iets mee:
http://mootools.net/docs/core/Request/Request.JSON

Voorbeeldcode i.c.m. Mootools: (jQuery werkt ongetwijfeld vrijwel hetzelfde)
Deze request...
tellMeAge.php?firstName=John&lastName=Doe
...geeft in dit voorbeeld het onderstaande resultaat, genereerd met de PHP functie JSON_encode

JavaScript:

{"age":25,"height":170,"weight":120}

Dit is de Javascript code die de bovenstaande data ophaalt, inleest en gebruikt:

JavaScript:

// this code will send a data object via a GET request and alert the retrieved data.
var jsonRequest = new Request.JSON({url: 'http://site.com/tellMeAge.php', onSuccess: function(person){
    alert(person.age);    // alerts "25 years".
    alert(person.height); // alerts "170 cm".
    alert(person.weight); // alerts "120 kg".
}}).get({'firstName': 'John', 'lastName': 'Doe'});

Alternatief: (vind ik persoonlijk wat netter, doet verder exact hetzelfde)

JavaScript:

function alertPerson(person)
{
    alert(person.age);    // alerts "25 years".
    alert(person.height); // alerts "170 cm".
    alert(person.weight); // alerts "120 kg".
}

new Request.JSON({
  url: 'http://site.com/tellMeAge.php',
  onSuccess: alertPerson
}).get({
  'firstName': 'John',
  'lastName': 'Doe'
});

Wat er in het onderste voorbeeld gebeurt:
Eerst maken we een functie. Deze functie lijkt me best duidelijk en ik zal daarom niet verder ingaan op die functie.

Vervolgens maken we een nieuw Request.JSON object. Deze Request.JSON instance verwacht een Object met enkele properties die omschrijven waar de request heen moet gaan (de url) en wat er moet gedaan worden als de request voltooid is.

In het bovenstaande voorbeeld geven we de url 'http://site.com/tellMeAge.php' op en geven we aan dat de instance de callback functie "alertPerson" moet gebruiken wanneer de request met succes afgehandeld is (404's, verbroken verbindingen, etc worden beschouwd als error en zal de callback niet roepen)

Wanneer het object aangemaakt is, gebruiken we direct de .get method, welke een POST-request (geen GET-request, zoals je zou verwachten) zal gebruiken om de data op te halen. De POST argumenten die gegeven worden met de HTTP request kan je meegeven als 1e argument van de .get method als een object, zoals hierboven ook gedaan is. In het bovenstaande voorbeeld wordt het argument "firstName" toegewezen met "John" en "lastName" met "Doe". In PHP kan je deze inlezen met $_POST['firstName'] en $_POST['lastName']. Onthoud dat de betreffende waardes als user-input behandeld moeten worden; wanneer je ze gebruikt in een SQL query moet je deze altijd escapen met mysql_real_escape_string of PDO::quote.

Zodra de .get method geroepen is gaat het uitvoeren van de Javascript verder; de methode blokkeert niet tot de data is opgehaald! In plaats daarvan wordt je opgegeven callback functie geroepen, zo'n 0.1 tot 1 seconde later, wanneer alle data is opgehaald en ingelezen. Het 1e argument die gegeven wordt bij het roepen van de callback-functie is een object die aangemaakt is op basis van de JSON-data die ingelezen is.

[ Voor 50% gewijzigd door Gamebuster op 24-10-2010 21:00 ]

[moozzuzz]

Volgens mijn inzicht (niet zo fantastisch overigens) heb je MijnVAr in functie twee() nergens gedefinieerd, hence de 0 of lege string.

[Cartman!]

Hoe vul je MijnVAr dan nu? Dat is wellicht het stukje code waar het misgaat en dat laat je nu net even niet zien...

[X-Lars]

Verwijderd schreef op zondag 24 oktober 2010 @ 20:31:
Ik ben op zoek naar een stukje code wat een variabele van een andere pagina uitleest en die vervolgens in een variabele in mijn code plaatst (opslaat)

De meeste ajax code haalt een variabele op en plaatst die rechtsreeks in een DIV of ander html component. Maar ik wil deze waarde expliciet in mijn eigen variabele hebben.

Het vreemd is dat ik al een stuk code heb, maar daar gebeurt iets vreemd. Ik gebruik twee functies, waarbij de tweede de eerste aanroept. Op e.o.a. manier komt de waarde van de variabele uit functie 1 niet terug naar functie 2.

code:

<script type="text/javascript" id="script1a">
var MijnVAr=0; // mijn globale variabele
    function callback(responseText, callbackParam){
        // hier staat dan code die responseText bewerkt en uiteindelijk MijnVAr vult
        document.write(MijnVAr); //hier wordt MijnVAr goed afgedrukt
        return MijnVAr; // met en zonder return geprobeerd. zou niet hoeven aangezien MijnVAr globaal gedeclareerd is. 
    }
function twee(){
    for (var i = 0; i < 200; i++) {
        AjaxRequestProvider.RegisterRequest('/createVar.php?_bals', callback, 1 );
        document.getElementById("Content").innerHTML=MijnVAr;
        document.write(MijnVAr); //hier wordt MijnVAr altijd als 0 afgedrukt
        // hier is MijnVAr altijd 0 ? 
    }
}
</script>

Er is wel het een en ander mis met het script. Eén van de voornaamste pitfalls is het gebruik van document.write() als de pagina al gerendered is. Niet doen (vraag of Google evt. voor meer uitleg). Het gebruik ervan is sowieso af te raden.

Je bent een XMLHttpRequest maar liefst 200x in een loop aan het uitvoeren? Mocht je iets om de n tijd willen herhalen, gebruik dan setInterval(). Haal die loop in ieder geval eerst eens weg om je probleem beter te isoleren.

Dan is het nog van belang wat die AjaxRequestProvider.RegisterRequest() doet. In ieder geval lijkt het erop dat nergens in twee() die (idioot gespelde) MijnVAr een andere waarde toegewezen krijgt. Je kunt het beste in je callback() function de responseText uitlezen en dat daar doen.

En die return op regel 6 is inderdaad zinloos, want je wijst de return waarde niet expliciet ergens aan toe.

Kan je ook s.v.p. je nieuwe code in een code tag zetten zonder die script tags en met Javascript syntax-highlighting aan? Zie de UBB-codes voor uitleg. En je indentation helpt ook niet echt.

[Verwijderd]

Ik heb het ondertussen voor 90% werkend. Hartelijk dank voor de hulp!

Het enige wat ik nu nog mis is dat ik geen variabele naar mootools kan parsen.

ik heb deze code:

JavaScript:

function mijnFunctie(mijnVar){
var jsonRequest = new Request.JSON({url: 'json.php', onSuccess: mijnTweedeFunctie}).get({'blabla':0});
}

als ik blabla invoer dan werkt het perfect maar ik wil eigenlijk de waarde van mijnVar parsen.
Als ik blabla vervang door mijnVar dan wordt dat niet vertaald naar de waarde van mijnVar maar wordt de naam mijnVar 1-op-1 gebruikt.

[X-Lars]

Ik weet niet wat die get() method doet, maar waarom gebruik je niet gewoon je callback (mijnTweedeFunctie) om een waarde aan mijnVar toe te wijzen? Daarin heb je namelijk gewoon de response als JSON object beschikbaar.

Snap je wel goed hoe het werkt met callback functions en parameters enzo? Een "variabele naar mootools parsen" klinkt ook niet echt helder.

[Verwijderd]

X-Lars schreef op dinsdag 26 oktober 2010 @ 11:23:
Ik weet niet wat die get() method doet, maar waarom gebruik je niet gewoon je callback (mijnTweedeFunctie) om een waarde aan mijnVar toe te wijzen? Daarin heb je namelijk gewoon de response als JSON object beschikbaar.

Snap je wel goed hoe het werkt met callback functions en parameters enzo? Een "variabele naar mootools parsen" klinkt ook niet echt helder.

Ok, moet eerlijk toegeven dat die callback functies mij niet duidelijk zijn.

snap er eerlijk gezegd nu geen f*** meer van. Ik moet een variabele vullen met een waarden vanuit een json "bestand" en het lukt me nu voor geen meter meer.
Ik heb een script klaar voor 1 json-response, maar voor een andere waarde krijg ik een net andere json-response. Hiervoor heb ik mijn script aangepast en nu werkt het allemaal ineens niet meer.

Voor de duidelijkheid de json-response is als volgt:

code:

{ "_GBLPT1001": [19.7400,""]}

JavaScript:

        var varMijnvar;  // zo is het een global var? 
        var jsonRequest = new Request.JSON({url: '../json.do?_GBLPT1001', onSuccess: function(varsUitjson){
        alert(varsUitjson['_GBLPT1001']); // print 19.7400,"" en ik moet alleen het getal behouden
        varMijnvar_temp=varsUitjson['_GBLPT1001'];
        varMijnvar=varMijnvar_temp[0]; // varMijnvar = 19.7400
        console.log(varsUitjson); // "_GBLPT1001": [19.7400,""]
        console.log(varMijnvar); // varMijnvar = 19.7400
        }}).get();

        document.write(varMijnvar); // hier is varMijnvar 'undefined'?

[Gamebuster]

Ajax is asynchroon. Het uitvoeren van de code gaat door na de request en er wordt niet gewacht op een reactie. Buiten de callbackfunctie zal je 'varmijnvar' dus niet beïnvloed worden. Pas veel later, wanneer de reactie ontvangen is door de browser, wordt de callbackfunctie gebruikt met het resultaat.

De code onder je de functie voor de Ajax request wordt dus veel eerder uitgevoerd dan de code in de callbackfunctie

Je document.write( 'varmijnvar') moet dus in de callbackfunctie. Echter, document.write werkt niet in de callbackfunctie functie, gebruikt alert of log om te testen.

[ Voor 11% gewijzigd door Gamebuster op 29-10-2010 10:56 ]

[Verwijderd]

Gamebuster schreef op vrijdag 29 oktober 2010 @ 10:55:
Ajax is asynchroon. Het uitvoeren van de code gaat door na de request en er wordt niet gewacht op een reactie. Buiten de callbackfunctie zal je 'varmijnvar' dus niet beïnvloed worden. Pas veel later, wanneer de reactie ontvangen is door de browser, wordt de callbackfunctie gebruikt met het resultaat.

De code onder je de functie voor de Ajax request wordt dus veel eerder uitgevoerd dan de code in de callbackfunctie

Je document.write( 'varmijnvar') moet dus in de callbackfunctie. Echter, document.write werkt niet in de callbackfunctie functie, gebruikt alert of log om te testen.

Dat snap ik, maar hoe krijg ik de waarde 19.7400 dan wél in de variabele varmijnvar?

Dat is namelijk mijn probleem. Ik heb de waarde van varMijnvar nodig om verer mee te werken.
En het stomme is dat het bij de andere jsnon responses wel werkt. Maar niet bij deze.

[X-Lars]

Nou ja, heb ik MooTools ook eens gebruikt:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JSON request with MooTools</title>
        <script type="text/javascript" src="../vendor/mootools/mootools-core-1.3-full-nocompat.js"></script>
        <script type="text/javascript">

            var sGlobalVar; // Equal to window.sGlobalVar
            
            var app = {}; // Namespace
            
            app.myProperty; // Let's not pollute global scope
            
            app.goGetSome = function() {
            
                var jsonRequest = new Request.JSON({url:'dummy.json', onSuccess: function(oResponse) {
                
                    console.dir(oResponse); // Inspect response
                
                    sGlobalVar = oResponse._GBLPT1001[0]; // Set global var (evil)
                    
                    app.myProperty = oResponse._GBLPT1001[0]; // Let's not pollute global scope
                    
                    $$('ul')[0].set('html', '<li>' + app.myProperty + '</li>');
                
                }}).get();
                
            };
            
            window.addEvent('domready', function() {
                app.goGetSome();
            });
            
        </script>
    </head>
    <body>
        <ul></ul>
    </body>
</html>

[Verwijderd]

Hoi Extralarge,

bedankt voor de code, maar ik ben mischien een beetje heel erg dom. Ik wil namelijk dat de waarde die nu in app.myProperty beschikbaar is voor een ander stuk code.

Voor de "duidelijkheid": ik gebruik 4x een dergelijke code om 4 waarden uit te lezen en die zet ik vervolgens in een grafiek die elke 100 ms geupdate wordt.

[Gamebuster]

Verwijderd schreef op vrijdag 29 oktober 2010 @ 14:05:
Hoi Extralarge,

bedankt voor de code, maar ik ben mischien een beetje heel erg dom. Ik wil namelijk dat de waarde die nu in app.myProperty beschikbaar is voor een ander stuk code.

Voor de "duidelijkheid": ik gebruik 4x een dergelijke code om 4 waarden uit te lezen en die zet ik vervolgens in een grafiek die elke 100 ms geupdate wordt.

Je moet vanuit de callback van de request dat "andere stuk code" aanroepen.

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>JSON request with MooTools</title> 
        <script type="text/javascript" src="../vendor/mootools/mootools-core-1.3-full-nocompat.js"></script> 
        <script type="text/javascript"> 

            // Ander stuk code...
            function appPropertyUpdated() { alert(app.myProperty); }

            var sGlobalVar; // Equal to window.sGlobalVar 
             
            var app = {}; // Namespace 
             
            app.myProperty; // Let's not pollute global scope 
             
            app.goGetSome = function() { 
             
                var jsonRequest = new Request.JSON({url:'dummy.json', onSuccess: function(oResponse) { 
                 
                    console.dir(oResponse); // Inspect response 
                 
                    sGlobalVar = oResponse._GBLPT1001[0]; // Set global var (evil) 
                     
                    app.myProperty = oResponse._GBLPT1001[0]; // Let's not pollute global scope 
                     
                    $$('ul')[0].set('html', '<li>' + app.myProperty + '</li>'); 

                    appPropertyUpdated();
                 
                }}).get(); 
                 
            }; 
             
            window.addEvent('domready', function() { 
                app.goGetSome(); 
            }); 
             
        </script> 
    </head> 
    <body> 
        <ul></ul> 
    </body> 
</html>

Iedere 100 milliseconden een grafiek updaten is overigens een beetje zwaar. Een gemiddeld AJAX request duurt al langer dan dat. Ik zou op z'n minst iedere 500 milliseconden doen.

[ Voor 4% gewijzigd door Gamebuster op 29-10-2010 14:38 ]

[Verwijderd]

dit suk heb ik nu en ik ben bank dat er iets helemaal mis is met de json response.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JSON request with MooTools</title>
        <script type="text/javascript" src="../js/mootools.js"></script>
        <script type="text/javascript">

            var sGlobalVar1; // Equal to window.sGlobalVar
            var sGlobalVar2; // Equal to window.sGlobalVar
            var sGlobalVar3; // Equal to window.sGlobalVar
            var sGlobalVar4; // Equal to window.sGlobalVar
            var app1 = {}; // Namespace
            var app2 = {};
            var app3 = {};
            var app4 = {};
            app1.myProperty1; // Let's not pollute global scope
            app2.myProperty2;
            app3.myProperty3;
            app4.myProperty4;
            
            app1.goGetSome = function() {
            
                var jsonRequest = new Request.JSON({url:'../json.do?_GBLPT1001', onSuccess: function(oResponse) {
                
                    //console.dir(oResponse); // Inspect response
                
                    sGlobalVar1 = oResponse._GBLPT1001[0]; // Set global var (evil)
                    
                    app1.myProperty1 = oResponse._GBLPT1001[0]; // Let's not pollute global scope
                    
                    $$('#content1').set('html', app1.myProperty1 );
                
                }}).get();
                
            };
             app2.goGetSome = function() {
            
                var jsonRequest = new Request.JSON({url:'../json.do?_GBLPT1002', onSuccess: function(oResponse) {
                
                    //console.dir(oResponse); // Inspect response
                
                    sGlobalVar2 = oResponse._GBLPT1002[0]; // Set global var (evil)
                    
                    app2.myProperty2 = oResponse._GBLPT1002[0]; // Let's not pollute global scope
                    
                    $$('#content2').set('html',app2.myProperty2);
                    
                }}).get();
                
            }; 
             app3.goGetSome = function() {
            
                var jsonRequest = new Request.JSON({url:'../json.do?_GBLPT1003', onSuccess: function(oResponse) {
                
                    //console.dir(oResponse); // Inspect response
                
                    sGlobalVar3 = oResponse._GBLPT1003[0]; // Set global var (evil)
                    
                    app3.myProperty3 = oResponse._GBLPT1003[0]; // Let's not pollute global scope
                    
                    $$('#content3').set('html', app3.myProperty3);
                    
                }}).get();
                
            };  
             app4.goGetSome = function() {
            
                var jsonRequest = new Request.JSON({url:'../json.do?_GBLPT1004', onSuccess: function(oResponse) {
                
                    //console.dir(oResponse); // Inspect response
                
                    sGlobalVar4 = oResponse._GBLPT1004[0]; // Set global var (evil)
                    
                    app4.myProperty4 = oResponse._GBLPT1004[0]; // Let's not pollute global scope
                    
                    $$('#content4').set('html', '<li>' + app4.myProperty4 + '</li>');
                    
                }}).get();
                
            };              
            window.addEvent('domready', function() {
                app1.goGetSome();
            });
           
    function myRefresh(){
        app1.goGetSome();
        app2.goGetSome();
        app3.goGetSome();
        app4.goGetSome();
    }
    window.setInterval(myRefresh, 500);
    
    //sGlobalVar= $$('ul')[1].get('html', '<li>' + app2.myProperty + '</li>');
        </script>
    </head>
    <body>
        <ul></ul>
        <ul></ul>
        <div id="content1"></div>
        <div id="content2"></div>
        <div id="content3"></div>
        <div id="content4"></div>
        <div id="content5"></div>
        <script>
                    sGlobalVar=document.getElementById('content2').value;
                document.getElementById('content5').innerHTML=parseFloat(sGlobalVar);</script>
                  // ^^^^^^^^^^^  HIER GAAT HET MIS  ^^^^^^^^
    </body>
</html>

ik heb sGlobalVar zowel met als zonder parseFloat geprobeerd. Er staan absoluut 4 verschillende waarden in de div's maar ik kan er verder niks mee.

[Gamebuster]

JavaScript:

sGlobalVar=document.getElementById('content2').value; 
document.getElementById('content5').innerHTML=parseFloat(sGlobalVar);

Dat moet in de callback-functie.

Verder zal ik maar geen opmerkingen plaatsen over de netheid van je code.

[ Voor 21% gewijzigd door Gamebuster op 29-10-2010 15:01 ]

[Verwijderd]

Gamebuster schreef op vrijdag 29 oktober 2010 @ 15:00:

JavaScript:

sGlobalVar=document.getElementById('content2').value; 
document.getElementById('content5').innerHTML=parseFloat(sGlobalVar);

Dat moet in de callback-functie.

Maar dat kan "niet" want dan kan ik de 4 variabelen die ik heb niet naar de grafiekcomponent pompen.
Als elke functie zijn eigen callback heeft dan werkt de grafiek niet en op de e.o.a.manier krijg ik de variabelen niet vanuit de ene functie naar de andere (zonder callback)

Verder zal ik maar geen opmerkingen plaatsen over de netheid van je code.

Liever niet nee Moet ff snel kijken of iets werkt en dan maar eens fatsoeneren.

[X-Lars]

Verwijderd schreef op vrijdag 29 oktober 2010 @ 14:45:
dit suk heb ik nu en ik ben bank dat er iets helemaal mis is met de json response.

HTML:

...

Dude, ik weet gewoon niet waar ik moet beginnen. Ik zou zeggen, ga er nou eens even heel rustig voor zitten. Begin eens met mijn voorbeeld en kijk daar eerst vijf keer naar. Zorg dat je dat goed begrijpt en stel daar eventueel vragen over. Je begint nu als een dolle rond te hacken. Als iets meer dan 1x moet gebeuren, kopieer je de hele code maar net zo vaak.

Verwijderd schreef op vrijdag 29 oktober 2010 @ 15:06:
[...]

Moet ff snel kijken of iets werkt [...]

Dat gaat hem sowieso niet worden. Deze beginselen van Javascript etc. zijn je blijkbaar nog niet helemaal eigen, dus als je echt iets wilt zul je er ook echt tijd in moeten steken. Geduld is een schone zaak.

[Verwijderd]

X-Lars schreef op vrijdag 29 oktober 2010 @ 15:20:
[...]




Dude, ik weet gewoon niet waar ik moet beginnen. Ik zou zeggen, ga er nou eens even heel rustig voor zitten. Begin eens met mijn voorbeeld en kijk daar eerst vijf keer naar. Zorg dat je dat goed begrijpt en stel daar eventueel vragen over. Je begint nu als een dolle rond te hacken. Als iets meer dan 1x moet gebeuren, kopieer je de hele code maar net zo vaak.


[...]


Dat gaat hem sowieso niet worden. Deze beginselen van Javascript etc. zijn je blijkbaar nog niet helemaal eigen, dus als je echt iets wilt zul je er ook echt tijd in moeten steken. Geduld is een schone zaak.

sorry je hebt gelijk,maar dat kwam omdat ik de waarden al vrij senl in de DIV's kreeg.
Even terug naar jou code:

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>JSON request with MooTools</title> 
        <script type="text/javascript" src="../vendor/mootools/mootools-core-1.3-full-nocompat.js"></script> 
        <script type="text/javascript"> 

            // Ander stuk code...
            

            var sGlobalVar; // Equal to window.sGlobalVar

var sGlobalVar zou nu toch een globale variabele moeten zijn?

HTML:

            function appPropertyUpdated() { 
                                            alert(app.myProperty); 
                        //alert gaat goed
                                            sGlobalVar=app.myProperty;
                                            alert(sGlobalVar);
                       // ook deze alert gaat goed  
                                            }

Maar nu? ik wil de waarde van sGlobalVar of app.myProperty verderop gebruiken.
Aangezien sGlobalVar globaal gedeclareerd is zou daar nu de juiste waarde in moeten staan, maar dat is blijkbaar niet zo. buiten deze functie is sGlobalVar "undefined" of leeg.

HTML:

            var app = {}; // Namespace 
             
            app.myProperty; // Let's not pollute global scope 
             
            app.goGetSome = function() { 
             
                var jsonRequest = new Request.JSON({url:'../json.do?_GBLPT1001', onSuccess: function(oResponse) { 
                 
                    console.dir(oResponse); // Inspect response 
                 
                    sGlobalVar = oResponse._GBLPT1001[0]; // Set global var (evil) 
                     
                    app.myProperty = oResponse._GBLPT1001[0]; // Let's not pollute global scope 
                     
                    $$('ul')[0].set('html', '<li>' + app.myProperty + '</li>'); 

                    appPropertyUpdated();
                 
                }}).get(); 
                 
            }; 
             
            window.addEvent('domready', function() { 
                app.goGetSome(); 
                console.log(sGlobalVar); // geeft undefined
            }); 
             console.log(sGlobalVar); // geeft undefined
        </script> 
    </head> 
    <body> 
        <ul></ul> 
    </body> 
</html>

Dus dacht ik, dan verplaats ik de waarde nu nu tussen <li> staat naar een <div> en lees vervolgens die waarde wel uit de <div> om er zo mee verder te gaan.

helaas...

[X-Lars]

Kijk, dat geeft al een beter beeld van het probleem

De code als geheel wordt niet regel voor regel uitgevoerd. Bijvoorbeeld app.goGetSome() is een method die gedefinieerd wordt, maar ook slechts dat. Hij wordt dus nog niet uitgevoerd. Dat gebeurt pas bij de aanroep in de "domready" event handler. Het is ook wel de idee om allerlei functions en methods te definieren, voordat je ze aanroept als er een event heeft plaatsgevonden (zoals "load" op window of "click" op een button).

De eerste "undefined" komt omdat de XMLHttpRequest asynchroon is (wat Gamebuster al aangaf). Oftewel je moet een callback function gebruiken; deze wordt automatisch uitgevoerd als de request is uitgevoerd en er een response beschikbaar is. In deze callback kun je dan deze response gebruiken.

De tweede "undefined" komt doordat het event "domready" nog niet is geweest. Dus ook de call naar app.goGetSome() niet. Deze code wordt dus nog eerder uitgevoerd dan waar je eerste "undefined" veroorzaakt wordt.

Tip: zet her en der eens console.info(1), console.info(2) etc., dan zie je in ieder geval de volgorde van e.e.a.

Tenslotte kan je mooi oResponse._GBLPT1001[0] aan je function call meegeven:

code:

appPropertyUpdated(oResponse._GBLPT1001[0]);

Dan is die waarde beschikbaar in die function body van appPropertyUpdated, wat de function ook herbruikbaar maakt

Ik verlaat het topic nu wel hoor, wellicht dat anderen je verder willen helpen. Maar nog beter is misschien om een tutorial te zoeken of een goed boek. Google is your friend.

[Verwijderd]

Tip: zet her en der eens console.info(1), console.info(2) etc., dan zie je in ieder geval de volgorde van e.e.a.

Ha, maar dat scheelt ineens een heleboel grijze haren!
nu wordt e.e.a al snel duidelijker.

[Verwijderd]

DONE!

pff hartelijk dank allemaal voor de hulp!

Het is geen mooi stukje werk geworden maar ik snap nu beter hoe het werkt.

stukkie code

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>JSON request with MooTools</title> 
        <script type="text/javascript" src="../js/mootools.js"></script> 
        <script type="text/javascript"> 
            var sGlobalVar; // Equal to window.sGlobalVar 
            var sGlobalVar2;
            // Ander stuk code...
            function checkValue(){
                    console.log("here is am!! "+sGlobalVar2);
                    console.info(1);
                    document.getElementById('content5').innerHTML=sGlobalVar2;
                }


            function appPropertyUpdated() { console.info(2);
                                            //alert(app.myProperty);
                                            sGlobalVar2=app.myProperty[0];
                                            sGlobalVar3=app.myProperty[1];
                                            console.log('sGlobalVar2 in 2 is'+sGlobalVar2);
                                            console.log('sGlobalVar3 in 2 is'+sGlobalVar3);
                                            //alert(sGlobalVar2);   
                                            checkValue(sGlobalVar2);
                                            }
            var app = {}; // Namespace 
             
            app.myProperty=Array(); // hierin staan straks de 4 verschillende waarden op pos. 0 t/m 3
             
            function goGetSome1(nextUrl,counter) { 
             
                var jsonRequest = new Request.JSON({url:'../json.do?'+nextUrl, onSuccess: function(oResponse) { 
                    console.info(9);
                 
                    //console.dir(oResponse); // Inspect response 
                 
                    sGlobalVar = oResponse[nextUrl]; // kan nu dus met 1 functie alle variabelen aanroepen
                    console.log(sGlobalVar);
                    app.myProperty[counter] = sGlobalVar[0]; // Let's not pollute global scope (doen ik wel *grin*)
                     
                    $$('#content3').set('html',app.myProperty[counter]); 

                    appPropertyUpdated();
                 
                }}).get(); 
                 console.info(3);
            } 
           
            
            window.addEvent('domready', function() { 
            }); 
             console.log(window.sGlobalVar2);
        function myRefresh(){
        var xxx = new goGetSome1('_GBLPT1001',0);
        var xxx = new goGetSome1('_GBLPT1002',1);
                // kan nog mooier met een array en een for-next loop
        setTimeout("",2000);
    }
    for (i=0;i<10;i++){ // gaat straks automatisch elke seconde, maar dat is niet handig met mijn huidige brabbelcode
    myRefresh();
    }
        </script> 
    </head> 
    <body> 
        <span id="content3" style="color:#7f2a58;"></span>
        <span id="content5" style="color:#000000;"></span>
        <script>
</script>
        
    </body> 
</html>