responsetext of XMLHttpRequest is null(blank) in Mozilla

Question

When I am running the below code in IE it is running fine.

But in mozilla ff, value of layerId is blank because reqGetSubMenuRef22.responseText is null at line1.

function ajaxFunctionCallGetSubMenuRef22(url)
{
    if (window.XMLHttpRequest) { // Non-IE browsers and IE>=7
      reqGetSubMenuRef22 = new XMLHttpRequest();

      reqGetSubMenuRef22.onreadystatechange = processStateChangeGetSubMenuRef22;
      try {
        reqGetSubMenuRef22.open("GET", url, true);
        (( reqGetSubMenuRef22.setRequestHeader && method == "GET" ) ?  reqGetSubMenuRef22.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : reqGetSubMenuRef22 );
      } catch (e) {
        alert(e);
      }
      reqGetSubMenuRef22.send(null);
    } 
    else if (window.ActiveXObject) { // IE    
      reqGetSubMenuRef22 = new ActiveXObject("Microsoft.XMLHTTP");
      if (reqGetSubMenuRef22) {
        reqGetSubMenuRef22.onreadystatechange = processStateChangeGetSubMenuRef22;
        reqGetSubMenuRef22.open("GET", url, true);
        reqGetSubMenuRef22.send();
      }
    }
}

function processStateChangeGetSubMenuRef22() 
{

    if (reqGetSubMenuRef22.readyState == 4) { // Complete
      if (reqGetSubMenuRef22.status == 200) { // OK response
            var textToSplit = reqGetSubMenuRef22.responseText; //line1

        if(textToSplit != null && textToSplit != '') {
                subMenuRef = textToSplit;
                }
            else {
                subMenuRef='';
                }

        layerId=subMenuRef;

Answer 1

processStateChangeGetSubMenuRef22 (not the best func name BTW) is a callback. It is called in the reqGetSubMenuRef22 's context, so rather then using if (reqGetSubMenuRef22.readyState === 4) , try using if (this.readyState === 4 && this.status === 200) .
The function is referenced as the handler for the readystatechange event, of the variable reqGetSubMenuRef22 , so that function will be a method of reqGetSubMenuRef22 , logically (in this case) it is referred to with this .

Just to clarify this with an analogy: you don't refer to your living room as the living room of Some Blvd Nr. 123, whatever town, Whatever country , do you? When people come over you say THIS is my living room, this is our home, THIS is where I live ...

Also reqGetSubMenuRef22 seems to be a global variable in your code, you'll need to address that. Read more on JS's this on MDN, and, in case of ajax calls it'll also prove useful to get into closures .

---

function readyStateCallback()
{
    if (this.readyState === 4 && this.status === 200)
    {
        console.log(this.responseText);
        //JSON string?:
        var resp = JSON.parse(this.responseText);
        //just txt:
        var resp = this.responseText;
        //HTML?
        document.getElementById('showResponseHere').innerHTML = this.responseText;
        //many more things you can do here...
    }
}

why reqGetSubMenuRef22 doesn't work anymore:

function sendRequest(str)
{
    var reqGetSubMenuRef22;//<-- local scope, only accessible in function
    var i;//local, too but different
    //try catch stuff: reqGetSubMenuRef22 is now an ajax object
    for (i=0;i<str.length;i++)
    {
        console.log(i);//just an example, you'll see why
    }
    reqGetSubMenuRef22.onreadystatechange = readyStateCallback;//reqGetSubMenuRef22 is still local
    //setup reqGetSubMenuRef22, then:
    reqGetSubMenuRef22.send();
}//end function

When the sendRequest function returns, all local variables are GC'ed, variable i is erased from memory. reqGetSubMenuRef22 should be, too, but it has an event attached to it, and this event will trigger a function that is declared in, either, the global scope or another, still existing scope.
The object is kept alive because JS is listening for an onreadystatechange event on the reqGetSubMenuRef22 object. So even though it's name is no longer connected to anything, the object is still very much "out there". Not the global object (aka window) calls the readyStateCallback function, but the ajax object ( reqGetSubMenuRef22 ) does. Hence, you can access the ajax object from inside that function using this , which will always point to the object calling the function. (call the same function like so readyStateCallback(); , this will point to the global object ( window )) After the callback is finished with it's job, this , or the ajax object will be Garbage Collected, unless there are other events due to happen, or it's still referenced somewhere else in your programme.

I'm terrible at explaining this stuff, and I'm all too aware that I'm drastically over simplifying things here, taking shortcuts all over the place. But please do read up on this in JavaScript.
BTW: an object still being kept alive after a function has returned, is in fact a closure of sorts: a variable goes out of scope, but can still be referenced. That's what it boils down to, this allows for some extremely powerful constructs, so I'd urge you to look into this, too!