I'm running some javascript which uses a setInterval to trigger an AJAX request and then performs some actions based on the returned output. I'm quite confused with it, because it works perfectly on my home server, but now that I've put it out onto the web, I'm having problems.
The following error appears on Google Chrome:
http://www.domain.com/ajax/sound.php
Failed to load resource: net::ERR_EMPTY_RESPONSE
The error doesn't occur consistently however. Sometimes the scripts run for several minutes before an error occurs. Sometimes it all breaks down in seconds.
I've already checked the obvious solution - that my server-side script is returning nothing. I did this by commenting out the entire script and having it do nothing but return information. That didn't help.
I have several AJAX requests running from the same page, and all of them eventually return the same error (with their respective pages of code). I've tried isolating the requests and performing them one at a time at a slowed down rate, and have determined that the requests work in a general sense, but as soon as one of them sends an error, they all completely stop working and start sending the same error.
Once the errors occur, I get no response when I try to access any part of my site (even parts with no AJAX). Safari says "...the server unexpectedly dropped the connection. This sometimes occurs when the server is busy. Wait for a few minutes, and then try again." I've tried this in Explorer, Chrome, and Firefox as well with similar results. Thankfully, the site does come back up after a few minutes of making no AJAX requests.
An example of one of the AJAX requests is as follows:
//At the set interval, we create a string for the request:
function alef(){
string = "a='a'";
request(sound, "ajax/sound.php", string);
}
//That function fires off an AJAX request:
function request(fix, url, string){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
fix(xhttp.responseText);
}
}
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(string);
}
//The AJAX request returns a result to be processed by the following function:
function sound(text){
if(text == "sound"){
insound.play();
}
}
Presume that my sound.php files says:
<?php echo "sound"; ?>
It doesn't say only that, but even when it did for testing purposes, I had the same problem.
Any solutions?
Related
I want to send an AJAX DELETE request through Javascript when the user closes the tab. The flow is the following:
When the user attempts to close the tab, a onbeforeunload event takes place, then if the user confirms to leave the page the onunload event takes place and tries to execute the deleteRequest function, which is a synchronous ajax delete request.
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
window.onunload = function(){
deleteRequest();
};
function deleteRequest(){
let url = new URL("http://......");
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState == 4){
if(request.status === 200){
console.log('success');
}
}
}
request.open("DELETE", url, false);
try{
request.send();
}
catch(e){
console.log(e);
}
}
Unfortunately, it seems that Google Chrome does not support anymore this since when a tab closes it kills all the pending events, and in the console of the browser I can see the following message
DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://.....': Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details.
at deletRequest(.......js:411:17)
at window.onunload
Please note that I have already seen many topics on this issue before on SO but the solutions did not really help since most of them are out of date since the policy of chrome on this changed quite recently, like this or this.
It seems that most people propose navigator.sendBeacon to achieve this, but in the documentation I saw only ways to make a POST request using this, any thoughts? Thanks in advance.
You're pretty much SOL as far as using sendBeacon out of the box goes, as PUT and DELETE cannot be sent as you observed (only POST). For your XMLHttpRequest, Chrome is very explicit about saying, "hey, we used to send these synchronous XHR requests in beforeunload if you used a no-op loop, but we're not supporting that anymore":
Failed to execute 'send' on 'XMLHttpRequest' [...] Synchronous XHR in page dismissal.
Chrome is intentionally disallowing this behavior. You have no option except to modify the backend, i.e., set up an endpoint that will receive sendBeacon POST request like https://example.com/trigger-delete/ and trigger the DELETE call from the backend, or, if it's not your server, you'll actually have to set up a relay server you control to receive the POST (https://myrelay.com/forward-delete/)and then pass it along as a DELETE.
sendBeacon is the only way you're getting out of this, as far as I can tell.
I have a number of AJAX requests (made with regular JS) that seem to be causing trouble when they make requests of my Python GAE back end. Here's an example:
newGame: function() {
// Calls API to begin a new game, tells view to show placements
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState === XMLHttpRequest.DONE) {
// ... removed unnecessary code for this question
}
};
var requestOjb = {"user_name": battleshipCtrl.user};
xhttp.open('POST', requestPath + 'game', true);
xhttp.send(JSON.stringify(requestOjb));
},
I am getting a code 400 with a Parse Error, but only on my deployed server. Everything works fine on the dev server. The error says the problem is with my back-end function "new_game", but does not specify a line where the error occurred. The endpoint function works correctly when I access it directly from the API explorer, so I figure the problem must be a result of the data sent from my JS file. Here's that function anyway:
#endpoints.method(request_message=NEW_GAME_REQUEST,
response_message=GameForm,
path='game',
name='new_game',
http_method='POST')
def new_game(self, request):
"""Creates new game"""
user = User.query(User.name == request.user_name).get()
# ... removed unnecessary code for this question
return game.to_form('Good luck playing Battleship!')
The request message it's expecting takes the form of {'user_name': 'some_name'} and it appears, through console.log, that JS is sending it in the right format.
The log where the parse error comes up is interesting, because it shows a 200 code POST request, although it mentions the 400 error when I dive into that log.
I've double and triple checked that my code works on the dev server, and that I've got the exact same code deployed. I don't know where to look next to continue debugging this thing. Any help is appreciated.
Figured it out. I tried running the AJAX request with jQuery, and got a slightly different error message, which lead me to find that I had to set the request header, because it was causing the server to read the incoming data differently than it should have. The following AJAX request now works perfectly.
newGame: function() {
// Calls API to begin a new game, tells view to show placements
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState === XMLHttpRequest.DONE) {
// ... removed unnecessary code for this question
}
};
var requestOjb = {"user_name": battleshipCtrl.user};
xhttp.open('POST', requestPath + 'game', true);
xhttp.setRequestHeader('Content-type', 'application/json');
xhttp.send(JSON.stringify(requestOjb));
},
I found this bizarre, but I recently change all my paths from relative to absolute.
I see that ajax appears to be working fine in the console as I can see the files retrieved successfully, with a status of 200.
Here is a pic: (its small but hopefully you can make out the status 200)
However, my callback functions stopped running, here is the code:
if (config_ajax.type === 'get') {
xhr = new win.XMLHttpRequest();
xhr.open('GET', config_ajax.url, true);
xhr.onload = function () {
if (this.status === 200) {
$A.log('succeeded with status 200'); // never gets here
config_ajax.callback(xhr.responseText);
}
};
xhr.send(null);
}
you have an incorrectly formatted request to the server as shown in firebug
http://www.arcmarks.com/http://www.arcmarks.com/arcmarks/source/class.CMachine.php
note the http://www shows twice
If the page is at arcmarks.com, it cannot make AJAX requests to www.arcmarks.com - browsers enforce something called the Same Origin Policy which prevents you from sending AJAX requests to any domain other than the exact one the original page was served from.
Also, the comment about the request being sent to www.www.arcmarks.com is right - as the code adds a "www" to the current URL, if your URL has a www in it already it will be repeated. But I'm assuming this was intentional.
I'm trying to detect when an Ajax (xhr) request gets a status code of 408 in order to direct the user to a login/timeout page.
At the moment I'm using an old version of jQuery (1.3.2) to perform all of my ajax requests and have the following bit of code to detect 408 error responses:
$().ready(function() {
$.ajaxSetup({
error:function(x,e) {
if (x.status==408) {
document.location.href = '/timeout.html';
} else {
document.location.href = '/error.html';
}
}
});
});
This code is not working as intended in Firefox and the xhr object has a status code of 0 and empty status text even though the status code is indeed 408. As a result the general error page is loaded instead of the timeout page.
EDIT: I tried console.dir(x) and got this output (as you can see status is 0 and status text is ""):
The ajax request is not cross domain and is being made from the same domain.
I also noticed that all response headers are cleared for any XHR that has an error status in Firefox.
None of these issues are evident in Chrome.
I even tried a simple XMLHttpRequest to a URL that will return a 408 status (all on the same domain/origin) and all headers were null - example shown below:
var x = new XMLHttpRequest();
x.open("GET", "http://example.com/url-that-will-return-408-status");
x.onreadystatechange = function() {
if(this.readyState == 2) {
console.log('CustomErrorCode=' + this.getResponseHeader('CustomErrorCode'));
console.log('Content-Length=' + this.getResponseHeader('Content-Length'));
console.log('Content-Type=' + this.getResponseHeader('Content-Type'));
console.log(this.getAllResponseHeaders());
}
}
x.send();
Any ideas as to why Firefox is different to Chrome in this regard and how I can work around this issue? Based on my reading of the W3C spec it seems that maybe Firefox is doing the right thing but I don't quite understand why response headers would be cleared for an error status.
Check this out.
It looks like Firefox re-requests 10 times as long as a 408 status code is provided.
A ticket has been opened about this Firefox "issue", and this behaviour is actually not compliant with the RFC. Since the ticked is officially marked as RESOLVED FIXED (as many other 408-related issues, here and here), I would suggest you to check your version and eventually re-open it, providing further information about your environment.
I am sending an ajax XMLHttpRequest using the POST method. When the request is sent, I am getting a readyState of 4 with a status of 12030. I know 12030 is a Microsoft specific state code that indicate the connection was not sustained. However, I can't seem to find where my code would be causing this error. If I navigate to the page without using the ajax request, it loads fine. Below is the javascript method and the call line.
AJAX Method
/*Sends ajax request with post data that updates the content view via ajax on completion
* #param message : message after completion of ajax request
* #param url : url to request
* #param params : post parameters as string
*/
function changeAjaxPost(message, url, params) {
var ajx;
if (window.HXMLHttpRequest) {
UtilLogger.log(HtmlLogger.FINE, "Using XMLHttpRequest");
ajx = new XMLHttpRequest();
}
else {
UtilLogger.log(HtmlLogger.FINE, "Using ActiveXObject");
ajx = new ActiveXObject("Microsoft.XMLHTTP");
}
ajx.open("POST", url, true);
ajx.setRequestHeader("X-Requested-With", "XMLHttpRequest");
ajx.setRequestHeader("Content-Type", "text/html");
ajx.setRequestHeader("Content-length", params.length);
ajx.setRequestHeader("Connection", "close");
ajx.send(params);
ajx.onreadystatechange = function () {
document.write(ajx.readyState + ":" + ajx.status);
if (ajx.readyState == 4 && ajx.status == 200) {
alert(message);
updateContent();
}
else if (ajx.readyState == 4 && ajx.status == 400) {
alert("Page Error. Please refresh and try again.");
}
else if (ajx.readyState == 4 && ajx.status == 500) {
alert("Server Error. Please refresh and try again.");
}
}
}
Call Line
changeAjaxPost("Excerpt Saved", "./AJAX/myadditions_content.aspx", params);
http://danweber.blogspot.com/2007/04/ie6-and-error-code-12030.html
IE6 and error code 12030
If you are running Internet Explorer 6 and using Ajax, you may get some XMLHttpRequests terminated with code 12030.
Microsoft's knowledge base at http://support.microsoft.com/kb/193625 shows that this code is
12030 ERROR_INTERNET_CONNECTION_ABORTED
The connection with the server has been terminated.
Googling turned up no help; the people encountering this don't seem to be aware of how network sockets work, so I had to actually figure it out on my own.
This happens when the client thinks a connection has been kept open, and the server thniks it is closed. The server has sent a FIN, and the client has responded to that with an ACK. Running "netstat" on the Windows client shows that the connection is in the CLOSE_WAIT state, so IE6 really ought to have realized this before trying. This is entirely the client's fault. If you wait about 60 seconds, the Windows OS stack will retire the connection.
If you need to support IE6, you have some solutions, in various degrees of ugly:
retry the ajax request in case of error code 12030
if the browser is ie, send an empty request to the server ahead of each ajax request
bundle up your ajax requests such that the time between them is ( (greater than server_timeout) AND (less than server_timeout + one minute)
IE7, fwiw, will issue a RST over the CLOSE_WAIT socket as soon as it realizes it has an outgoing connection to make. That, and the socket will only stay in that CLOSE_WAIT state for about 5 seconds anyway.
Sometimes, using
setRequestHeader("Connection","close");
can cause problems in some browsers.
Removing this solves the problem.
Credit goes to #MikeRobinson