从零开始掌握XMLHttpRequest的实战技巧与常见坑点解析

先看效果，再看代码

咱们直接上干货，先来个简单的例子，看看XMLHttpRequest到底是怎么工作的。这个例子就是一个基本的GET请求，从一个API获取数据然后展示在页面上。

首先，我们需要创建一个XMLHttpRequest对象，然后设置一些属性，最后发送请求并处理响应。听起来挺复杂，但实际操作起来很简单。

// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://jztheme.com/api/data');

// 设置回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理响应数据
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 请求失败，处理错误
    console.error('请求失败: ' + xhr.status);
  }
};

// 发送请求
xhr.send();

上面这段代码展示了如何使用XMLHttpRequest发起一个GET请求，并处理响应数据。简单吧？接下来我们来看看更多的用法和场景。

POST请求：提交表单数据

POST请求也是常用的，特别是在提交表单数据时。这里我写了个简单的例子，演示如何通过POST请求提交表单数据。

// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open('POST', 'https://jztheme.com/api/submit');

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 设置回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理响应数据
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    // 请求失败，处理错误
    console.error('请求失败: ' + xhr.status);
  }
};

// 准备要提交的数据
const formData = {
  name: '张三',
  email: 'zhangsan@example.com'
};

// 发送请求
xhr.send(JSON.stringify(formData));

这个例子展示了如何通过POST请求提交表单数据。记得设置请求头Content-Type为application/json，这样服务器才能正确解析你提交的数据。

踩坑提醒：这三点一定注意

在实际开发过程中，我踩过不少坑，这里总结一下常见的几个问题，希望对你有帮助。

• 跨域问题： 如果你的请求是跨域的（比如前端域名和后端API不在同一个域名下），可能会遇到跨域问题。解决方法是在服务器端设置CORS（跨域资源共享）头，或者使用JSONP（不过JSONP只能用于GET请求）。亲测有效的方法是让后端同学帮你配置CORS头。
• 请求超时： 默认情况下，XMLHttpRequest没有超时设置。如果请求一直不返回，前端会一直等待，用户体验非常差。建议你在发送请求前设置超时时间，比如：

// 设置超时时间为5秒
xhr.timeout = 5000;

// 设置超时回调函数
xhr.ontimeout = function() {
  console.error('请求超时');
};

• 错误处理： 处理错误是必须的，否则一旦请求失败，用户可能完全不知道发生了什么。建议在onerror回调中处理错误情况，比如：

xhr.onerror = function() {
  console.error('请求出错');
};

高级技巧：监听请求进度

有时候，我们需要知道请求的进度，特别是在上传大文件时。XMLHttpRequest提供了一个onprogress事件，可以用来监听请求的进度。下面是一个例子：

// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open('POST', 'https://jztheme.com/api/upload');

// 设置请求头
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

// 设置进度回调函数
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(上传进度: ${percentComplete.toFixed(2)}%);
  }
};

// 设置完成回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功');
  } else {
    console.error('上传失败: ' + xhr.status);
  }
};

// 设置错误回调函数
xhr.onerror = function() {
  console.error('上传出错');
};

// 准备要上传的文件
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

// 创建FormData对象
const formData = new FormData();
formData.append('file', file);

// 发送请求
xhr.send(formData);

这个例子展示了如何监听文件上传的进度。通过xhr.upload.onprogress事件，我们可以实时获取上传的进度，并在控制台中显示出来。

结尾：这个技术的拓展用法还有很多

以上就是我对XMLHttpRequest的一些实战经验分享。其实这个技术的拓展用法还有很多，比如异步加载图片、动态加载CSS等。后续我会继续分享这类博客，如果你有更好的实现方式或遇到什么问题，欢迎在评论区交流。

希望这篇博客对你有帮助，我们一起进步！