We Keep Coding

Best Practice for closing browser window without waiting for ajax response

I want to open a window, make an ajax call and close the window.
I want to do it as fast as possible and i was wondering if i have to wait for the ajax response before closing the window?
Currently i'm doing it like this:
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false,
timeout: 30000,
always: function () {
closeWindow();
}
});
However, i was wondering if the ajax will reach the server 100% on all browsers if i will do it like this:
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false,
timeout: 30000,
always: function () {
}
});
closeWindow();
//THIS HAS CONFIRMED TO NOT WORK AND MISS OUT SOME REQUESTS
closeWindow() implementation is irrelevant.
The full usecase is as follows:
I send a user a link on Whatsapp/Telegram/Messenger
User clicks the link
Browser is open -> issue an ajax call -> closing the window.
EDIT
To clarify, i don't care what was the server response for the call. I just want to make sure that the browser issued the HTTP GET to the server and then close the window.
EDIT 2
AJAX is not a must, also, better to use vanilla JS

You can do it like you said, send the ajax request and close the window, since it's async methods, it will make the call, if you wanna be absolutely SURE, write a little PHP script that writes something in a file with a little sleep at the top to check that it made the call, but it will do it.
Edit : or use this method and close the browser in the done function, it will take 1ms or so

following function can close your tab after 1 sec, without waiting for the ajax response
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false,
});
setInterval(function(){
close();
}, 1000);

I believe that if you want to know when your request was launched you could use .ajaxStart as explained here.
$(document).ajaxStart(function() {
console.log('Ajax call started');
closeWindow();
});
Or you could try some raw js like the solution explained here.

I guess the answer was at the back of my head: use an Image object to send the request and close the window right after:
var img = new Image();
img.src = urlWithParamters;
img.onload = function () {
closeWindow();
};
img.onerror = function () {
closeWindow();
};
//safety:
setTimeout(closeWindow,5000);

Since you are using JQuery, you can use the "done" callback option, and set your function inside so the window will close if the request was successful.
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false
}).done(function() {
closeWindow();
});
You can also use the "fail" callback option to manage potential errors.

window.open doesn't work in http post angular

Here's my code:
$rootScope.http({
url: myUrl,
method: "POST",
data: "",
}).success(function (data) {
alert(data.uri); //for test, and I see correct uri shows up here.
window.open(data.uri, ''); return false; //window doesn't open.
});
The window.open doesn't work inside the .success, but it does work outside the http post method. Something is wrong when comes to callback function. I met very same issue in $.ajax and fixed it. But same solution doesn't work here for angular.

We faced the similar problem before and the reason is simple; in the most of the modern browsers, browsers will not allow the window.open() call which are not the direct result of user activity.
Here, your window.open() is being triggered in an asynchronous call which is not being called by a user action, for example: clicking on a link or a button.
You can fix this problem by disabling the popup blocker but we have to notify the user that their popup blocker is enabled. For that, you can do something like this:
$rootScope.http({
url: myUrl,
method: "POST",
data: "",
}).success(function (data) {
$rootScope.popupWindow = window.open(data.uri, '');
$timeout(function() {
// Check if popup blocker is enabled by verifying the height of the new poup
if (!$rootScope.popupWindow || $rootScope.popupWindow.outerHeight === 0) {
alert("Please disable the popup blocker");
}
}, 1000);
});
(Note: I've tested this is a browser, not sure in the mobile but this should work)

Efficient way of passing data and calling background script in PHP

I have a page where I show 5 questions to a user and when he clicks on Next 5 link I am sending the score of current page onbeforeunload() to the script updateScore() asynchronously using jQuery AJAX and when the call is successful the next 5 questions are displayed.
window.onbeforeunload=function()
{
$.ajax({
type: "POST",
url: "updateScore.php",
data: "pageScore="+score,
cache: false,
timeout:5000,
async:false
});
}
But the problem is that on slow connections,it might hang the browser for a while until AJAX call returns successfully.When I tried async:true(default) the next page is loaded first without making call to updateScore.php.It might be due to the fact that connection is fast in localhost hence giving no time for the AJAX call to complete.This was the reason I used async:false.Will it happen (making no AJAX call) if I use async:true in practical case as well?If yes, is there a way to come around this problem?

I advice you to change your code a bit.
Make ajax request on "click" event, and redirect user inside ajax callback function.
Like this:
$('#mybutton').on('click', function()
{
$('#pleasewait').show();
$ajax({
type: "POST",
url: "updateScore.php",
data: "pageScore="+score,
success: function() { document.location="nextpage.php" }
});
}

Detect close tab/browser without message etc?

I would like doing in javascript (jQuery):
if (close tab || close window) {
$.ajax({
type: "POST",
url: "process_form.php",
data: dataString
});
}
Is this possible without message if you want leave page etc?

There is only one useful event you can rely on for that reason, onbeforeunload.
window.onbeforeunload = function() {
$.ajax({});
};
Unless you explicitly return false from that event, there is no message to the user. You might want to create a synchronised request anyway, because the browser will not wait for an asyncronous request to finish.

How do I change the cursor during a jQuery synchronous browser blocking POST?

$.ajax({
url: "/cgi-bin/stats.exe",
method: "post",
async: false,
data: { refresh: "a41" }
});
Using ajax post synchronously - "async: false".
While it blocks the browser during the active request, what is the most efficient way to change the cursor to the hourglass or display a wait .gif?
Perhaps set the cursor as it enters this function then change it back in the success or complete function?
Any advice is appreciated.
Thank You.

I haven't tested this, but I think it would be done like so:
$('html, body').css('cursor', 'wait');
$.ajax({
url: "/cgi-bin/stats.exe",
method: "post",
async: false,
data: { refresh: "a41" },
success: function() {
$('html, body').css('cursor', 'auto');
// the rest of your processing here
},
error: function() {
$('html, body').css('cursor', 'auto');
}
});
Per #patrick's suggestion, changed it back on error as well.

Don't make the request synchronous because it will totally block everything else. Instead, you can use an asynchronous request, but make it look like it's synchronous by "blocking" the UI. I use jQuery.blockUI() for this.

I recommend using the jQuery blockUI plug-in. It will change the cursor, show any message or icon (http://ajaxload.info/) you like while the user is waiting. There's lots of info on the website for how to use it, but in its simplest form:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
That will automatically show the wait cursor and prevent user activities until the ajax call completes.