AJAX POST 応答からファイルのダウンロードをトリガーするにはどうすればよいですか?

AJAX POST を使用してファイルのダウンロードを処理する方法

JavaScript アプリケーションで AJAX POST リクエストを送信すると、開発者はサーバーが JSON ではなくファイルで応答するシナリオに遭遇する可能性があります。データ。このような場合、クライアントのブラウザでファイルのダウンロードをトリガーする必要があります。この記事では、この課題の解決策を検討します。

AJAX リクエストは通常​​、Content-Type を指定し、Content-Disposition ヘッダーを検査して応答タイプを識別します。応答にファイルが含まれていると判断すると、ダウンロードを開始するにはどうすればよいかという疑問が生じます。

解決策は、最新のブラウザで FileAPI の一部を利用することにあります。仕組みは次のとおりです:

1. XMLHttpRequest を構成します:

   • 応答をバイナリ データ BLOB として受信するには、responseType を 'blob' に設定します。
   • Content-type ヘッダーを次のように指定しますPOST リクエストの場合は「application/x-www-form-urlencoded」。

2. オンロード イベントの処理:

   • 成功した応答時 (ステータス 200) )、応答から BLOB を抽出します。
   • Content-Disposition ヘッダーを取得して、提案されたファイル名を確認します。

3. ダウンロードの開始:

   • Internet Explorer の場合は、window.navigator.msSaveBlob を使用して、提案されたファイル名で BLOB を保存します。 filename.
   • 他のブラウザの場合は、window.URL または window.webkitURL を利用して、 BLOB のダウンロード可能な URL を作成します。
   • HTML5 の a[download] 属性を使用して、ファイル名 (可能な場合) を指定するか、ユーザーをダウンロード可能な URL にリダイレクトします。
   • 一時的なダウンロード可能な URL を取り消しますクリーンアップのため少し時間がかかります。

4. jQuery.ajax代替案:

   • 同様の構成で jQuery.ajax メソッドを使用し、成功コールバックで BLOB を処理します。

要約すると、 FileAPI を使用すると、サーバー応答が AJAX POST リクエストによってトリガーされた場合でも、ブラウザーでファイルのダウンロードを開始できます。この手法は最新のブラウザでサポートされており、Web アプリケーションからファイルをダウンロードする際に便利でユーザーフレンドリーなエクスペリエンスを提供します。

以上がAJAX POST 応答からファイルのダウンロードをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。