在前端开发中，我们经常需要通过 Ajax 调用后端 API 来获取或提交数据。有时候这些 API 受到基本身份验证的保护，也就是要求在每个请求中提供用户名和密码。本文将介绍如何使用 jQuery 和 HTTP 基本认证来实现这样的请求。
什么是 HTTP 基本认证？
HTTP 基本认证（Basic Authentication）是一种简单的身份验证方式，它要求在每个请求的头部中包含一个 Authorization 字段，该字段的值为 base64 编码后的用户名和密码。例如：
-------------- ----- ------------------------
以上面的 Authorization 字段为例，其中 dXNlcm5hbWU6cGFzc3dvcmQ= 是将字符串 "username:password" 进行 base64 编码得到的结果。服务器可以通过解析该字段来验证用户身份。
如何在 jQuery 中添加 HTTP 基本认证？
在 jQuery 中，我们可以使用 $.ajax() 方法来发起 Ajax 请求，并通过设置 headers 选项来添加 Authorization 头部。具体来说，我们需要将用户名和密码拼接成字符串并进行 base64 编码，然后将编码后的结果放到 Authorization 字段中，代码如下：
--------
---- ------------
------- ------
-------- -
-------------- ------ - - -------------------------
--
-------- -------- ------ -
------------------
-
---以上代码会向 /api/data 发送一个 GET 请求，并在请求头部中添加了 Authorization 字段。注意，在实际使用时，我们需要将 'username:password' 替换成实际的用户名和密码。
如何处理认证失败的情况？
如果提供的用户名和密码不正确，服务器会返回一个 401 Unauthorized 的响应。为了处理这种情况，我们可以使用 jQuery 的 error 回调函数来捕获错误，并根据状态码来判断是否是认证失败的情况，代码如下：
--------
---- ------------
------- ------
-------- -
-------------- ------ - - -------------------------
--
-------- -------- ------ -
------------------
--
------ -------- ----- -
-- ----------- --- ---- -
--------------------------- ---------
- ---- -
-------------------- ---------
-
-
---以上代码中，当服务器返回 401 状态码时，会输出 "Authentication failed"，否则会输出 "Request failed"。
总结
本文介绍了如何在 jQuery 中使用 HTTP 基本认证来发起 Ajax 请求，并介绍了如何处理认证失败的情况。通过阅读本文，读者可以学习到如何使用 jQuery 发起带有身份验证的请求，从而更好地完成前端开发工作。
示例代码已经附上，读者可以根据自己的需求进行修改和调整。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30270