[Javascript] AJAX app causing excessive browser memory usage

[Rick Emery]

Quoting Jonathan Buchanan <jonathan.buchanan at gmail.com>:

>> The last thing I tried was to create an object:
>>
>> function xhrObj() {
>>   this.isXHRBusy = false;
>> }
>>
>> xhrObj.prototype.getList() {
>>   if (!this.xhr) {
>>      this.xhr = commonUtils.getHTTPObject();
>>   }
>>   if (!this.isXHRBusy && this.xhr) {
>>      this.xhr.open("GET", "getXMLeventlist.php", true);
>>      this.xhr.onreadystatechange = this.handleXHRResponse;
>>      this.isEventListWorking = true;
>>      this.xhr.send(null);
>>   }
>> }
>>
>> xhrObj.prototype.handleXHRResponse() {
>>   if (HTTP_REQ_COMPLETE == this.xhr.readyState) {
>>      // process the response
>>   }
>> }
>>
>> When the response function checks readyState, I get a javascript error
>> "this.xhr has no properties". I thought I needed to set xhr to
>> something either in the constructor or by adding it to the
>> xhrObj.prototype, but what would I set it to? Setting it to the
>> xmlhttprequest object defeats the purpose of creating and destroying
>> it on the fly.
>>
>> I'm sure I'm just missing something simple...can anybody help me out?
>>
>> Thanks in advance,
>> Rick
>
> The problem in this case is that when handleXHRResponse() is called,
> "this" no longer refers to your xhrObj instance. You can use the
> built-in call[1] or apply[2] functions to execute the function in the
> scope of your xhrObj instance.

The short question: Why doesn't "this" in the handleXHRResponse()  
point to the object in which it resides (instance of xhrObj)?

Now let me explain why I'm confused :-)

I'm looking at the functions (above) as kind of like a class. I have  
an xhrObj "class" with constructor, containing the "property"  
isXHRBusy and the "methods" getList and handleXHRResponse. My code  
creates an object (instance) of this "class" by:

var elxhr = new xhrObj();

Now, in order to access a property of the object from within a method  
of the object, I have to use "this"; so to access isXHRBusy from, say,  
the getList method, I would say "this.isXHRBusy".

I leverage javascript's ability to dynamically add properties to  
objects when I create a new xmlhttprequest object in this line of the  
getList method:

this.xhr = commonUtils.getHTTPObject();

In my mind, this creates a new property called "xhr" in the elxhr  
object (which is an instance of xhrObj). Since handleXHRResponse is a  
member of the elxhr object, it makes sense to me that "this" would  
refer to the object in which the method resides.

Unfortunately, from the two links you provided, and the comments in  
your message, it seems that I'm mistaken.

Thanks for your reply,
Rick

P.S. As a sort of cheesy hack, I created the xmlhttprequest object as  
a property of the document object. I don't like it, but it worked and  
will have to suffice until I understand the "correct" way to do this.
-- 
Rick Emery

"When once you have tasted flight, you will forever walk the Earth
  with your eyes turned skyward, for there you have been, and there
  you will always long to return"
                                               -- Leonardo Da Vinci