HTML5怎么通过Fetch和Ajax请求JSON数据并解析使用？

HTML5标准中并没有一个名为JSON的API，但浏览器提供的Fetch和XMLHttpRequest都能异步获取服务器返回的JSON数据。JSON本身是一种轻量级文本格式，必须经过解析才能变成可操作的JavaScript对象。前端调用接口时，通常先发起HTTP请求，再对响应体执行JSON解析，最后将结果用于页面渲染或业务计算。

一、JSON数据在HTML5中的定位与请求前置知识

JSON全称JavaScript Object Notation，是一种基于文本的数据交换格式。它由键值对和数组构成，与JavaScript对象字面量高度相似，但JSON是字符串，不能直接通过点语法访问属性。例如服务器返回的响应体可能是{"name":"张三","age":28}这样的文本，只有调用解析方法后才能使用obj.name读取字段。

在HTML5环境中，浏览器不提供单独的JSON请求方法，而是通过Fetch API或XMLHttpRequest对象来发送HTTP请求。两者都支持异步通信，能够在不刷新页面的情况下获取数据。选择哪种方式取决于兼容性要求和代码风格：Fetch基于Promise，语法更简洁；XMLHttpRequest兼容旧浏览器，事件回调更直观。

无论采用哪种方式，都必须注意请求头中的Accept字段建议设置为application/json，这样服务器更容易返回JSON格式。同时，如果接口位于不同域，还需要服务器配置CORS响应头，否则浏览器会拦截跨域响应。对于同源接口，可以直接请求；跨域场景下，前端无法绕过浏览器安全限制，只能依赖后端配合。

二、使用Fetch API获取并解析JSON

Fetch API是现代浏览器内置的全局方法，调用fetch(url)会返回一个Promise对象。它的响应体需要分两步处理：先检查response.ok或response.status判断HTTP状态，再执行response.json()把响应体解析为对象或数组。response.json()本身返回Promise，因此可以链式调用。很多人容易忽略状态码检查，导致404或500页面被错误解析，这是需要避免的。

下面是一个基础示例，展示如何获取用户列表并输出。代码中先判断响应是否成功，避免在404或500时继续解析无效内容。

// 使用fetch获取JSON数据
fetch('https://ipipp.com/api/users')
  .then(function(response) {
    if (!response.ok) {
      throw new Error('网络响应异常，状态码：' + response.status);
    }
    return response.json();
  })
  .then(function(data) {
    console.log(data);
    // 在这里执行渲染逻辑
  })
  .catch(function(error) {
    console.error('请求失败：', error);
  });

如果接口返回的数据结构明确，也可以结合async和await语法让流程更接近同步代码。使用try...catch包裹请求和解析过程，可以统一捕获网络异常、JSON解析异常和业务错误。下面的示例还演示了如何把解析后的数组渲染成页面列表。

async function loadUsers() {
  try {
    const response = await fetch('https://ipipp.com/api/users', {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    });
    if (!response.ok) {
      throw new Error('请求失败，状态码：' + response.status);
    }
    const users = await response.json();
    renderUsers(users);
  } catch (error) {
    console.error('获取数据出错：', error);
  }
}

function renderUsers(users) {
  const list = document.getElementById('user-list');
  users.forEach(function(user) {
    const item = document.createElement('li');
    item.textContent = user.name + ' - ' + user.email;
    list.appendChild(item);
  });
}

Fetch请求默认不携带Cookie，如果需要跨域携带凭证，应设置credentials为include。此外，response.json()在响应体不是合法JSON时会抛出SyntaxError，因此catch中需要区分错误类型。调试时可以临时改用response.text()打印原始字符串，确认后端返回内容是否符合预期。

三、使用XMLHttpRequest实现Ajax请求JSON

XMLHttpRequest简称XHR，是Ajax技术的核心对象。与Fetch不同，XHR用事件回调监听请求状态变化，readyState为4时表示请求完成。为了直接得到JSON对象，可以把responseType设置为json，这样xhr.response就是解析后的数据，而不需要再调用JSON.parse。

下面封装一个通用的ajaxGetJSON函数，它接受接口地址和回调函数。状态码判断使用大于等于200且小于300作为成功范围，涵盖各种2xx响应。回调函数采用Node.js风格的error-first模式，先判断错误再处理数据。

function ajaxGetJSON(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        callback(null, xhr.response);
      } else {
        callback(new Error('请求失败，状态码：' + xhr.status));
      }
    }
  };
  xhr.onerror = function() {
    callback(new Error('网络错误'));
  };
  xhr.send();
}

ajaxGetJSON('https://ipipp.com/api/users', function(error, data) {
  if (error) {
    console.error(error);
    return;
  }
  console.log(data);
});

如果不设置responseType，xhr.responseText拿到的是字符串，此时需要手动执行JSON.parse转换。手动转换更灵活，可以在解析前打印原始文本排查问题。需要注意的是，JSON.parse对格式要求严格，键名必须用双引号包裹，不允许尾逗号。下面是一个独立解析示例。

try {
  const jsonText = '{"name":"张三","age":28}';
  const obj = JSON.parse(jsonText);
  console.log(obj.name);
} catch (error) {
  console.error('JSON格式错误：', error);
}

XHR还提供onerror、onabort等事件，可以处理网络中断和主动取消。在旧版浏览器中，XHR是唯一可靠的异步请求方案，因此维护旧项目时仍然经常用到。对于现代项目，如果不需要兼容IE，通常优先使用Fetch。

四、解析后的JSON数据使用与错误处理

拿到JSON对象后，常见操作是遍历数组并生成动态DOM。为了保证渲染安全，建议优先使用textContent或createElement设置文本，而不是直接拼接HTML字符串，避免XSS攻击。下面展示纯文本渲染的示例，数据来自前面的renderUsers方法，这里单独给出完整实现。

function renderUsers(users) {
  const container = document.getElementById('user-list');
  container.innerHTML = '';
  users.forEach(function(user) {
    const card = document.createElement('div');
    const name = document.createElement('strong');
    name.textContent = user.name;
    const email = document.createElement('span');
    email.textContent = user.email;
    card.appendChild(name);
    card.appendChild(email);
    container.appendChild(card);
  });
}

错误处理主要包括三类：请求层错误、HTTP状态错误和解析错误。请求层错误可以通过catch或onerror捕获；HTTP状态错误需要主动判断status；解析错误通常发生在响应体不是合法JSON或后端返回了HTML错误页时。建议在开发阶段打印response.text()查看原始内容，而不是直接调用response.json()。

跨域问题同样是高频错误。如果浏览器控制台出现CORS相关提示，通常是因为服务器没有返回Access-Control-Allow-Origin头。此时可以联系后端配置，或者使用同源代理。对于公开接口，也可以查看是否支持JSONP，但JSONP只支持GET且安全性较差，不作为首选。

当JSON数据结构比较复杂时，可以使用可选链操作符访问嵌套属性，或先判断字段是否存在。例如data.user.profile.name在中间层为null时会报错，而data.user?.profile?.name能够避免这种问题。解析后的数据也可以缓存到变量或Map中，减少重复请求。掌握这些处理技巧后，HTML5中调用JSON会变得更加稳定高效。

HTML5JSONFetch Ajax修改时间：2026-08-20 13:25:52