OOP (and the XMLHttpRequest)

[Martin Honnen]

Börni wrote:

The problem: I assigned a function to xmlhttp.onreadystatechange, which
(for now) only alerts the response from an php script. BUT in the
function i always get an error saying xmlhttp has no properties?!

function xmlRequest() {
// check if request is already open
this.xmlhttp=false;
if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
this.xmlhttp = new XMLHttpRequest();
}
}

xmlRequest.method('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlhttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.open("POST", this.url, true);
this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;
charset=ISO-8859-1");
this.xmlhttp.onreadystatechange = this.getResponse;

Here you set the onreadystatechange handler to a function, when the
onreadystatechange handler is then called inside of the function the
'this' object is the XMLHttpRequest object so

xmlRequest.method('getResponse', function () {
if (this.xmlhttp.readyState==4) {
alert(this.xmlhttp.readyState)

here you need to access
this.readyState

 

[Börni]

Dear group,

i have some experience with javascript, but now i am trying to do object
oriented programming with it and i am somehow stuck.
I have tried the code so far only in Mozilla 1.7.3
I am trying to make an object which offers the functionaltity of the
xmlhttpRequest object ( my object is something like a wrapper ). the
constructor makes an new XMHttpequest object, and then there are methods
to POST or GET data.
The problem: I assigned a function to xmlhttp.onreadystatechange, which
(for now) only alerts the response from an php script. BUT in the
function i always get an error saying xmlhttp has no properties?!

thanks in advance (sorry for the bad english)
Bernhard

-
function xmlRequest() {
// check if request is already open
this.xmlhttp=false;
if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
this.xmlhttp = new XMLHttpRequest();
}
}

xmlRequest.method('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlhttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.open("POST", this.url, true);
this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;
charset=ISO-8859-1");
this.xmlhttp.onreadystatechange = this.getResponse;

this.content = "content=" + this.content;
this.xmlhttp.send(this.content);
});

xmlRequest.method('getResponse', function () {
if (this.xmlhttp.readyState==4) {
alert(this.xmlhttp.readyState)
}
});

if you wonder about the syntax xmlRequest.method, its just some sugar

Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};

 

[Martin Honnen]

ok, so i tried:
alert(this.readyState);

now the alert contains the text undefined.

It seems Mozilla doesn't set the 'this' object correctly (well at least
as it is the convention in other event handlers) for the
onreadystatechange handler, in my tests here 'this' is the function itself.
Anyway, with MSIE/Win and MSXML (Microsoft.XMLHTTP) the 'this' object in
the onreadystatechange handler isn't the request object either, it is
simply the window object there so your approach doesn't work out if you
go cross-browser.

What you could do instead is making use of a closure e.g.

xmlRequest.method('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlhttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.open("POST", this.url, true);

this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;
charset=UTF-8");

var myRequest = this;
this.xmlhttp.onreadystatechange = function () {
if (myRequest.xmlhttp.readyState === 4) {
alert(myRequest.xmlhttp.readyState);
}
};

this.content = "content=" + encodeURIComponent(this.content);
this.xmlhttp.send(this.content);
});

 

[Börni]

here you need to access

this.readyState

ok, so i tried:
alert(this.readyState);

now the alert contains the text undefined.

 

[Börni]

it seems like the reference in this gets destroyed (or something like
that).
Alerting this in the response function prints out the source of the same.
Alerting this in postVal just says [object OBJECT].
Weird

 

[Börni]

It seems Mozilla doesn't set the 'this' object correctly (well at least
as it is the convention in other event handlers) for the
onreadystatechange handler, in my tests here 'this' is the function itself.
Anyway, with MSIE/Win and MSXML (Microsoft.XMLHTTP) the 'this' object in
the onreadystatechange handler isn't the request object either, it is
simply the window object there so your approach doesn't work out if you
go cross-browser.

What you could do instead is making use of a closure e.g.

xmlRequest.method('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlhttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.open("POST", this.url, true);

this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;
charset=UTF-8");

var myRequest = this;
this.xmlhttp.onreadystatechange = function () {
if (myRequest.xmlhttp.readyState === 4) {
alert(myRequest.xmlhttp.readyState);
}
};

this.content = "content=" + encodeURIComponent(this.content);
this.xmlhttp.send(this.content);
});

Thank you very much!
It works.
I did some experiments on my own and perhaps you are intersted in the
result. i wrote some test code:

-
// gets called by some event handler
function goforit() {
var obj = new testObj();
obj.objFunc();
}

function testObj() {
this.var1 = "blabla";
}

testObj.method('objFunc', function() {
var ref = this.extFunc;
this.extFunc(); // outputs blabla
ref(); // outputs undefined
});

testObj.method('extFunc', function() {
alert(this.var1);
});
-

on a second look seems quite reasonable.

Have a nice day