CODEWITHSUNDEEP
javascriptajax
Seeker
Seeker

Reputation: 1897

Ajax not geting response text in Javascript Library

I am writing a Javascript Library which has the following code:

Constructor (Creating intial keys and creating a XMLHTTP Request object):

function hrce(key) {    
    var about = {
        Version: 0.1,
        Author: "AAA",
        Created: "Spring 2014",
        Updated: "March 2014"
    };

    if (key) {

        this.xhr = "";
        this.xhrdata = "";
        this.xhrmethod = "";
        this.xhrurl = "";
        this.xhrquery = "";

        //init with the current avaliable information
        this.key = key;
        this.protocol = "http:" === document.location.protocol ? "http://" : "https://";
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            this.xhr = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            this.xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        return this;
    } else {
        // No 'id' parameter was given, return the 'about' object
        return about;
    }
};

Here are my Library functions:

hrce.prototype = {
    load: function() {
        if (this.xhr && this.xhr != "" && this.key && this.key != "") {
            this.xhrdata = [{"access_key": this.key}];
            this.xhrurl = this.protocol + "localhost/hrce/v1/action/hsio/";
            this.xhr.onreadystatechange = this.initilizer();
            this.xhr.open("POST", this.xhrurl, true);
            this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            this.xhrquery = "access_key=" + this.key;
            this.xhr.send(this.xhrquery);
        }
        return this;
    },
    initilizer: function() {
        if (this.xhr.readyState == 4 && this.xhr.status == 200)
        {
            console.log(this.xhr.responseText);
        }
    }
};

now if i call for example: hrce("f07c7156").load(); Ajax call goes successfully but its not calling my this.xhr.onreadystatechange = this.initilizer(); call in load prototype function. Whats wrong in it?

Upvotes: 0

Views: 127

Answers (1)

HMR
HMR

Reputation: 39270

  1. You're not using the function as a constructor.
  2. You're not assigning a bound function or passing a closure to onreadystatechange.

For the first one you have to decide, do you want the function to return an object or do you want the function to work as a constructor function. If you want a constructor then see the sample code below (I capitalized the function name as constructor functions should start with a capital).

For the second one you have to pass a closure or use bind, I use passing a closure in sample below.

function Hrce(key) {
  var about = {
    Version: 0.1,
    Author: "AAA",
    Created: "Spring 2014",
    Updated: "March 2014"
  };

  if (key) {
    this.xhr = "";
    this.xhrdata = "";
    this.xhrmethod = "";
    this.xhrurl = "";
    this.xhrquery = "";

    //init with the current avaliable information
    this.key = key;
    this.protocol = "http:" ===
            document.location.protocol ? "http://" : "https://";
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      this.xhr = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      this.xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //constructor funcitons do not need to return this
    return this;
  } else {
    // No 'id' parameter was given, return the 'about' object
    return about;
  }
}
;

Hrce.prototype = {
  load: function() {
    if (this.xhr && this.xhr != "" && this.key && this.key != "") {
      this.xhrdata = [{"access_key": this.key}];
      this.xhrurl = this.protocol + "localhost/hrce/v1/action/hsio/";
      //note that initilizer returns a function that has a closure
      //  scope with the current instance
      this.xhr.onreadystatechange = this.initilizer(this);
      this.xhr.open("POST", this.xhrurl, true);
      this.xhr
        .setRequestHeader("Content-type"
        , "application/x-www-form-urlencoded");
      this.xhrquery = "access_key=" + this.key;
      this.xhr.send(this.xhrquery);
    }
    return this;
  },
  initilizer: function(me) {
    //returning a function used as closure
    // the variable me is the current instance of Hrce
    return function(){
      if (me.xhr.readyState == 4 && me.xhr.status == 200)
      {
        console.log(me.xhr.responseText);
      }
    }
  }
};

var connector = new Hrce("f07c7156");
connector.load();

More info about constructor functions, prototype and what the this variable represent can be found in this answer.

Upvotes: 2

Related Questions