ralphcarlo ralphcarlo - 4 months ago 17
AngularJS Question

Get Status Code on CORS Request

How do you

return
a response code from a CORS Request? I am able to get it from an onload event, but I cannot seem to take it out and make a
return
so that I can catch it for value checking.

Here is my code based on http://www.html5rocks.com/en/tutorials/cors/:

createCORSRequest: function(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {

// Check if the XMLHttpRequest object has a "withCredentials" property.
// "withCredentials" only exists on XMLHTTPRequest2 objects.
xhr.open(method, url, true);

} else if (typeof XDomainRequest != "undefined") {

// Otherwise, check if XDomainRequest.
// XDomainRequest only exists in IE, and is IE's way of making CORS requests.
xhr = new XDomainRequest();
xhr.open(method, url);

} else {

// Otherwise, CORS is not supported by the browser.
xhr = null;

}
return xhr;
},

makeCorsRequest: function() {
// All HTML5 Rocks properties support CORS.
var me = this;
var url = 'http://google.com';
var sCode = '';

var xhr = me.createCORSRequest('GET', url);
console.log('xhr', xhr);
if (!xhr) {
alert('CORS not supported');
return;
}

// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var sCode = xhr.status;
// var title = getTitle(text);
// alert('Response from CORS request to ' + url + ': ' + xhr.status);
};

xhr.onreadystatechange = function() {
console.log(this.status);
sCode = this.status;
}

xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};

xhr.send();
return sCode; // this returns an empty string or the initial value set to it and not from `onload` event
}

Answer

One approach could be the use of Callback in JS, as we can pass Functions in JavaScript as parameters to other functions, and invoke them asynchronously from inside.

I have modified your code a little to make it respond asynchronously, and added relevant comments. Observe the use of callback below.

//make few changes to make it asynchronous.
makeCorsRequest: function(callback) {
    // All HTML5 Rocks properties support CORS.
    var me = this;
    var url = 'http://google.com';
    var sCode = '';

    var xhr = me.createCORSRequest('GET', url);
    console.log('xhr', xhr);
    if (!xhr) {
      callback('CORS not supported');
      return;
    }

    // Response handlers.
    xhr.onload = function() {
      var text = xhr.responseText;
      var sCode = xhr.status;
      // var title = getTitle(text);
      // alert('Response from CORS request to ' + url + ': ' + xhr.status);
      callback(null, text);
    };

    xhr.onreadystatechange = function() {
      console.log(this.status);
      callback(this.status);
    }

    xhr.onerror = function() {
      callback('Woops, there was an error making the request.');
    };

    xhr.send();
  }

//this function would be the callback, it would be called 'Asynchronously' form XHR events with err or real data. First parameter generally indicates error.
function handleCorsResponse(err, data) {
   //check if error occurred
   if (err) {
      //error handling here
   }

  //if no error occurred, proceed.
   console.log(data);
}

//let's call `makeCorsRequest` with `handleCorsResponse` as a parameter.
$payments.makeCorsRequest(handleCorsResponse);

Note : A better and recommended way would be using a Promise.