By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,340 Members | 1,673 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,340 IT Pros & Developers. It's quick & easy.

OOP (and the XMLHttpRequest)

P: n/a
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;
};
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a


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/
Jul 23 '05 #2

P: n/a
> here you need to access
this.readyState


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

now the alert contains the text undefined.
Jul 23 '05 #3

P: n/a
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
Jul 23 '05 #4

P: n/a


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/
Jul 23 '05 #5

P: n/a
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
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.