xhr.onload, xhr.onerror 以及xhr.onreadystatechange的区别

`xhr.onload` 和 `xhr.onerror` 是 `XMLHttpRequest` 对象的两个事件处理程序，分别在 Ajax 请求成功和失败时触发。

- `xhr.onload`：当 Ajax 请求成功时触发，即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4，而且 `status` 属性值在 200 到 299 之间。
- `xhr.onerror`：当 Ajax 请求失败时触发，即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4，但 `status` 属性值不在 200 到 299 之间。

`xhr.onreadystatechange` 是 `XMLHttpRequest` 对象的另一个事件处理程序，它在 Ajax 请求状态改变时触发，即 `XMLHttpRequest` 对象的 `readyState` 属性值发生变化时（从 0 到 4 ），每次状态变化都会触发一次该事件。

通常，我们在 `xhr.onreadystatechange` 事件处理程序中判断 `readyState` 和 `status` 属性值来确定 Ajax 请求是否成功。但是，由于 `xhr.onreadystatechange` 事件会触发多次，因此我们需要在事件处理程序中使用条件语句来判断 Ajax 请求的状态，而 `xhr.onload` 和 `xhr.onerror` 事件只会触发一次，因此使用它们更加方便。

相关问题

19.大文件的断点续传如何实现，写出其核心思路代码，前后端都要写？

大文件的断点续传是指将大文件分成若干个小块进行上传，并在上传过程中支持断点续传，即在上传失败或者中断之后，可以从上一次中断的地方继续上传，而不需要重新上传整个文件。实现大文件的断点续传需要前后端共同配合，以下是它的核心思路代码：

前端代码：

// 上传文件
function uploadFile(file) {
  const CHUNK_SIZE = 1 * 1024 * 1024; // 每个分块的大小（1MB）
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 总共分为多少块
  let currentChunk = 0; // 当前上传的是第几块
  let uploadedChunks = []; // 已经上传成功的分块
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('Content-Type', 'application/octet-stream');
  xhr.setRequestHeader('X-File-Name', file.name);
  xhr.setRequestHeader('X-File-Size', file.size);
  xhr.setRequestHeader('X-File-Total-Chunks', totalChunks);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 上传成功
      console.log('上传成功');
    }
  };
  xhr.onerror = function() {
    // 上传失败
    console.log('上传失败');
  };
  function uploadChunk(start, end) {
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', currentChunk);
    formData.append('totalChunks', totalChunks);
    xhr.send(formData);
  }
  function uploadNextChunk() {
    const start = currentChunk * CHUNK_SIZE;
    const end = Math.min(start + CHUNK_SIZE, file.size);
    uploadChunk(start, end);
  }
  xhr.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = (e.loaded + getUploadedBytes()) / file.size * 100;
      console.log(`上传进度：${percent.toFixed(2)}%`);
    }
  };
  function getUploadedBytes() {
    return uploadedChunks.reduce((acc, chunk) => acc + chunk.size, 0);
  }
  function uploadResume() {
    uploadedChunks.forEach(chunk => {
      const start = chunk.index * CHUNK_SIZE;
      const end = start + chunk.size;
      uploadChunk(start, end);
    });
  }
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.code === 0) {
        // 上传成功
        uploadedChunks.push({
          index: currentChunk,
          size: response.size
        });
        if (uploadedChunks.length === totalChunks) {
          // 所有分块上传完成
          xhr.onload();
        } else {
          // 继续上传下一块
          currentChunk++;
          uploadNextChunk();
        }
      } else if (response.code === 1) {
        // 分块已经上传过
        uploadedChunks.push({
          index: currentChunk,
          size: response.size
        });
        if (uploadedChunks.length === totalChunks) {
          // 所有分块上传完成
          xhr.onload();
        } else {
          // 继续上传下一块
          currentChunk++;
          uploadNextChunk();
        }
      } else if (response.code === 2) {
        // 服务器已经有部分数据，从已上传完的地方继续上传
        uploadedChunks = response.uploadedChunks;
        currentChunk = uploadedChunks.length;
        uploadResume();
      } else {
        // 上传失败
        xhr.onerror();
      }
    }
  };
  // 开始上传
  uploadNextChunk();
}

以上是前端的核心代码实现，该代码使用XMLHttpRequest对象进行上传文件，支持分块上传，并在上传过程中支持断点续传。其中，使用了XHR的onprogress事件来实现上传进度的显示。需要注意的是，由于不同浏览器对FormData对象的支持程度不同，因此在实际使用中可能需要进行一些兼容处理。

后端代码：

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
const multer = require('multer');
const uploadDir = path.resolve(__dirname, 'uploads');
const port = 3000;
const uploadedChunks = {}; // 已经上传成功的分块
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});
const upload = multer({ storage }).single('chunk');
// 处理上传请求
app.post('/upload', function(req, res) {
  const chunkIndex = parseInt(req.body.chunkIndex);
  const totalChunks = parseInt(req.body.totalChunks);
  const filePath = path.resolve(uploadDir, req.headers['x-file-name']);
  const chunkFilePath = `${filePath}.${chunkIndex}`;
  if (uploadedChunks[chunkIndex]) {
    // 分块已经上传过
    res.json({
      code: 1,
      size: uploadedChunks[chunkIndex]
    });
    return;
  }
  if (fs.existsSync(chunkFilePath)) {
    // 分块已经上传过
    uploadedChunks[chunkIndex] = fs.statSync(chunkFilePath).size;
    res.json({
      code: 1,
      size: uploadedChunks[chunkIndex]
    });
    return;
  }
  upload(req, res, function(err) {
    if (err) {
      // 上传失败
      res.json({
        code: -1,
        message: err.message
      });
      return;
    }
    // 上传成功
    const size = fs.statSync(chunkFilePath).size;
    uploadedChunks[chunkIndex] = size;
    if (Object.keys(uploadedChunks).length === totalChunks) {
      // 所有分块上传完成
      const ws = fs.createWriteStream(filePath);
      for (let i = 0; i < totalChunks; i++) {
        const chunkFilePath = `${filePath}.${i}`;
        const rs = fs.createReadStream(chunkFilePath);
        rs.pipe(ws, { end: false });
        rs.on('end', function() {
          fs.unlinkSync(chunkFilePath);
        });
      }
      ws.on('finish', function() {
        res.json({
          code: 0,
          message: '上传成功',
          size: fs.statSync(filePath).size
        });
      });
    } else {
      // 继续上传下一块
      res.json({
        code: 2,
        uploadedChunks: uploadedChunks
      });
    }
  });
});
app.listen(port, function() {
  console.log(`Server is running on port ${port}`);
});

以上是后端的核心代码实现，该代码使用了Express框架和Multer中间件进行文件上传的处理。在上传过程中，服务器会检查每个分块是否已经上传过，如果已经上传过，则返回已上传的大小；否则，继续接收分块数据，并将分块数据保存到本地文件中。当所有分块上传完成后，服务器会将所有分块合并成一个完整的文件，并将合并后的文件保存到本地磁盘中。需要注意的是，在合并分块的过程中，需要使用一个可写流和多个可读流进行数据的拼接和写入，同时需要在每个分块写入完成之后，删除本地的分块文件。

综上所述，实现大文件的断点续传需要前后端配合完成，前端代码负责将文件分成若干个小块，使用XMLHttpRequest对象进行上传，并在上传过程中支持断点续传；后端代码负责接收分块数据，保存到本地磁盘中，并在所有分块上传完成后将它们合并成一个完整的文件。

使用XMLHttpRequest 封装一个http请求函数，并返回调用结果

### 回答1：

XMLHttpRequest可以用来封装一个http请求函数，可以通过XMLHttpRequest.send()方法来发送请求，XMLHttpRequest.onreadystatechange()方法可以获取调用结果。

### 回答2：
XMLHttpRequest是一种浏览器内置的JavaScript对象，用于发起HTTP请求并处理响应。可以使用XMLHttpRequest来封装一个http请求函数，并返回调用结果。

首先，创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

然后，定义一个回调函数来处理响应：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;
        // 处理响应
        console.log(response);
    }
};

接下来，使用open方法设置请求方法和URL，并发送请求：

xhr.open("GET", "http://example.com/api", true);
xhr.send();

在回调函数中，可以对响应进行进一步的处理。如果需要发送带有数据的POST请求，可以在send方法中传递参数：

xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));

最后，可以通过将这个封装好的http请求函数进行封装，来用于不同的http请求调用。例如：

function httpRequest(method, url, data, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = xhr.responseText;
            callback(response);
        }
    };
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));
}

httpRequest("POST", "http://example.com/api", data, function(response) {
    // 处理响应
    console.log(response);
});

这样就可以封装一个http请求函数，并返回调用结果。

### 回答3：
使用XMLHttpRequest封装一个HTTP请求函数，并返回调用结果的代码如下：

function httpRequest(url, method, data) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    
    xhr.onerror = function() {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    
    if (method === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/json');
    }
    
    xhr.send(JSON.stringify(data));
  });
}

// 调用示例
var apiUrl = 'https://api.example.com/data';
var requestData = {
  name: 'John Doe',
  age: 25
};

httpRequest(apiUrl, 'POST', requestData)
  .then(function(response) {
    console.log('调用成功', response);
  })
  .catch(function(error) {
    console.error('调用失败', error);
  });

这段代码定义了一个`httpRequest`函数，接受三个参数：`url`表示要发送请求的URL地址，`method`表示请求的方法（如GET或POST），`data`表示请求的数据。函数通过创建一个新的`XMLHttpRequest`对象，设置请求的URL和方法，然后发送请求。当请求成功返回时，通过`resolve`回调函数返回请求结果；当请求失败时，通过`reject`回调函数返回错误信息。在调用时可以使用`then`方法处理请求成功的结果，使用`catch`方法处理请求失败的情况。