OOP (and the XMLHttpRequest)

[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.onready statechange, 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=fa lse;
if (!this.xmlhttp && typeof XMLHttpRequest! ='undefined') {
this.xmlhttp = new XMLHttpRequest( );
}
}

xmlRequest.meth od('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlh ttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.op en("POST", this.url, true);
this.xmlhttp.se tRequestHeader( "Content-Type","applicat ion/x-www-form-urlencoded;
charset=ISO-8859-1");
this.xmlhttp.on readystatechang e = this.getRespons e;

this.content = "content=" + this.content;
this.xmlhttp.se nd(this.content );
});

xmlRequest.meth od('getResponse ', function () {
if (this.xmlhttp.r eadyState==4) {
alert(this.xmlh ttp.readyState)
}
});

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

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

[Martin Honnen]

Börni wrote:

The problem: I assigned a function to xmlhttp.onready statechange, 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=fa lse;
if (!this.xmlhttp && typeof XMLHttpRequest! ='undefined') {
this.xmlhttp = new XMLHttpRequest( );
}
}

xmlRequest.meth od('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlh ttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.op en("POST", this.url, true);
this.xmlhttp.se tRequestHeader( "Content-Type","applicat ion/x-www-form-urlencoded;
charset=ISO-8859-1");
this.xmlhttp.on readystatechang e = this.getRespons e;
Here you set the onreadystatecha nge handler to a function, when the
onreadystatecha nge handler is then called inside of the function the
'this' object is the XMLHttpRequest object so
xmlRequest.meth od('getResponse ', function () {
if (this.xmlhttp.r eadyState==4) {
alert(this.xmlh ttp.readyState)

here you need to access
this.readyState

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Börni]

> here you need to access

this.readyState

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

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

[Martin Honnen]

Börni wrote:

here you need to access
this.readyState

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

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
onreadystatecha nge handler, in my tests here 'this' is the function itself.
Anyway, with MSIE/Win and MSXML (Microsoft.XMLH TTP) the 'this' object in
the onreadystatecha nge 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.meth od('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlh ttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.op en("POST", this.url, true);

this.xmlhttp.se tRequestHeader( "Content-Type","applicat ion/x-www-form-urlencoded;
charset=UTF-8");

var myRequest = this;
this.xmlhttp.on readystatechang e = function () {
if (myRequest.xmlh ttp.readyState === 4) {
alert(myRequest .xmlhttp.readyS tate);
}
};

this.content = "content=" + encodeURICompon ent(this.conten t);
this.xmlhttp.se nd(this.content );
});
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Börni]

Martin Honnen wrote:

It seems Mozilla doesn't set the 'this' object correctly (well at least
as it is the convention in other event handlers) for the
onreadystatecha nge handler, in my tests here 'this' is the function itself.
Anyway, with MSIE/Win and MSXML (Microsoft.XMLH TTP) the 'this' object in
the onreadystatecha nge 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.meth od('postVal', function (url, content) {
// variables needed to post
this.url = url;
this.content = content;
// alert(this.xmlh ttp);
// very, very important to set sync to true and to set the request
header!!!
this.xmlhttp.op en("POST", this.url, true);

this.xmlhttp.se tRequestHeader( "Content-Type","applicat ion/x-www-form-urlencoded;
charset=UTF-8");

var myRequest = this;
this.xmlhttp.on readystatechang e = function () {
if (myRequest.xmlh ttp.readyState === 4) {
alert(myRequest .xmlhttp.readyS tate);
}
};

this.content = "content=" + encodeURICompon ent(this.conten t);
this.xmlhttp.se nd(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