My program will generate a large number(thousands) of content URLs that it will then loop through, and make an ajax GET request for each.
The problem I am having is that IE can only operate on 6 requests at a time, so the remaining ones are stuck with readyState = "UNSENT". This is only problematic because some of these requests can take minutes, while others only take seconds.
Every time my program runs, right at the 300 second mark, all of the UNSENT XHR requests will timeout and throw an error in the console: XMLHttpRequest: Network Error 0x2ee2, Could not complete the operation due to error 00002ee2.. After looking into this error, I noticed that this is essentially a network timeout.
A few things I have tried and confirmed after much testing:
This is strictly happening in IE11 (tested in Chrome and worked good)
I tried setting up timeouts greater than 300 seconds in multiple different forms/ways. All of them only effected the individual Ajax calls, meaning if one started and took more than my timeout(let's say ten minutes) it would timeout, but the UNSENT requests would still timeout after five minutes.
Also tried setting timeout to 0, no effect(still threw out UNSENT requests after 300 seconds)
Attempt 1
sContentUrls.forEach(function( sContentUrl ) {
$.get({
url: sContentUrl,
timeout: 600000,
error: function() {
},
success: function() {
console.log("Success");
},
async: true
});
});
Attempt 2
sContentUrls.forEach( function( sContentUrl ) {
var xhr = new XMLHttpRequest();
xhr.open("GET", sContentUrl, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200){
console.log("Success");
}
};
xhr.onprogress = function(){ };
xhr.ontimeout = function(){ };
xhr.onerror = function () { };
setTimeout(function(){
xhr.send();
}, 0);
});
I am wondering what I can do to stop IE11 from throwing this error and aborting thousands of requests. I have looked into setting up a manager/queue for the requests, so that a new one is only made when it can sent right away or something.
Has anyone seen this issue before or knows of a potential workaround/solution? I can confirm that it does not occur if I make the requests synchronous, but due to the massive amount of requests this isn't a great option for me.
Thanks!
Related
In my application I request a resource via JavaScript.
In Test 1 I use the native XMLHttpRequest.
In Test 2 I use use Jquery 1.9.1
Test 1
function getResource(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8080/test/empty.html", false);
xhr.send("");
var result = xhr.responseText;
}
Test 2
function getResource(){
var config = {
url: http://localhost:8080/test/empty.html,
error: function (xhr, status, error) {
//handle error
},
async: false
};
jQuery.ajax(config);
}
For both test cases the same results are investigated.
Invatigation:
The request normally takes ~130ms. But very often it takes much
more time from 1s to 30s
This only appears on an android 7.0(Nougat) device (sony Z4)
What we found out, that the server (Tomcat 7) got the response and send the request back to the client.
The client is waiting for it, but dont get the response(In Chrome network Tab empty.html is pending). Somehow the server got an new response from the client and send back the request again. This repeats until the client recognize the response.
PS:
I got an hint, that this is maybe an issue with JQuery 1.9 and an upgrade to 2.X will fix this.
But I cannot upgrade my application so easily to an newer version of JQuery.
What can i do that this kind of device get the response in ms?
I have a problem with ajax requests that have a fixed timeout. So I am just using this simple code.
$.ajax({
url: "test.html",
error: function(){
//do something
},
success: function(){
//do something
},
timeout: 7000
});
In my scenario it is possible that like 20 ajax requests are called at once, each with a timeout of 7 seconds. As you might know, each browser has a different number of connection limits. And here comes the problem. Some of the ajax requests are queued due to the connection limit but the timeout counting already begins. So some requests are already timed out before they even arrive at the server. Is there a possibility that the timeout is only counted down when the request is actually transmitted to the server?
A quick and dirty "replacement" for $.ajax - only covers what you use in the example, but it should be a "drop in" replacement
function betterAjax(options) {
var xhr = new XMLHttpRequest();
var setListener = function(which, fn) {
if (typeof fn == 'function') {
if (which == 'success') {
which = 'load';
}
xhr.addEventListener(which, fn);
}
}
xhr.open(options.method || 'GET', options.url);
setListener('success', options.success);
setListener('error', options.error);
if (options.timeout) {
xhr.timeout = options.timeout;
}
xhr.end();
}
Which is a simplified version of something I wrote some years back - basically it's https://jsfiddle.net/jaromanda/wpkeet34/
Working on my own project. I'm sending an XMLHttpRequest to localhost from Firefox 44 to XAMPP. I'm receiving a status of 0 and a readystate of 1. Here's the code in question.
function sendReq(php,segment){
alert("sendreq called ");
//we out here getting 0 statuses. check out cwd, check out what php value is,
xhr.open("POST", php, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange = getData(segment);
xhr.send();
}
//callback function for ajax request.
function getData(div){
if ((xhr.readyState == 4) && (xhr.status == 200))
{
var serverResponse = xhr.responseText;
div.innerHTML = serverResponse;
}else{
div.innerHTML = "<p>loading!</p> ready state: " + xhr.readyState +"</br> status: "+ xhr.status;
}
}
I've read elsewhere the RS:1 / S:0 XHR properties indicate a unsuccessful cross domain request, but this is all occuring on localhost, with the files all in the same directory, and when inspecting the XHR response in Firebug, the return text is in there.
I've built a login to this page almost identical code and it works, its only pointing to a different .php file. Comparing the two and googling around are not enlightening me. So any advice is welcome. Thanks!
You're executing the getData() function once, on pageload, and returning undefined to the onreadystatechange handler, as that's what happens when you add the parentheses.
It has to be either
xhr.onreadystatechange = getData;
Note the lack of parentheses, or if you have to pass arguments
onreadystatechange = function() {
getData(segment);
}
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?
I have a very unique setup, which I imagine is having some effect on this issue (which I've never seen before).
I'm writing a Google Chrome Extension, and I'm relying on Node.js as my backend.
When I run multiple Ajax requests, and Node.js takes a long time to respond (for instance, 2.5 seconds) some of the Ajax requests will never receive the response and throw an error.
I've set up a test function in my Node.js server that will respond with a JSON object after waiting for 2500 ms. I've confirmed this works with a single request.
Then, I've tried embedding jQuery in the Extension and trying two requests:
(function(){
$.ajax({
url : url,
data : params,
type : "POST",
success : function(data){
alert('success1');
},
error : function(xmlhttprequest, textstatus, message) {
alert('error');
}
});
})();
(function(){
$.ajax({
url : url,
data : params,
type : "POST",
success : function(data){
alert('success2');
},
error : function(xmlhttprequest, textstatus, message) {
alert('error');
}
});
})();
In this case, only the second alert is called. The first one will eventually result in an error (timeout).
I also tried without jQuery, like so:
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
alert('response1');
}
xhr.send();
var xhr2 = new XMLHttpRequest();
xhr2.open("POST", url, true);
xhr2.onreadystatechange = function() {
alert('response2');
}
xhr2.send();
In this case, both of the requests fail; I don't receive a response from either one.
I've also tried this code in a background script, running on an auto generated background page. This also fails (neither success works).
I'm guessing this is related in some way to the very niche case I'm writing here, but at this point I'm really at a standpoint as to how to troubleshoot and move forward. Any ideas for exploring this issue further?
Thanks!
Kevin