[js] XMLHttpRequest klasse -> stateChange -> I give up

[BikkelZ]

Ik kan in principe door heel deze klass met this.req de xmlhttprequest bereiken.

Behalve met processReqChange.

Bovendien moet er nu bij eventueel succes een functie aangeroepen met parameters daarin, waaronder een array. Kom ik ook niet helemaal uit, want het lijkt er op dat je wederom alleen kale functies kan aanroepen.

Bij de eerste processReqChange() kapt hij er mee omdat this.req geen properties heeft.

JavaScript:

    function processReqChange()
    {
            // only if req shows "loaded"
            if (this.req.readyState == 4)
            {
                // only if "OK"
                if (this.req.status == 200)
                {
                    if (type == 'xml')
                    {
                        alert(this.req);
                    }
                    else
                    {
                        alert(this.req);
                    }
                }
                else
                {
                    alert("There was a problem retrieving the data:\n" + this.req.statusText + 'status:' + this.req.status);
                }
            }
    }

[crisp]

omdat de onreadystatechange in de global scope wordt uitgevoerd; dat is op te lossen met een closure:

JavaScript:

{
  var self = this;
  var parm1 = 'foo';
  var parm2 = [1,2,3];
  this.req.onreadystatechange = function()
  {
    self.processReqChange.call(self, parm1, parm2);
  }
}

Parameters zijn ook geen probleem zoals je ziet

[ Voor 18% gewijzigd door crisp op 15-09-2006 12:37 ]

[BikkelZ]

OK, dat was de gouden tip. Dit werkt:

JavaScript:

    function processReqChange()
    {
            // only if req shows "loaded"
            if (this.req.readyState == 4)
            {
                // only if "OK"
                if (this.req.status == 200)
                {
                    if (type == 'xml')
                    {
                        addParentNodeLoaded(this.req.responseXML, this.elementType, this.ids);
                    }
                    else
                    {
                        addParentNodeLoaded(this.req.responseText, this.elementType, this.ids);
                    }
                }
                else
                {
                    alert("There was a problem retrieving the data:\n" + this.req.statusText + 'status:' + this.req.status);
                }
            }
    }

Ik wil alleen eigenlijk het liefste een willekeurig van te voren gedefinieerd commando uitvoeren, mét parameters.

----------------------------------

En wat is een goede papieren of online informatiebron voor dit soort diepere JavaScript? Ik vind meer tutorials niveau likmevessie over OO en JS dan ik nodig zou hebben om mijn hele huis te behangen, inclusief de buitenkant, maar dit soort dingen.....dus niet.

[ Voor 17% gewijzigd door BikkelZ op 15-09-2006 12:49 ]

[crisp]

een willekeurige handler is ook geen probleem:

JavaScript:

{
  var self = this;
  var parm1 = 'foo';
  var parm2 = [1,2,3];
  var handler = this.processReqChange; // of iets anders ;)
  this.req.onreadystatechange = function()
  {
    handler.call(self, parm1, parm2);
  }
}

en dit soort zaken vind je inderdaad doorgaans niet in de popie-jopie tutorials ala w3schools. Koop een goed boek en lees ook vooral de weblogs van mensen die er echt verstand van hebben (alleen ik heb geen weblog )

[BikkelZ]

*dummy mode*

Stel dat ik this.funcToDo heb met daarin een string met de naam van functie die ik wil uitvoeren, waar gaat die dan voorkomen in dit voorbeeld? De onreadystatechange blijft op zich het zelfde, maar de uiteindelijke functie die aangeroepen wordt (de this.funcToDo) verandert. Ik kan met eval() gaan kloten, maar die execute een string, en dat wordt weer pielen met die array met id's en/of objecten die ik vaak mee moet sturen.

*learn mode*

Gewoon een O'Reilly uit de schappen trekken of heb je betere tips voor boeken?

[ Voor 37% gewijzigd door BikkelZ op 15-09-2006 13:04 ]

[BikkelZ]

Volgens mij zit de crux hem in het feit dat ik een referentie naar de functie die ik wil uitvoeren of die de XML JS class aanroept meestuur of kan opzoeken. Zo gauw ik die referentie heb, kan ik hem ook uitvoeren.

[killercow]

Crisp, welk goed boek stel jij voor, voor dit soort javascript uiteg?

Ik snap ondertussen precies wat jij hier uitlegt, en doet, sterker nog, toen ik de topic naam zag dacht ik, Oeh dat kan ik utileggen , hopen dat crisp er nog niet op geantwoord heeft

toch is een goed boek altijd handig.

[ Voor 3% gewijzigd door killercow op 15-09-2006 13:36 ]

[crisp]

BikkelZ schreef op vrijdag 15 september 2006 @ 13:02:
*dummy mode*

Stel dat ik this.funcToDo heb met daarin een string met de naam van functie die ik wil uitvoeren, waar gaat die dan voorkomen in dit voorbeeld? De onreadystatechange blijft op zich het zelfde, maar de uiteindelijke functie die aangeroepen wordt (de this.funcToDo) verandert. Ik kan met eval() gaan kloten, maar die execute een string, en dat wordt weer pielen met die array met id's en/of objecten die ik vaak mee moet sturen.

heel generiek:

JavaScript:

function bind(object, handler, parms)
{
    var obj = object;

    if (handler instanceof Array && handler.length == 2)
    {
        obj = handler[0];
        handler = handler[1];
    }

    if (handler instanceof String)
    {
        if (obj[handler] && obj[handler] instanceof Function)
            handler = obj[handler];
        else if (window[handler] && window[handler] instanceof Function)
            handler = window[handler];
    }

    if (!(handler instanceof Function))
        handler = function() { }

    return function(e)
    {
        if ((e = e || event)) parms.push(e);
        handler.apply(object, parms);
    }
}

en dan:

JavaScript:

this.req.onreadystatechange = bind(this, this.funcToDo, ['parm1', 'parm2']);

waarbij this.funcToDo dus zelfs een array kan zijn met een referentie naar een totaal ander object en een method daarvan - een beetje zoals call_user_func in PHP

*learn mode*

Gewoon een O'Reilly uit de schappen trekken of heb je betere tips voor boeken?

De definitive guide van O'Reilly is een van de betere naslagwerken; note dat het een reference is en geen boek dat bol staat van voorbeelden en handigheidjes of best practices.

[ Voor 5% gewijzigd door crisp op 15-09-2006 13:51 ]

[Stephan Oudmaijer]

tis leuk dat om zelf te knutsellen, maar je kunt ook al bestaande toolkits gebruiken die deze problematiek al voor je opgelost hebben , misschien is Dojo wel interessant voor je (http://dojotoolkit.org/)

[BikkelZ]

CK schreef op vrijdag 15 september 2006 @ 13:53:
tis leuk dat om zelf te knutsellen, maar je kunt ook al bestaande toolkits gebruiken die deze problematiek al voor je opgelost hebben , misschien is Dojo wel interessant voor je (http://dojotoolkit.org/)

Het probleem met toolkits is dat ik mijn werkwijze moet gaan aanpassen aan de toolkit, in plaats van andersom, als ik nog steeds niet weet waar ik mee bezig ben en dus niet bij machte om het zo te maken of te veranderen dat het voldoet aan mijn specs.

-=-------------

Thnx voor de code. Ik denk dat ik wel zie hoe het ongeveer in elkaar steekt. Ik zit nu thuis, maar ga maandag first thing die bind functie proberen in te passen.

[ Voor 14% gewijzigd door BikkelZ op 15-09-2006 14:27 ]

[crisp]

CK schreef op vrijdag 15 september 2006 @ 13:53:
tis leuk dat om zelf te knutsellen, maar je kunt ook al bestaande toolkits gebruiken die deze problematiek al voor je opgelost hebben , misschien is Dojo wel interessant voor je (http://dojotoolkit.org/)

Ja, er zijn zat van dat soort toolkits en allemaal pakken ze zaken op een andere manier aan en met een andere syntax. Je bent dan niet meer bezig met javascript maar met het aanleren van een dogma van de makers van de betreffende toolkit. Toolkits zijn abstracties en buiten het feit dat ze je werk kunnen vergemakkelijken kunnen ze het je ook behoorlijk lastig maken op het punt waar het bepaalde zaken niet ondersteund of waar het gaat lekken.

[BikkelZ]

Is er niet een manier waarop ik dat hele stateChange gebeuren kan verbergen in een klasse? Ik zit er eigenlijk gewoon totaal op te wachten dat ik ergens midden in een functie moet stoppen om mijn gegevens op te halen, halsbrekende toeren uit moet halen om toch vooral weer de gegevens terug te krijgen die ik had om vervolgens in een tweede functie te doen wat eigenlijk gewoon het logische vervolg is van waar ik in de eerste functie mee begon.

Iets wat je ongeveer zo aanroept:

JavaScript:

var xmlobj = new XMLDataObject(url, 'xml');
var xmldata = xmlobj->getData();
if (xmldata)
{
// doe blaat
}
else
{
alert(xmldata->getError());
}

Waar ik me eigenlijk groen en geel aan erger is het feit dat dat XMLHttpRequestObject zo in elkaar zit dat het neerkomt op:

- Zeg maar waar ik het kan halen
- Dan ga ik er even wat mee doen, ga gerust verder waar je mee bezig was, want van mij hoor je niks meer
- En als ik dan een keer wat heb nou dan roep ik wel weer een functie aan

Terwijl ik het volgende wil:

- Haal die data daar op
- Ik wacht wel tot je er mee klaar bent en ik de gevens heb
- En dan ga ik verder in mijn script waar ik gebleven was met die gegevens

[crisp]

ehm, geen asynchroon request doen maar een synchroon request?

[BikkelZ]

Ah, de derde parameter.

Boefjes zijn het, om die te verstoppen!