likes
comments
collection
share

深入剖析 JavaScript 的 XMLHttpRequest(XHR)

作者站长头像
站长
· 阅读数 5

深入剖析 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 请求:

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 请求:

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);
    }
  }
};

获取响应头信息:

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);
    }
  }
};

取消请求:

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) ,欢迎大家多多交流,共同进步!💐

转载自:https://juejin.cn/post/7350683679298224182
评论
请登录