Incomplete Ajax Request after Form Submission

Question

I am currently running a mobile-focused site that supports file upload and what I am attempting to do is save the user a lot of idle time when they upload a file to a form.

My goal is as follows:

 xhr = new XMLHttpRequest();

 xhr.open("POST", "http://myServer/myEndpoint");
 xhr.setRequestHeader("Cache-Control", "no-cache");
 xhr.setRequestHeader('Content-Type', 'text');
 xhr.setRequestHeader('foo', "bar");
 xhr.send( myData );

 //PseudoCode
 if( xhr.DataIsSent ) myForm.submit();

As you can see, I'm aiming to prevent the user having to wait for an ajax response before submitting the form, Ideally i'd like this to run in the background irrespective of what the user does.

My understanding of ajax was that once the request is dispatched, unless it is manually cancelled, it will be completed, however, I have had cases where the data which reaches the server is incomplete

Any Suggestions on how i could achieve this reliably would be greatly appreciated. So far it appears that once the form is submitted, the partially completed request is terminated.

Answer 1

As i can read on the Mozilla Developer Pages, XmlHttpResponses are stateful, as well.

I would recommend you to use jQuery: 1. create a promise for your ajax request 2. use when().then() before the Form submit 3. catch errors

Do you need any code example for it?