AJAX 中的异步文件传输

介绍

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式 Web 应用程序的技术。利用 AJAX，我们可以在无需刷新整个页面的情况下，通过后台服务器与前端进行数据交互。文件传输是 AJAX 中的一项重要功能，它允许我们通过异步请求从服务器上传或下载文件。

异步文件上传

异步文件上传允许用户在无需整个页面刷新的情况下，选择并上传文件。常见的用例包括用户头像上传、文件分享等。以下是一个使用 AJAX 实现异步文件上传的示例代码片段：

// HTML:
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <button type="button" onclick="uploadFile()">上传</button>
</form>

// JavaScript:
function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const formData = new FormData();

  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功！');
    } else {
      console.error('文件上传失败！');
    }
  };
  xhr.send(formData);
}

上述代码中，我们首先声明一个 HTML 表单，并在其中添加一个文件选择输入框和一个按钮。当用户点击按钮时，调用 uploadFile 函数。该函数使用 FormData 对象创建一个包含所选文件的表单数据。然后，我们创建一个 XMLHttpRequest 对象，打开一个 POST 请求以将表单数据发送到服务器。

异步文件下载

异步文件下载允许前端从服务器下载文件，例如下载生成的报告、导出数据等。以下是一个使用 AJAX 实现异步文件下载的示例代码片段：

// JavaScript:
function downloadFile() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = new Blob([xhr.response]);
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'file.txt';
      link.click();
    } else {
      console.error('文件下载失败！');
    }
  };
  xhr.send();
}

上述代码中，我们创建了一个 XMLHttpRequest 对象，打开一个 GET 请求以从服务器下载文件。我们设置 responseType 为 blob，以便将响应数据作为 Blob 对象处理。在 xhr.onload 回调函数中，我们判断响应的状态码，如果成功则将 Blob 对象转换为可下载的链接，并点击该链接进行文件下载。

总结

AJAX 中的异步文件传输使得 Web 应用程序具备了更强大的交互性和用户体验。通过以上示例，你可以灵活运用 AJAX 实现异步文件上传和下载功能。希望这篇文章对你有所帮助！