We Keep Coding

JavaScript - send AJAX call on tab close (DELETE request)

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.

jQuery getJSON() method is returning an error in the console [duplicate]

I am trying to use a vanilla JS AJAX request to pull back a JSON string from a locally stored JSON file (specifically trying not to use JQuery) - the below code is based on this answer - but I keep getting an error in the Chrome console (see below). Any ideas where I'm going wrong? I have tried changing the positioning of the xhr.open & .send requests, but still get error messages. I suspect the issue lies with the .send() request?
//Vanilla JS AJAX request to get species from JSON file & populate Select box
function getJSON(path,callback) {
var xhr = new XMLHttpRequest(); //Instantiate new request
xhr.open('GET', path ,true); //prepare asynch GET request
xhr.send(); //send request
xhr.onreadystatechange = function(){ //everytime ready state changes (0-4), check it
if (xhr.readyState === 4) { //if request finished & response ready (4)
if (xhr.status === 0 || xhr.status === 200) { //then if status OK (local file || server)
var data = JSON.parse(xhr.responseText); //parse the returned JSON string
if (callback) {callback(data);} //if specified, run callback on data returned
}
}
};
}
//-----------------------------------------------------------------------------
//Test execute above function with callback
getJSON('js/species.json', function(data){
console.log(data);
});
The console in Chrome is throwing this error:
"XMLHttpRequest cannot load file:///C:/Users/brett/Desktop/SightingsDB/js/species.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
Would be grateful for any insights - many thanks.

Basically as Felix, error msg, et al below say - simply can't run an AJAX request against a local file.
Thanks.

Try to run the application on local server like apache or wamp then you will not face any issue

AJAX - Failed to load resource: net::ERR_EMPTY_RESPONSE

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?

Check for internet connection on Javascript

Ok, I got this case. I got this app build on angular.js with a back-end build on node.js ... it works fine by all means.
The client got a crappy connection to the internet. It goes online and offline every now and then. What I need to do is a routine that pings my server to check for connection on it. If it fails, I need to ping to something else (lets say : google.com) so I can check two things:
1.- My server is online (or not)
2.- The client has no internet connection.
Ping to server works fine using this routine:
function hostReachable(host) { // Handle IE and more capable browsers
var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
// Open new request as a HEAD to the root hostname with a random param to bust the cache
xhr.open( "GET", "//" + host + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false);
// Issue request and handle response
try { xhr.send(); return (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304); }
catch (error) { return false; }
}
}
function check() {
if (!hostReachable(window.location.host)) {
if (!hostReachable('www.google.co.ve')) {
alert('No se pudo establecer conexión con el sistema. Revise su conexion a internet.');
} else {
alert('Existe un problema con el sistema. Por favor contacto a los administradores.');
}
} else {
console.log('Connected...');
}
}
check();
The deal is that checking google.com goes with cross-domains problems. so the question is very simple. Is there a way to check for internet connectivity like this ?

If you send a cross-domain request and the server you are trying to ping against doesn't accept it, they will send back an access-denied status. I think that is 403, but you would want to check firebug / chrome dev tools to see what the actual code is. Then, if you get that code, you know at the very least the request was sent and a response was received.
--edit--
Here is an example of what I mean on JSFiddle. Be sure to check the network requests on chrome dev tools / firebug. It is sending a request to www.google.com, and receiving a 404 status code in the response.
Sidenote: As it turns out, different servers send back different codes when denying cross-domain requests. It seems 401, 403, and 404 are the most popular ones. For anyone looking at this problem in the future, you will want to check which codes the site(s) you ping against are sending back.

You could try making a request for a javascript resource from google or some other highly reliable cdn. It would not be subjected to cross-domain restrictions.

Status code, text and all response headers are null for an XHR that has status code 408 in Firefox

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.