Get response from server with Javascript after Javascript request

Question

My Javascript function request to a aspx page. İts Code:

 var xhr = ("XMLHttpRequest" in window) ? new XMLHttpRequest() : new ActiveXObject("Msxml3.XMLHTTP");
    xhr.open("GET", = 'http://www.example.net/abc.aspx', true);
    xhr.send(""); 

After this request I want to send a response back from this page and catch it on the client side. How do I do that?

Answer 1

To get the response from XMLHttpRequest in asynchronous mode (third parameter is true for the open() method) you have to set the onreadystatechange property to a callback function. This function will be called back when the response is ready at the browser:

xhr.open("GET", 'http://www.example.net/abc.aspx', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4)  { 
    var serverResponse = xhr.responseText;
  }
};
xhr.send(null);

You may want to check out the following article for further reading on the topic:

• AJAX Patterns: XMLHttpRequest Call

Answer 2

To get the response, add a readystatechange event handler function. This will get called back when the response is ready to read:

xhr.onreadystatechange= function() {
    if (this.readyState!==4) return; // not ready yet
    if (this.status===200) { // HTTP 200 OK
        alert(this.responseText);
    } else {
        // server returned an error. Do something with it or ignore it
    }
};
xhr.open('GET', 'http://www.example.net/abc.aspx', true);
xhr.send();

Incidentally:

("XMLHttpRequest" in window)

Whilst in is in general a good way to test whether a property exists, this is one of the very few places where it's not ideal.

The problem is that in IE7+, when the ‘native XMLHttpRequest’ option is turned off, XMLHttpRequest still exists as a property in window, but with the unusable value null. So it's better in this specific case to use a simple truth test, which will allow fallback to ActiveX in the (unlikely) event that this option is disabled:

var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('MSXML2.XMLHttp');

Answer 3

You have to do a little more to get it work cross-browser, but once it's done you've got a reusable function, without any library.

// making a call is as simple as this
ajax( "http://www.example.net/abc.aspx", function( data ){
    // do something with the server's response
    alert(data);
});

///////////////////////////////////////////////////////////////////////////////

function getXmlHttpObject() {
    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    if (!xmlHttp) {
        alert("Your browser does not support AJAX!");
    }
    return xmlHttp;
}


function ajax(url, onSuccess, onError) {

    var xmlHttp = getXmlHttpObject();

    xmlHttp.onreadystatechange = function() {
      if (this.readyState === 4) {

            // onSuccess
            if (this.status === 200 && typeof onSuccess == 'function') {
                onSuccess(this.responseText);
            }

            // onError
            else if(typeof onError == 'function') {
                onError();
            }

        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    return xmlHttp;
}​