«

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

--

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

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;
};

Börni wrote:

>> here you need to access
>> this.readyState
>
>
> 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);
});


--

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

> here you need to access
> this.readyState

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

now the alert contains the text undefined.

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 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
> 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