The download file in the AJAX request process is _ajax related to compatibility issues in Firefox (Firefox) browsers

The demand is very simple, click a file link to download the file, while sending requests to the background. Demand is very common, users click Download usually to download the statistics, statistics can take advantage of the script tag or img tag (picture ping) cross-domain ability, their SRC attribute point to the statistical address, but this time using AJAX statistics, hence the problem arises.

The demo code is as follows:

<a id= "A" href= "Http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
< Script src= "Jquery.js" ></script>
<script>
document.getElementById ("a"). onclick = function ( e) {
$.post ("data.php");
};
</script>

As we all know, if a tag has both the OnClick event and the href attribute, the callback for the OnClick event executes before the default event (that is, a jump), and it is possible to remove the default event with code similar to E.preventdefault () in the OnClick event ( Is the reason for the jump). So the above code, if clicked on a tag, first will perform the OnClick event callback, that is, to send AJAX requests, theoretically, because the code in the Ajax is asynchronous (in fact, the same sync), so the request side open the download file.

Chrome, UC, opera, 2345 browsers are consistent with the expected performance, Firefox Click to jump out of the download file, but the Ajax part of the error, IE did not test.

The first misconception is that cross-domain results in an error. When you click on the download link, the AJAX request will think that the page will jump to the address that href refers to, causing the browser to assume that Ajax is cross-domain. The erroneous idea was quickly overturned because the first Ajax request was made, so the request did not cross the domain, and a cross-domain error was not reported (usually in the case of a cross-domain error console); Third, the following code further proves the error.

<a id= "A" href= "Http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
< Script src= "Jquery.js" ></script>
<script>
$.post ("data.php");//data.php Sleep (MB)
</script>

Open the page, then the AJAX request, once clicked the download button, the request is aborted. If a label's href attribute value is not a file address, but replaces with any URL, if you click on a tab, the page immediately jumps to the address that the label points to, the page does not exist, and the Ajax nature is interrupted. If the a tag is pointing to a file address, will the same be parsed under FF (the browser thinks it's going to jump to the address and the AJAX is aborted)?

The answer is yes, I found the answer in the StackOverflow.

When clicking the "Download" link you are leaving the page, even it does don't look so. If there would no file transfer, you would the requested page. Try to set a target= "_blank" or with an IFRAME as target for the link.

As you can see from the question, both Chrome and FF had similar problems in the 2010, and the chrome or WebKit kernel browser fixes the problem in later versions of the iteration, and FF keeps the problem up to now (which I personally don't think is reasonable).

Knowing the root of the problem, the solution is ready to go.

Method One:

The easiest way to do this is to add a target= "_blank" to a tag, which is, in fact, what the Web page is all about, and that's a sure way to do it.

Method Two:

Since the default behavior of a label causes an AJAX request to be interrupted, will the "default behavior" be placed before the request?

<a id= "A" href= "javascript:;" >click</a>
<script src= "Jquery.js" ></script>
< script>
document.getElementById ("a"). onclick = function (e) {
location.href = "http:// C758482.r82.cf2.rackcdn.com/sublime Text 2.0.2 x64 Setup.exe ";
$.post ("data.php");
</script>

Method Three:

Set the timer to delay the request, but because the a label's default jump is not part of the Javascript thread can control, so the setting of the delay threshold is very important, my local test results are incredibly 2ms (also never thought), generally set to 100ms or so OK. This method is not elegant and should not be used.

<a id= "A" href= "Http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
< Script src= "Jquery.js" ></script>
<script>
document.getElementById ("a"). onclick = function ( e) {
settimeout (function () {
$.post ("data.php");
};
</script>

The above content to introduce the AJAX request in the process of downloading files in Firefox (Firefox) browser compatibility issues, I hope that the future of our work to learn help.