XDomainRequest object does not populate the response

Question

I am using XDomainRequest (xdr) object for CORS (Cross domain request) in my java script file for IE 9. I already added all supported headers on servicing server but when I click on a button to fetch the response (Text or XML), it does not populates in first and second attempt. It populates the response in third attempt only.

My code is as follows:

-----------------------------------------------

var xdr = new XDomainRequest(); 

var xmlDoc;

   if (xdr ) {
       xdr.onprogress = function () {
      //alert("XDR onprogress"); 
     };      
     
     var parser = new DOMParser();
     try {
      xdr.open("GET", url);
      xdr.timeout = 10000; 
      xdr.send();     
      xmlDoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
     }
     catch (e)
     {
      if(e.code == DOMException.SYNTAX_ERR)
      {
       alert(e);
      }
      else
      {
       alert("unexpected exception : " + e);
      }
     }
    } else {
       alert('failed to create xdr');
    }

-----------------------------------------------------

Also, I feel that timeout property is not working too.

Can anyone please help me in this regard.

Thanks in advance.   

Abhiram

Answer 1

Well any request happens asynchronously so you need to set up an onload handler on the xdr variable to the process the responseText on the xdr variable in that handler.

Furthermore in your posted snippet you set up a variable named xdr as the XDomainRequest instance but later on you have

  xmlhttp.responseText

which is a different variable which is nowhere set in the code you have shown. So make sure you use an onload handler and then make sure you access the responseText on the right variable (xdr in your snippet), then you should have success.

---

MVP Data Platform Development My blog

Answer 2

Hi Martin,

Thanks for your prompt response.

I apologize for typo, actually xdr object only is being used in my live code. I used onload handler as suggested by you and change the code as follows:

----------------------------------------------------

var xdr = new XDomainRequest();

var xmlDoc;

   if (xdr ) {
       xdr.onload = function () {
         alert("XDR onload");
         alert("Got: " + xdr.responseText);
     };      
    
     var parser = new DOMParser();
     try {
      xdr.open("GET", url);
      xdr.timeout = 10000;
      xdr.send();    
      xmlDoc = parser.parseFromString(xdr.responseText, "text/xml");
     }
     catch (e)
     {
      if(e.code == DOMException.SYNTAX_ERR)
      {
       alert(e);
      }
      else
      {
       alert("unexpected exception : " + e);
      }
     }
    } else {
       alert('failed to create xdr');
    }

-----------------------------------------------------

It gave the response but when I removed the alerts from the onload handler it again stopped working. It seems like there was some delay when user responded to the alerts and in the mean time response has been delivered from the server. Thats why I have mentioned in my previous post that timeout property of xdr object is not working.

One more thing, I feel to update you is, earlier to IE 9, I was using XMLHttpRequest object for IE 8 and my following code was working perfectly fine without any delay.

----------------------------------------

if(ieVersion == "8") {
   xmlhttp = new XMLHttpRequest();
   xmlhttp.open("POST", url, false); // "false: to make synchronous call
   xmlhttp.send();
   xmlDoc = xmlhttp.responseXML;

}

----------------------------------------

XMLHttpRequest object was not working on IE 9 as it does not return XML response. And Text response returns like a garbage values hence not being parsed by DOMParser. Therefore, I used XDomainRequest object which also have some limitations like it does not support XML response and snychronous call as well.

I hope, my concern is clear to you in more precised manner now.

Thanks & Regards,
Abhiram Agarwal 

Answer 3

Well you have to understand that the request is made asynchronously and that you have to put all code that is supposed to process the response into your onload handler (or any function called from the onload handler). Putting any code to process the response after the send() call is not the right way to use that API. So move your code to process the responseText into the onload handler. Otherwise you will never get the right result.

---

MVP Data Platform Development My blog

Answer 4

Hi Martin,

I changed the code as follows:

----------------------------------------------------

var xdr = new XDomainRequest();

var xmlDoc;

   if (xdr ) {
       xdr.onload = function () { 
                  var parser = new DOMParser();

                  xmlDoc = parser.parseFromString(xdr.responseText, "text/xml");

     };       
     
     try {
      xdr.open("GET", url);
      xdr.timeout = 10000;
      xdr.send();     
     }
     catch (e)
     {
      if(e.code == DOMException.SYNTAX_ERR)
      {
       alert(e);
      }
      else
      {
       alert("unexpected exception : " + e);
      }
     }
    } else {
       alert('failed to create xdr');
    }

-----------------------------------------------------

and the response is coming in second attempt. Now, what need to be done in order to have the response in single attempt.

Thanks & Regards,

Abhiram Agarwal

Answer 5

Hi Martin,

Anything else you can suggest in order to get the response in single "Go". I am still stucked with two attempts and unable to find out the route cause as to why its happenning.

Thanks & Regards,

Abhiram Agarwal

Answer 6

F12>Networking tab, click "Start Capture"

click the button on your page.

click the refresh button on the developer tool to update the DOM when the response is received or place breakpoints in your script to examine the call stack and local varibles.

---

Rob^_^

Answer 7

Dear Martin & Rob,

I thank to both of you for your valuable guidance for resolving the issue.

Martin, helped me a lot to place the code at right place and Rob, helped me to understand where and why my request was being aborted.

Regards,

Abhiram Agarwal

Answer 8

Hi Martin,

Now, I am stucked with another problem where I need to return the result to some calling function where it is showing undefined but in called function it returns true. When I put the "retrun" statement in "if (xdr)" block or after xdr.send() or outside of if & else blocks, in all three cases it is returning "undefined" to the calling function.

//--Calling Function--

this.GetData=function() {

var isValidated;
  // Get the screen mappings.
  isValidated = mappingProvider.GetScreenMappingXmlFile();

alert("isValidated :" + isValidated); // gives undefined;

}

//--Called Function--

this.GetScreenMappingXmlFile=function() {

xdr = new XDomainRequest();

if (xdr ) {
       xdr .open("GET", url);
      xdr .onload = function () {
      var parser = new DOMParser();       
      xmlDoc = parser.parseFromString(xdr.responseText, "text/xml");
      resultReadScrMapping = mappingProvider.ReadScrMappingsFile(xmlDoc);

      alert("resultReadScrMapping:" + resultReadScrMapping); //gives true

      //return resultReadScrMapping;

     };       
     xmlhttp.send(); 
     return resultReadScrMapping;  
    }
    else {
       alert('failed to create xdr in mapping.do');
    }

//return resultReadScrMapping;

}

Can you please suggest, where exactly to put the return statement.

Thanks & Regards,

Abhiram Agarwal