深入剖析 JavaScript 的 XMLHttpRequest(XHR)

深入剖析 JavaScript 的 XMLHttpRequest(XHR)

嗨,大家好,我是墩墩大魔王丶。在前端开发中,与服务器进行数据交互是必不可少的一部分。而 JavaScript 的 XMLHttpRequest(XHR) 是实现这一目标的关键工具之一。它允许我们通过 JavaScript 发送 HTTP 请求到服务器,并获取服务器返回的数据,从而实现异步通信。在本文中,我们将深入探讨 XMLHttpRequest(XHR),了解它的工作原理、常见状态以及一些技术细节,并通过丰富的示例来展示其强大之处。

XMLHttpRequest 的方法

XMLHttpRequest(XHR)对象提供了一系列方法,用于在 JavaScript 中发送 HTTP 请求并处理服务器的响应。以下是 XHR 对象常用的方法概述:

  1. open(method, url[, async[, user[, password]]])

    • 用于初始化一个请求。
    • 参数:
      • method:指定请求的 HTTP 方法,如 "GET"、"POST" 等。
      • url:指定请求的 URL。
      • async(可选):一个可选的布尔值参数,表示请求是否异步,默认为 true。
      • user(可选):一个可选的用户名,用于基本身份验证。
      • password(可选):一个可选的密码,用于基本身份验证。
    • 该方法调用后,请求的配置信息被发送,但请求本身并未发出。
  2. send([body])

    • 用于发送 HTTP 请求。
    • 参数:
      • body(可选):要发送的请求主体数据,如 POST 请求的数据。
    • 如果请求是异步的,则该方法会立即返回,不会阻塞代码执行。
  3. setRequestHeader(name, value)

    • 用于设置 HTTP 请求头。
    • 参数:
      • name:要设置的请求头名称。
      • value:要设置的请求头的值。
  4. abort()

    • 用于取消当前的 HTTP 请求。
    • 调用该方法后,请求将被中止,并且不会触发任何事件。
  5. getResponseHeader(name)

    • 用于获取指定的响应头。
    • 参数:
      • name:要获取的响应头名称。
    • 返回指定名称的响应头的值,如果不存在,则返回 null。
  6. getAllResponseHeaders()

    • 用于获取所有的响应头。
    • 返回一个包含所有响应头的字符串。
  7. overrideMimeType(mime)

    • 用于重写服务器返回的 MIME 类型。
    • 参数:
      • mime:要重写的 MIME 类型字符串。

下面是一些使用 XMLHttpRequest 对象的示例代码,演示了如何使用它的方法发送请求和处理响应:

初始化请求并发送 GET 请求:

javascript 复制代码
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('GET 请求成功:', xhr.responseText);
    } else {
      console.error('GET 请求失败:', xhr.status);
    }
  }
};

初始化请求并发送 POST 请求:

javascript 复制代码
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/save', true);
xhr.setRequestHeader('Content-Type', 'application/json');

var data = JSON.stringify({ username: 'example', password: '123456' });
xhr.send(data);

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('POST 请求成功:', xhr.responseText);
    } else {
      console.error('POST 请求失败:', xhr.status);
    }
  }
};

获取响应头信息:

javascript 复制代码
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var contentType = xhr.getResponseHeader('Content-Type');
      console.log('响应内容类型:', contentType);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

取消请求:

javascript 复制代码
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

// 某些条件下取消请求
xhr.abort();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 0) {
      console.log('请求被取消');
    } else if (xhr.status === 200) {
      console.log('请求成功:', xhr.responseText);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

技术细节:不同的响应状态和状态码

readyState 值 描述
0 (UNSENT) XHR 对象已创建,但尚未调用 open() 方法。
1 (OPENED) open() 方法已调用,但尚未调用 send() 方法。
2 (HEADERS_RECEIVED) send() 方法已调用,并且头部和状态已经可获得。
3 (LOADING) 下载数据中;responseText 属性已经包含部分数据。
4 (DONE) 数据已下载完毕;可以通过 responseTextresponseXML 属性获取完整的响应数据。

常见的 HTTP 状态码有以下几种:

状态码 描述
200 请求成功。
404 请求的资源未找到。
500 服务器内部错误。
等等 具体的状态码可根据实际情况而定。

结论

通过本文的介绍,我们深入了解了 JavaScript 的 XMLHttpRequest(XHR) API,并学习了如何使用它来与服务器进行通信。XHR 提供了一种简单而强大的机制,使得我们可以通过 JavaScript 发送各种类型的 HTTP 请求,并获取服务器返回的数据。通过丰富的示例和技术细节,我们希望能够帮助你更好地理解和应用这一重要的前端技术。

希望这篇文章能帮助大家更好地理解 XMLHttpRequest(XHR) ,欢迎大家多多交流,共同进步!💐

相关推荐
在未来等你10 小时前
Elasticsearch面试精讲 Day 25:Elasticsearch SQL与数据分析
大数据·分布式·elasticsearch·搜索引擎·面试
~无忧花开~10 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D10 小时前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠10 小时前
AJAX的学习
前端·学习·ajax
JNU freshman10 小时前
vue 技巧与易错
前端·javascript·vue.js
落一落,掉一掉10 小时前
第十二周 waf绕过和前端加密绕过
前端
Asort10 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee10 小时前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安10 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼10 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript