Javascript - XmlHttpRequest inside of a class

Posted on 2009-02-12
Last Modified: 2012-05-06
I'm trying to build a class in Javascript that has an XmlHttpRequest object as one of its members.  When you instantiate an object from this class, a new XmlHttpRequest object should be created and the request should be made.

Here is my class...

function ControlObj(ctrlName) { = ctrlName;
     this.xhr = CreateXmlHttpRequestObject();
     this.xhr.onreadystatechange = function() {
          if (this.xhr.readyState == 4) {
               document.getElementById(ctrlName).innerHTML = this.xhr.responseText.substring(this.xhr.responseText.indexOf("~") + 1, this.xhr.responseText.indexOf("^"));
               document.getElementById(ctrlName).setAttribute('id', ctrlName + '_Loaded');
     }"GET", "HomePageAjaxControlLoader.aspx?control=" + ctrlName + "&r=" + (Math.random() * 9999999), true);
ControlObj.prototype.abort = function() {
     if (this.xhr != null) {

And to instantiate a new object from the class I use...

ComponentList[x] = new ControlObj(controlName);

Now according to my knowledge, this should work fine.  Yet, whenever I instantiate the object and it gets to the statement, it throws an error saying that the xhr.readystate is null or not an object.  Any idea what i could be doing wrong here?
Question by:josephdaviskcrm
    1 Comment
    LVL 18

    Accepted Solution

    Your use of the 'this' keyword.  When you use an anonymous function, the 'this' keyword becomes the parent object.  So this doesn't refer to the instance of ControlObj class anymore.  Instead it should be refering to the xhr class, so you should be able to say:
    if(this.readyState === 4)  ...

    I've attached a relatively simple explanation of how this works.

            function Foo()
                this.greetings = 'hello';
            function Oof()
                this.greetings = 'goodbye';
       = new Foo();
       = function()
                    alert(this.greetings);  //prints hello.  this refers to the calling object, ie foo
            var test1 = new Oof();

    Open in new window


    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
    In this article I will describe the Copy Database Wizard method as one possible migration process and I will add the extra tasks needed for an upgrade when and where is applied so it will cover all.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now