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?
Related
I am trying to debug a functionality that runs from a plain old Javascript Web Page and requests to a server.
This perfectly works on my computer but fails on another (the real target)
When it fails, i get an empty string response from the server.
Here is the code that build the request
// Send request to web server
var url = "/start?f="+filesDesc[iFile].name+"&ft="+ft+"&t="+time0ms;
var req = new XMLHttpRequest();
if (req) {
req.open("POST", url, true);
// Hack to pass bytes through unprocessed.
req.overrideMimeType('text/plain; charset=x-user-defined');
req.timeout = 2000;
req.onreadystatechange = function(e) {
// In local files, status is 0 upon success in Mozilla Firefox
if(req.readyState === XMLHttpRequest.DONE) {
var status = req.status;
if (status === 0 || (status >= 200 && status < 400)) {
// The request has been completed successfully
console.debug(req.responseText);
} else {
console.debug("startPlaying : error while sending rqst" );
}
}
};
req.send();
}
I noticed that on my computer (working) the output header of the request looks like this :
POST /start?f=2021-02-09_14;05;40&ft=1612880820756.4346&t=1614243685530 HTTP/1.1
On the target computer (FAIL) it looks like :
POST /start?f=2021-02-09_14;05;40&ft=1612879543815&t=1614183852864 undefined
Notice the "undefined" protocol information
I wonder what can produce such a difference knowing that :
The computer are the same 'Asus ZenBook'
Navigator are the same : Mozilla Firefox 85.0.2 (32 bits)
Network drivers are the same
Client and Server code are the same.
This is very strange behaviour.
Many thanks for any precious piece of information !
We find out that this behaviour was a side effect of a DOM exception caused by registering activeX filters. Our application also tried to load video with calls to :
navigator.mediaDevices.getUserMedia({video: { deviceId: device.deviceId }})
This was ending in an :
Uncaught DOMException: A network error occured.
Believe me or not, removing activeX filters removes the network error !
We felt into a problem similar to :
NotReadableError: Failed to allocate videosource
i searched for an answer that fix my problem a lot, but none of the topic fit my scenario..
I have to make an AJAX call inside my application, it work fine on ALL desktop browser, and on SOME mobile browser (for example on my ASUS zenPhone native browser it work correctly, even on my iPhone from work (FF and Safari)) but no way in google Chrome (mobile), in this one the call complete but the response it's empty (only empty, no error provided)... i ask some friend to test it too and similar result occours (empty response) .... i have an https server and an https endpoint
there is my code:
<script>
var x = Math.floor((Math.random() * 10000000) + 2000);
var data = JSON.stringify({
"Token": x,
"Subject": "testAPI"
});
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
//console.log(this.responseText);
var dataJ = JSON.parse(this.responseText);
var dataA = dataJ.Questions;
alert(dataA[0].img);//this is already empty on my mobile :(
dataA.forEach(function(entry) {
//console.log(entry);
});
}
});
xhr.open("POST", url);
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.send(data);
</script>
Server side CORS are enabled, and as i said it works flawless on all desktop i tested on ... i don't know if i can provide the url to you guys(i have to ask # the API provider) but if you give me some hints it would be nice ...
thanks a lot for your time!
[EDIT]
after some trouble i get an error(Testing remotly from my phone to my PC with dev tools)
Failed to load resource: net::ERR_INSECURE_RESPONSE
on the other device i didn't get this error...
This is a long shot but, try to set the content type header to :
xhr.setRequestHeader("content-type", "text/plain");
This should suppress the CORS preflighting done by chrome which causing the empty response.
I have a local application that contains a web server for exchanging JSON with a web application. The Web application itself is served from the web, meaning that browsers see them as cross-origin.
When the application is running, it provides correct cross-origin headers to allow the interchange. However, what I want is the option to quickly detect if the application is running or not.
The current method is to use AJAX to a "heartbeat" URL on the localhost service:
pg.init.getHeartbeat = function(port) {
var url = pg.utils.baseUrl('heartbeat', port); // returns a localhost URL
$.ajax({
url: url,
type: 'GET',
async: true,
success: function(data) {
// Hooray! Application is there. Do 'hooray' stuff
},
error: function(data) {
// Whoah the bus. Application not there. Do 'no application' stuff.
}
});
};
Works great in Webkit. Webkit tries to get a heartbeat, quickly fails, and does failure stuff very quickly.
Problem is in Firefox. Firefox tries to get a heartbeat, and takes between 4 and 10 seconds to fail. It might not seem like much, but 4 seconds before the UI moves the user to the next step is making the app feel very slow and unresponsive.
Any other ideas out there? As far as I can tell, changing an iFrame's src attribute and capturing a failure isn't working, either. It's not triggering the error event. And even when I can get an error to trigger from sample code, it's still taking 4 seconds, so there is no net improvement.
The web server side of things should not have any server-side scripting languages (PHP, etc.); I need the JavaScript to be able to take care of it independently.
You can do a timeout if the navigator is Firefox:
var timeoutcall = 0;
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
timeoutcall = 100;
}
$.ajax({
url: url,
type: 'GET',
timeout: timeoutcall ,
async: true,
success: function(data) {
// Hooray! Application is there. Do 'hooray' stuff
},
error: function(data) {
// Whoah the bus. Application not there. Do 'no application' stuff.
}
});
If the timeout is 0 then there is no timeout. So, if i am in firefox i set timeout to 100ms, and if im not in firefox set to unlimited.
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.
Getting Access Denied Error on https in IE. while executing ajax call (to my server1) response which has another ajax call While my Ajax call url is on http .By implementing cors I able to execute on http.Tried JSONP also but then it execute my response till it find another ajax call .How to solve ?
below is on myserver1
alert('aaa');
var xhr2 = new XMLHttpRequest();
xhr2.open('GET', 'http://myserver2.com', true);
xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr2.send();
xhr2.onload = function () {
alert('fff');
var appCreds = xhr2.responseText;
alert(appCreds);
};
alert('xxx');
In addition to the trusted site requirement I found that the problem was not fixed until I used the same protocol for the request as my origin, e.g. my test site was hosted on a https but failed with any destination using http (without the s).
This only applies to IE, Chrome just politely logs a warning in the debug console and doesn't fail.