在前端开发中，AJAX 是一个常用的技术，可以通过异步请求与服务器进行通信，并动态更新页面内容。但是，在使用 AJAX 时，我们需要注意 URL 的处理方式，尤其是相对 URL 的处理。
相对 URL 的含义
相对 URL 是指不包含完整协议和主机名的 URL，如 /api/users。这种 URL 可以用于在当前网站内部进行资源访问。相对 URL 会被解析为相对于当前 URL 的路径。
例如，如果当前页面的 URL 是 https://example.com/home，那么相对 URL /api/users 就会被解析为 https://example.com/api/users。
在 AJAX 请求中使用相对 URL
在 AJAX 请求中，我们通常使用相对 URL 来访问服务器上的资源。使用相对 URL 可以让我们的代码更加简洁易读，也可以减少代码的维护成本。但是，在使用相对 URL 时，我们需要注意一些问题。
相对 URL 的解析规则
在使用相对 URL 时，我们需要了解相对 URL 的解析规则。相对 URL 的解析规则有两种：基于当前 URL 和基于文档根目录。
- 基于当前 URL 的解析规则
当相对 URL 以 ./、../ 或没有斜杠开头时，它会被解析为相对于当前 URL 的路径。
例如，如果当前页面的 URL 是 https://example.com/home，那么相对 URL ./api/users 会被解析为 https://example.com/api/users，相对 URL ../about 会被解析为 https://example.com/about，相对 URL contact 会被解析为 https://example.com/contact。
- 基于文档根目录的解析规则
当相对 URL 以斜杠开头时，它会被解析为相对于文档根目录的路径。
例如，如果当前页面的 URL 是 https://example.com/，那么相对 URL /api/users 会被解析为 https://example.com/api/users。
相对 URL 的缺陷
使用相对 URL 有一个缺陷，就是相对 URL 可能会与当前页面的 URL 不一致，导致请求失败。因此，在使用相对 URL 时，我们需要仔细检查 URL 是否正确。
例如，如果当前页面的 URL 是 https://example.com/home，而我们使用相对 URL /api/users 发送 AJAX 请求，那么请求的 URL 实际上是 https://example.com/api/users，如果服务器上没有对应的资源，请求就会失败。
示例代码
下面是一个使用相对 URL 发送 AJAX 请求的示例代码：
-- -------------------- ---- -------
--------
---- -------------
--------- -------
-------- -------------- -
------------------
--
------ ------------- ------- ------ -
------------------- ------- ------- - - -------
-
---在这个示例代码中，我们使用相对 URL /api/users 发送 AJAX 请求，并期望服务器返回 JSON 格式的数据。如果请求成功，我们会将返回的数据输出到控制台；如果请求失败，我们会打印错误信息到控制台。
总结
在 AJAX 请求中使用相对 URL 可以让我们的代码更加简洁易读，也可以减少代码的维护成本。但是，在使用相对 URL 时，我们需要注意 URL 的解析规则和 URL 是否正确，以避免请求失败。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28588