Ajaxリクエストがファイルをダウンロードできない理由と解決方法

1443 ワード

問題の説明
Ajaxからダウンロードを要求すると、ブラウザはエラーメッセージを報告せず、今回の要求に応じたフィードバックもありません.
Stack Overflowに関する質問と回答
これはなぜですか.一般的なリクエストブラウザは、pngの生成、ファイルのダウンロードなど、サーバから出力されるresponseを処理しますが、ajaxリクエストは「文字型」のリクエストにすぎません.つまり、リクエストの内容はテキストタイプで格納されます.ファイルのダウンロードはバイナリ形式で行われ、戻ってきたresponseを読み取ることができますが、読み取るだけで実行できません.白点はjsがブラウザに呼び出せないダウンロード処理メカニズムとプログラムです.
これは1種の安全な考慮にあって、JSは設計する時、ユーザーのコンピュータの上で比較的に低いレベルの任務を実行することができなくて、ファイルのダウンロードのヒントを起動するのはこれらの制限の1つで、私達はXMLHttpRequestオブジェクトを使ってバイナリファイルをダウンロードすることができて、しかし応答に対していかなる操作をすることができません!
解決方法一(乱暴)
Ajaxを直接使用しないで、以下の方法でダウンロードを要求します...
window.location="download.action?para1=value1....;"

問題があります:しかし、私たちがAjaxを使うことを考えている以上、インタラクティブな友好を考慮しているので、このような乱暴な方法は私たちが望んでいるものではありません!まずページのジャンプを送信します.successコールバックやerrorコールバックなどのコールバック関数を追加することはできません.
解決方法2(優雅)
前にAjaxがユーザーマシンの下部を操作できないと言った以上、どうして優雅になったのですか.サードパーティ製パッケージの導入:
fileDownload.js
fileDownload.jsの使い方
最後に、次のような効果が得られます.
$.fileDownload('/url/to/download.pdf', {
    successCallback: function (url) {
 
        alert('You just got a file download dialog or ribbon for this URL :' + url);
    },
    failCallback: function (html, url) {
 
        alert('Your file download just failed for this URL:' + url + '\r
' + 'Here was the resulting error HTML: \r
' + html ); } });

ajaxの使い方と体験に近い!