XHR request response stream works in IE but not Edge - javascript

If you have a minute, I am making an XHR request against a Tomcat servlet which returns an XML stream. I have been looking at the scale of converting from ActiveX MSXML to XHR. I incorporated promises as ActiveX was synch while XHR is async. The return XML is voluminous but the XHR request has no problem in IE 11. Edge seems to hang and stops execution. Nothing happens. Another "smaller" XHR request, grabbing the XSL, is fine. The Tomcat log says it handles the request from Edge and sends the response, no problem. Anyway, the code is pretty straightforward. Thank you very much.
xmldoc = new XMLHttpRequest();
return new Promise(function(resolve, reject) {
setTimeout(function() {
xmldoc.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(xmldoc.responseText);
resolve(xmldoc);
}
};
xmldoc.open("GET", url, true);
xmldoc.send();
}, 200);
});

After figuring out how to debug in Edge, this turned out to be CORS filter error from Tomcat. I set the filter in web.xml, with a specific cors.allowed.origins. tomcat.apache.org/tomcat-9.0-doc/config/filter.html#CORS_Filter

Related

If HEAD-HTTP-Requests only fetch the HTTP-Header, why my XHR-request has a reponseText?

Today I researched about HTTP-methods and the differences between GET and HEAD in detail.
In theory I know, that HEAD only returns the HTTP header, not the HTTP body. Its useful to get information about ressources without downloading them completly.
I made a little Script using XHR to check out a HEAD-reques and tested it in Firefox 50.0.2.
http://codepen.io/anon/pen/oYqGMQ
var req = new XMLHttpRequest();
req.addEventListener("readystatechange", function () {
if (req.readyState === 4 && req.status === 200) {
alert("got response \n" + req.responseText);
}
}, false);
req.open("HEAD", location.href, true); // this is a HEAD-request, why I get a responseText?
req.send();
Why the HEAD-Request receives the complete data in the reponseText-property? I thought HEAD-Request will not receive any data of the body.
I can't see any difference between HEAD and GET.
Am I missing a point? I am using Firefox.

Chrome vs Firefox XHR request differences

While playing with XHR requests I found interesting thing in making XHR requests from 2 major browsers - Google's Chrome and Mozilla's Firefox.
Request was simple HEAD request to www.google.ba:
var xhr = new XMLHttpRequest();
xhr.open('HEAD' , 'www.google.ba', true);
xhr.onreadystatechange = function (aEvt){
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 304) {
console.log('Connected');
} else {
console.log('No net');
}
}
};
xhr.send();
After trying to make XHR request while there was no connection I would get readyState 4 and status 0 on both browsers. After i reconnected - making XHR request from both browsers were successful.
But here is the thing, after I disconnected again and made request, Chrome returned readyState 4 and status 0 after 9 milliseconds, but Firefox stayed in some kind of pending state and waited to net to return. When I reconnected after 13 seconds, request was successfully processed. I didn't get status 0 on Firefox even after 13 seconds. Is there anyone who could explained these huge differences and how to possibly prevent this behavior on Firefox?
Screenshot from Chrome:
Screenshot from Firefox:
EDIT:
It seems like that Firefox can't detect offline mode, only when I select work offline in browser i get the same result as in Chrome. Is there any way to get same result as in Chrome?

XHR Request on Mobile Safari returns nothing

I'm having an issue with performing an XMLHttpRequest in mobile safari (iOS 8.3).
var ajax_request = function(){
this.get = function( url, callback ){
var r = new XMLHttpRequest();
r.open( 'GET', url, true );
r.onload = function (data) {
console.log(data);
if ( r.status >= 200 && r.status < 400 ) {
callback(r);
} else {
console.log("An error occured");
}
};
r.onerror = function (err, url, lineNumber) {
console.log("A connection error occured");
console.log(err);
console.log(lineNumber);
};
r.send();
}
};
This code is making a request to an asset in Shopify.
In all browsers I have tested, the request works perfectly fine, however in Mobile Safari, I receive a completely empty response.
Shopify returns with the Access-Control-Allow-Origin * header set so I'm doubtful that it's related to CORS but perhaps I'm missing something.
Additionally, this code has been running on a production site for some time and the error has recently begun occurring which makes me think it's either a bug in a safari update or a change in the way Shopify handles AJAX requests.
Any light anyone could shed on this issue would be hugely appreciated.
Desktop Safari: (8.0.6)
Mobile Safari:
I believe the issue was to do with Shopify not accepting requests using regular http - but it seemed to be browser specific.
I fixed the issue by using https for all requests and redirected users to the https version of the site if they tried to access the regular one.
It doesn’t explain what was causing the issue, but it’s a working solution.

First XHR request very slow in QML(javascript running on v8)

I have a QML page (Qt Quick 2) that makes an XHR request to an external server. Right now the server is running on my local machine and the first time this request is made it takes ~1.5 seconds. Each subsequent request is under 100ms.
When I make this same request using a browser I get a response in under 10ms everytime, so I know the problem isn't there.
Here is the offending code. Any ideas?
function login(key) {
var xhr = new XMLHttpRequest();
var params = "Fob_num=" + key;
xhr.open("POST","http://localhost:9000/customer_login",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", params.length);
xhr.setRequestHeader("Connection", "close");
xhr.onreadystatechange = function() {
if ( xhr.readyState == xhr.DONE) {
if ( xhr.status == 200) {
handleResponse(xhr.responseText);
} else {
console.log("error with login--status: " + xhr.status)
displayErr("Oops, something's wrong. Please try again.")
}
}
}
xhr.send(params);
}
The problem isn't with handleResponse() function, I've already tried replacing it with a console.log(“response”), and it still takes just as long. I also tried replacing localhost with my ip.
You may want to create a dummy XMLHttpRequest instance in a dummy QML component that you asynchronously load with a Loader. Just an idea. Perhaps creating the first XMLHttpRequest instance takes long?

XMLHttpRequest receiving no data or just "undefined"

i try to make a Firefox Addon which runs a XMLHttp Request in Javascript. I want to get the data from this request and send it to *.body.innerhtml.
That's my code so far...
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://xx.xxxxx.com", true);
xhr.send();
setTimeout(function() { set_body(xhr.responseHtml); }, 6000);
Instead of receiving the data, I get "undefined". If I change xhr.responseHtml to responseText I get nothing. I don't know why I'm getting nothing. I'm working on Ubuntu 12.04 LTS with Firefox 12.0.
If you need any more details on the script please ask!
Update:
set_body Function
document.body.innerHTML = '';
document.body.innerHTML = body;
document.close();
Update SOLVED:
I had to determine the RequestHeaders (right after xhr.open):
xhr.setRequestHeader("Host", "xxx");
For following Items: Host, Origin and Referer. So it seems there was really a problem with the same origin policy.
But now it works! Thanks to all!
when you set the last param of open to true you are asking for an async event. So you need to add a callback to xhr like so:
xhr.onReadyStateChange = function(){
// define what you want to happen when server returns
}
that is invoked when the server responds. To test this without async set the third param to false. Then send() will block and wait there until the response comes back. Setting an arbitrary timeout of 6 seconds is not the right way to handle this.
This code should work:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
set_body(xhr.responseText);
}
};
xhr.open("GET", "http://xx.xxxxx.com", true);
xhr.send();
Make sure that you are getting a correct response from URL http://xx.xxxxx.com. You may have a problem with cross-domain calls. If you have a page at domain http://first.com and you try to do XMLHttpRequest from domain http://second.com, Firefox will fail silently (there will be no error message, no response, nothing). This is a security measure to prevent XSS (Cross-site scripting).
Anyway, if you do XMLHttpRequest from a chrome:// protocol, it is considered secure and it will work. So make sure you use this code and make the requests from your addon, not from your localhost or something like that.

Categories

Resources