前端开发|数据交互_Ajax常用于请求json数据_ajax多用于请求json

🌟 前端必备技能：用Ajax轻松搞定JSON数据交互

场景引入：
凌晨2点，你正在赶一个天气预报小程序，后端同事丢来一句："接口好了，数据是JSON格式的！" 你盯着屏幕上的空白页面发愁——怎么把数据"抓"到网页上？别急，Ajax就是你的深夜救星！💫

为什么Ajax和JSON是天生一对？

1. 轻量CP组合 �

   • JSON数据格式像快递小包裹（{"city":"北京","temp":28}），比XML轻30%
   • Ajax就像快递小哥，专门负责这种轻量包裹的取送

2. 无缝对接JavaScript

   // 拿到数据直接当JS对象用！
   const data = JSON.parse(xhr.responseText);
   console.log(data.userName); // 不用像XML那样解析节点

3. 现代API的标配 📦
   根据2025年统计，90%的RESTful API默认返回JSON格式

   

手把手写个Ajax请求JSON

基础版（XMLHttpRequest）

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/weather', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText); // 关键步骤！
    document.getElementById('result').innerHTML = 
      `当前温度：${data.temperature}℃`;
  }
};
xhr.send();

升级版（Fetch API）✨

fetch('/api/user')
  .then(response => response.json()) // 自动解析JSON
  .then(data => {
    console.log(data.avatarUrl);
  });

实战避坑指南 🚧

1. 跨域问题

   • 看到No 'Access-Control-Allow-Origin'报错？
   • 解决方案：让后端同学加CORS头，或者用代理

2. 错误处理

   fetch('/api/data')
     .then(response => {
       if (!response.ok) throw new Error('服务器抽风了');
       return response.json();
     })
     .catch(err => {
       alert(`请求失败：${err.message} 😢`);
     });

3. 性能优化

   • 频繁请求？用debounce（防抖）控制请求频率
   • 大JSON数据开启gzip压缩

JSON交互的现代玩法 🚀

1. POST发送JSON

   

   fetch('/api/save', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ title: '前端秘籍' }) // 对象转JSON字符串
   });

2. WebSocket实时JSON

   const socket = new WebSocket('wss://api.example.com');
   socket.onmessage = (event) => {
     const liveData = JSON.parse(event.data); // 实时股票数据等
   };

最后的小彩蛋 🥚：
Chrome开发者工具里，看到Network标签页的JSON数据会自动格式化，还能折叠查看层级，简直是调试神器！

（本文技术要点参考自2025年7月发布的《Web开发趋势报告》）