使用XMLHttpRequest对象进行网络请求的步骤

使用XMLHttpRequest对象进行网络请求的基本步骤如下:

1:创建XHR对象:

复制代码
const xhr = new XMLHttpRequest();

2:初始化请求:

复制代码
xhr.open(method, url, async);

method: HTTP请求方法,如 'GET', 'POST', 'PUT', 'DELETE' 等。
url: 请求的目标URL地址。
async: 是否异步执行,默认为 true。

3:设置请求头:

复制代码
xhr.setRequestHeader('Content-Type', 'application/json');

如果需要设置请求头,可以在此步骤完成。

4:监听请求状态变化:

复制代码
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功,处理响应数据
    console.log(xhr.responseText);
  }
};

xhr.readyState 用于跟踪请求的状态变化:
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
xhr.status 用于获取HTTP响应状态码。

5:发送请求:

复制代码
    if (method === 'POST') {
      xhr.send(JSON.stringify(data));
    } else {
      xhr.send();
    }

    对于 POST 请求,需要传递请求体数据,通常需要将其转换为JSON格式。
    对于 GET 请求,可以直接调用 send() 方法。

这就是使用XMLHttpRequest对象进行网络请求的基本步骤。现在大多数情况下会使用更简单的Fetch API或者基于Axios的库来发送网络请求,它们提供了更简洁的API和更好的错误处理等功能。

相关推荐
DevilSeagull2 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
全栈技术负责人4 天前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
Pu_Nine_94 天前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
空山新雨(大队长)5 天前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
索迪迈科技5 天前
Flex布局——详解
前端·html·css3·html5
十碗饭吃不饱5 天前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
心一信息6 天前
ThreeJS骨骼示例
css·css3·html5
笑鸿的学习笔记7 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
java水泥工7 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
Thetimezipsby7 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro