freeCodeCamp教程：使用JavaScript XMLHttpRequest方法获取JSON数据

廉霓津Max

于 2025-05-30 09:03:45 发布

阅读量333

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00943/article/details/148323803

freeCodeCamp教程：使用JavaScript XMLHttpRequest方法获取JSON数据

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

什么是XMLHttpRequest？

XMLHttpRequest（简称XHR）是浏览器提供的JavaScript API，用于在客户端和服务器之间传输数据。它是实现AJAX（Asynchronous JavaScript and XML）技术的核心对象，允许网页在不重新加载整个页面的情况下更新部分内容。

为什么需要获取JSON数据？

在现代Web开发中，前后端分离已成为主流架构。前端页面通常需要从服务器获取数据来动态更新内容，而JSON（JavaScript Object Notation）是目前最常用的数据交换格式，因为它轻量、易读且与JavaScript天然兼容。

实现步骤详解

让我们通过一个获取猫咪照片API数据的实例，来学习如何使用XMLHttpRequest：

创建XHR对象：
```
const req = new XMLHttpRequest();
```
这行代码创建了一个新的XMLHttpRequest对象实例，我们将通过这个对象与服务器通信。
初始化请求：
```
req.open('GET', '/json/cats.json', true);
```
open()方法初始化一个请求：
- 第一个参数指定HTTP方法（这里是GET）
- 第二个参数是请求的URL
- 第三个参数true表示异步请求（推荐使用异步，避免阻塞页面）
发送请求：
```
req.send();
```
这个方法将我们配置好的请求发送到服务器。
处理响应：
```
req.onload = function() {
  const json = JSON.parse(req.responseText);
  document.getElementsByClassName('message')[0].innerHTML = 
    JSON.stringify(json);
};
```
当请求完成时，onload事件会被触发：
- responseText属性包含服务器返回的原始文本
- JSON.parse()将JSON字符串转换为JavaScript对象
- JSON.stringify()将JavaScript对象转换回格式化的JSON字符串
- 最后将结果显示在页面上

实际应用中的注意事项

错误处理：实际开发中应该添加onerror处理程序来捕获网络错误
状态检查：检查readyState和status属性确保请求成功
跨域问题：如果请求不同源的API，需要服务器支持CORS或使用JSONP等技术
现代替代方案：虽然XHR仍然可用，但现代开发更推荐使用fetch API或axios等库

完整示例代码

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('getMessage').onclick = function() {
      const req = new XMLHttpRequest();
      req.open('GET', '/json/cats.json', true);
      req.send();
      req.onload = function() {
        const json = JSON.parse(req.responseText);
        document.getElementsByClassName('message')[0].innerHTML = 
          JSON.stringify(json, null, 2);  // 添加格式化参数使输出更美观
      };
    };
  });
</script>