[JS] AJAX object prototypen geeft werk niet ("this" fout?)

[Verwijderd]

Zoals uit de titel blijkt probeer ik een object te prototypen waarmee ik AJAX calls kan maken. Zie onderstaande code. Het vreemde is alleen dat als ik de code run, er niets gebeurt. Ik krijg ook geen foutmelding. Ik denk dat de fout zit bij een verkeerd gebruik van this in handleResponse. Ook weet ik niet zeker of regel 29 goed is. Wie kan mij helpen?

JavaScript:

Zecco.AJAX = function() {
  if (typeof ActiveXObject != "undefined") {
    this.http = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (typeof XMLHttpRequest != "undefined") {
    this.http = new XMLHttpRequest();
  }
};

Zecco.AJAX.prototype = {
  constructor: Zecco.AJAX,

  sendRequest: function(url) {
    if (typeof this.http != "undefined") {
      var req = this.http;
      req.open('get', url);
      req.onreadystatechange = this.handleResponse;
      req.send(null);
    }
  },
  
  handleResponse : function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      var update = new Array();
      if (response.indexOf('|') != -1) {
        update = response.split('|');
        for (i = 0; i < update.length; i = i + 2) {
          this.updatePage(update[i], update[i + 1]);
        }
      }
    }
  },
  
  updatePage : function(div, text) {
    var viewer = document.getElementById(div);
    if (viewer.nodeName == 'IMG') {
      viewer.src = text;
    }
    else {
      viewer.innerHTML = text;
    }
  }  
};

[Verwijderd]

De this op 29 verwijst naar het XMLHttpRequest object (het is tenslotte een event handler voor dat object). Hoe je dit op moet lossen? Lastig aangezien je de Zecco.AJAX.prototype = { ... } methode gebruikt waarbinnen je geen locale variabelen (a la var self = this) kunt declareren.

Edit: je zou dit kunnen proberen:

JavaScript:

sendRequest: function(url) {
  if (typeof this.http != "undefined") {
    var req = this.http;
    req.open('get', url);
    var self = this;
    req.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var response = this.responseText;
        var update = new Array();
        if (response.indexOf('|') != -1) {
          update = response.split('|');
          for (i = 0; i < update.length; i = i + 2) {
            self.updatePage(update[ i ], update[ i + 1 ]);
          }
        }
      }
    }
    req.send(null);
  }
},

[ Voor 51% gewijzigd door Verwijderd op 02-01-2008 08:38 ]

[JKVA]

Verwijderd schreef op woensdag 02 januari 2008 @ 08:31:
De this op 29 verwijst naar het XMLHttpRequest object (het is tenslotte een event handler voor dat object). Hoe je dit op moet lossen? Lastig aangezien je de Zecco.AJAX.prototype = { ... } methode gebruikt waarbinnen je geen locale variabelen (a la var self = this) kunt declareren.

En met een closure? Dus regel 17 vervangen door:

JavaScript:

req.onreadystatechange = function() { this.handleResponse(this); };

En 22 door:

JavaScript:

handleResponse : function(self) { 

Via die self moet je er dan bij kunnen.

Het is ff uit het blote hoofd (met nog steeds een halve kater) dus er kunnen wat syntaxfouten in zitten.

edit:
@Blues: Die van jou is mooier, dan heb je tenminste gewoon een member.

[ Voor 4% gewijzigd door JKVA op 02-01-2008 08:56 ]

[Verwijderd]

JKVA schreef op woensdag 02 januari 2008 @ 08:55:
[...]
En met een closure? Dus regel 17 vervangen door:

JavaScript:

req.onreadystatechange = function() { this.handleResponse(this); };

En 22 door:

JavaScript:

handleResponse : function(self) { 

Dan geeft 'ie weer een foutmelding:

this.handleResponse is not a function: this.handleResponse(this);

Verwijderd schreef op woensdag 02 januari 2008 @ 08:31:
De this op 29 verwijst naar het XMLHttpRequest object (het is tenslotte een event handler voor dat object). Hoe je dit op moet lossen? Lastig aangezien je de Zecco.AJAX.prototype = { ... } methode gebruikt waarbinnen je geen locale variabelen (a la var self = this) kunt declareren.

Hoe zou jij deze code dan opzetten? Wat is een meer gangbare methode? Ik dacht begrepen te hebben dat deze manier de minste overhead had en het netste was, maar brengt toch wel wat nadelen met zich mee.

Edit: je zou dit kunnen proberen:

JavaScript:

sendRequest: function(url) {
    // ...
    var self = this;
    req.onreadystatechange = function() {
      // ...
    }
    req.send(null);
  }
},

Dan krijg ik weer hetzelfde: geen error, maar ook geen resultaat. Voor zover ik kan zien wordt er geen responseText ontvangen. Op de server is trouwens alles getest; het is niet zo dat de server verkeerde of geen response stuurt...?

Overigens nogmaals de vraag wat een meer gangbare manier is, want ik vind het ook niet ideaal dat de handleResponse functionaliteit binnen sendRequest gedefinieerd moet worden. Daar wordt de code niet overzichtelijker van imho

[crisp]

Verwijderd schreef op woensdag 02 januari 2008 @ 08:31:
De this op 29 verwijst naar het XMLHttpRequest object [...]

Nee, dat is volledig afhankelijk van de implementatie (en dus onbetrouwbaar) : http://crisp.tweakblogs.n...-the-scope-of-events.html