Javascript OOP

[CoolASL]

Hi all, I am writing a script in JavaScript, where i am putting a wrapper around the basic AJAX. I have 4 properties here corresponding to the 4 states in AJAX (loading, loaded, interactive, completed) which are initialized with methods provided by the my user. The idea is to call the appropriate methods depending upon the readyState value. I have a method named MonitorStateChange() and a corresponding property which is initialized with this method. After creating the xmlHttp object, i assign this method as the readystatechange listener. Now the problem is that when this method is called, it fails to recognize any of the methods of the script and prints them as undefined. Is it that when the listener calls the method then my class is not alive.. I am confused.. please help. Thanks in advance. *** Who said nothing is impossible? I have been doing it for a long time ***

[Shog9 0]

Since you didn't post code, i'm going to guess at it:

var wrapper =
{
onloading : loadingfunc,
onloaded : loadedfunc,
oninteractive : interactivefunc,
oncomplete : completefunc,
onstatechange : MonitorStateChange
};

// ... create request object
req.onreadystatechange = wrapper.onstatechange;
// ... do something with the request object

The problem line is the assignment - no context is kept, so when MonitorStateChange() is finally called, this != wrapper. The solution? How about this:

req.onreadystatechange = function() { wrapper.onstatechange(); };

If i'm way off, post the actual code in question. Good luck!

Now taking suggestions for the next release of CPhog...

[CoolASL]

Hi Shog, Thanks for the reply. I am not sure if the way you suggested would work. I am using function MyClass(){....} type declaration to declare my class. So, if i want to assign the readystatechange for a particular object, i think, i'll have to use something like this.xmlHttpObj.readystatechange = this.MonitorStateChange; Can you please tell me more about the way you have written above. Any reference where i can learn more about it. Here's my code... I'll highly appreciate it if you can give me some pointers. Thanks in advance.

function AJAXFramework(OnCompFunc) //The AJAXFramework class
{
	//Four methods for the 4 possible states
	this.OnLoading = null;     // 1
	this.OnLoaded = null;      // 2
	this.OnInteractive = null; // 3
	this.OnCompleted = OnCompFunc;   // 4
	this.SendRequest = SendRequest;
	this.xmlHttp = null;//GetXmlHttpObject(); // To be initialized when SendRequest() is called

	//other member functions
	this.SendRequest = SendRequest;
	this.MonitorStateChange = MonitorStateChange;
	
	alert("OnCompleted = " + this.OnCompleted);
	alert(this.xmlHttp);
	
	function SendRequest(strURL, strType, strParams)
	{
		//strURL    : the url to be contacted
		//strType   : Request type. Can have only one of the following:
		//            "GET", "POST"
		//strParams : if request type is POST, then parameters that 
		//            should be sent.
		
		//abort any ongoing request
		if (this.xmlHttp != null && this.xmlHttp.readyState != 0 && this.xmlHttp.readyState != 4)
		{
			this.xmlHttp.abort();
		}

		//Get the XMLHttp object
		xmlHttp = GetXmlHttpObject();
		
		//Set the event listener
		xmlHttp.onreadystatechange = this.MonitorStateChange;

		//alert("calling...");
		//this.MonitorStateChange();

		
		if (strURL.length > 0)
		{
			if(strType == "GET")
			{
				xmlHttp.open("GET", strURL , true);
				xmlHttp.send(null);
			}
			else
				if(strType == "POST")
				{
					xmlHttp.open("POST", strURL, true);
					xmlHttp.send(strParams);
				}
				else
				{
					alert("Request type has not been specified properly.\nRequest types can be GET or POST only.");
				}
		}
	}
		
	function MonitorStateChange()
	{
		//alert(AJAXFramework.OnCompleted);
		//alert(this.readyState);
		alert("OnCompleted = " + this.OnCompleted);
		//alert(arguments.length);
		if(this.xmlHttp.readyState == 1)
		{
			if(this.OnLoading != null)
			{
				OnLoading();
			}
			return;
		}

		if(this.xmlHttp.readyState == 2)