Ajax and IE6

[Vincent]

Hi all,

I've seen a lot of ajax examples on the web that used an event handler
called 'processChange' for the onreadystatechange event. Normally,
this looks like this:

if(window.XMLHttpRequest) obj = new XMLHttpRequest();
else if(window.ActiveXObject) obj = new
ActiveXObject('Microsoft.XMLHTTP');

obj.onreadystatechange = processChange;
....

function processChange(){
if(obj.readystate != 4) return;
if(obj.status == 200){
// do something
}
}

Well, this works on IE6 and Firefox, but I would like to use this
instead of obj inside of the processChange function (this.readystate
and this.status). This works fine on firefox, but on IE6 it doesn't.
Can someone tell me why?

For the record, I want to use this instead of obj because I want to
make a series of request with a for loop and since happens all inside
of the same closure, obj would refer to the last instance of my
xmlhttprequest.

Thanks,

Vincent

 

[slebetman]

if(window.XMLHttpRequest) obj = new XMLHttpRequest();
else if(window.ActiveXObject) obj = new
ActiveXObject('Microsoft.XMLHTTP');

obj.onreadystatechange = processChange;
...

function processChange(){
   if(obj.readystate != 4) return;
   if(obj.status == 200){
   // do something
   }

}
<snip>
For the record, I want to use this instead of obj because I want to
make a series of request with a for loop and since happens all inside
of the same closure, obj would refer to the last instance of my
xmlhttprequest.

Rather than using 'this', which changes meaning depending on the
context where the code gets executed, there is another trick you can
use to avoid creating a closure: pass the value of obj instead of
using obj directly.

/* function generator allowing us to pass
* the xmlhttprequest object rather than
* create a closure:
*/
function makeProcessChangeHandler (ajaxObj) {
/* admittedly, it is still a closure
* only in a different scope
*/
return function () {
if(ajaxObj.readystate != 4) return;
if(ajaxObj.status == 200){
// do something
}
}
}
obj.onreadystatechange = makeProcessChangeHandler(obj);

 

[Henry]

On Jul 22, 12:40 pm, slebetman wrote:

... , there is another trick you can use to avoid
creating a closure: pass the value of obj instead of
using obj directly.

/* function generator allowing us to pass
* the xmlhttprequest object rather than
* create a closure:
*/
function makeProcessChangeHandler (ajaxObj) {
/* admittedly, it is still a closure
* only in a different scope
*/
return function () {
if(ajaxObj.readystate != 4) return;
if(ajaxObj.status == 200){
// do something
}
}}

obj.onreadystatechange = makeProcessChangeHandler(obj);

That is creating a closure.

 

[Henry]

Hi all,

I've seen a lot of ajax examples on the web that used an
event handler called 'processChange' for the
onreadystatechange event. Normally, this looks like this:

if(window.XMLHttpRequest) obj = new XMLHttpRequest();
else if(window.ActiveXObject) obj = new
ActiveXObject('Microsoft.XMLHTTP');

obj.onreadystatechange = processChange;
...

function processChange(){
if(obj.readystate != 4) return;
if(obj.status == 200){
// do something
}

}

Well, this works on IE6 and Firefox, but I would like to
use this instead of obj inside of the processChange function
(this.readystate and this.status). This works fine on
firefox, but on IE6 it doesn't. Can someone tell me why?

In javascript the value of the - this - keyword is (entirely and only)
decided by how a function is called. When a browser is doing the
calling, as in this case, you have no influence over how it does so,
and with XML HTTP request objects how the - onreadystatechange -
listener is called varies. Thus no matter how much you may want to use
- this - within the listener you cannot rely on it referring to the
XML HTTP request object.

People either use closures to refer to the XML HTTP request objects
through the listener function's scope chain, or they use global
variables (and have huge problems if their request overlap as the
global variable reference for the first request gets over ridden by
the second).

For the record, I want to use this instead of obj because
I want to make a series of request with a for loop and
since happens all inside of the same closure, obj would
refer to the last instance of my xmlhttprequest.

Then you want multiple small closures. Slebetman's suggestion may not
"avoid creating a closure", but it would solve your loop problem as it
creates a distinct small closure for each call to the -
makeProcessChangeHandler - function, and if the argument is a distinct
XML HTTP request object you would end up with one callback function
and one closure pre XML HTTP request object. Allowing all requests to
be independent of one and other, and only leaving you with the problem
of handing the fact that the order of the responses will not
necessarily be the same as the order of the requests.

 

[Jorge]

Rather than using 'this', which changes meaning depending on the
context where the code gets executed, there is another trick you can
use to avoid creating a closure: pass the value of obj instead of
using obj directly.

/* function generator allowing us to pass
 * the xmlhttprequest object rather than
 * create a closure:
 */
function makeProcessChangeHandler (ajaxObj) {
  /* admittedly, it is still a closure
   * only in a different scope
   */
  return function () {
    if(ajaxObj.readystate != 4) return;
    if(ajaxObj.status == 200){
    // do something
    }
  }}

obj.onreadystatechange = makeProcessChangeHandler(obj);

Yeah !
Other objects and data could be captured as needed in that same
closure as well :

xhr.onreadystatechange = (function (xhr, object, data) {
return function () {

//xhr, object, and data have been captured in the closure.

}
})(xhr, someOtherObject, i);


"auto-reposting, closurized, xhr monitor and exerciser"
http://tinyurl.com/6mm5tm

--Jorge.

 

[Jorge]

"auto-reposting, closurized, xhr monitor and exerciser"

http://tinyurl.com/6mm5tm
BTW, FF3 now seems to handle 6 simultaneous requests...
Safari, Opera: 4
FF2: 2
etc: 2

--Jorge.