如何用ajax获取json数据

如何用Ajax获取JSON数据：从入门到实践

在Web开发中,前端与后端的数据交互是核心环节之一，而Ajax（Asynchronous JavaScript and XML）作为一种无需刷新页面的异步数据传输技术，早已成为现代Web应用的标配，JSON（JavaScript Object Notation）因其轻量级、易读性强、与JavaScript原生兼容等优势，成为Ajax交互中最常用的数据格式，本文将详细介绍如何用Ajax获取JSON数据，从基础概念到代码实践，助你这一核心技能。

基础概念：Ajax与JSON的“黄金搭档”

什么是Ajax？

Ajax（Asynchronous JavaScript and XML）并非一种新技术，而是异步JavaScript+XML（或其他格式）的组合，它通过浏览器内置的XMLHttpRequest对象（或现代的fetch API），在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，这种“无刷新”体验极大地提升了用户交互的流畅性。

什么是JSON？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，以键值对（"key": "value"）的形式组织数据，结构类似于JavaScript的对象和数组。

{
  "name": "张三",
  "age": 25,
  "hobbies": ["阅读", "编程"],
  "isStudent": true
}

JSON的优势在于：

数据格式简洁,可读性强；
与JavaScript原生兼容,无需额外解析（JSON.parse()可直接将JSON字符串转为JavaScript对象）；
支持多种数据类型（字符串、数字、布尔值、数组、对象、null）。

核心方法：用`XMLHttpRequest`获取JSON数据

XMLHttpRequest（简称XHR）是Ajax的“传统”实现方式，所有现代浏览器均支持，以下是使用XHR获取JSON数据的详细步骤：

步骤1：创建XHR对象

首先需要创建一个XMLHttpRequest实例：

const xhr = new XMLHttpRequest();

步骤2：配置请求

通过open()方法配置请求的参数，包括请求方法、URL和是否异步：

// 方法：GET（获取数据）、URL：后端API地址、async：true（异步）
xhr.open('GET', 'https://api.example.com/data.json', true);

请求方法：GET（常用于获取数据）、POST（常用于提交数据）、PUT（更新数据）、DELETE（删除数据）等；
URL：后端提供的API接口地址，需确保允许跨域（若前后端分离部署）；
async：true表示异步请求（推荐），false表示同步请求（会阻塞页面，不推荐）。

步骤3：设置响应数据类型

通过responseType属性明确告诉服务器期望返回的数据类型，这里设为"json"，浏览器会自动将响应解析为JavaScript对象：

xhr.responseType = 'json';

如果不设置responseType，默认返回的是字符串，需手动用JSON.parse()解析。

步骤4：发送请求

调用send()方法发送请求，GET请求的参数可通过URL传递，send()无需参数；POST请求需在send()中传入请求体数据（如JSON字符串）：

xhr.send(); // GET请求
// xhr.send(JSON.stringify({name: '李四'})); // POST请求示例

步骤5：监听响应状态变化

通过onreadystatechange事件（或现代的onload/onerror）监听请求状态变化。XMLHttpRequest对象有一个readyState属性，表示请求的当前状态：

0：未初始化（open()调用前）；
1：已打开（open()调用后）；
2：已发送（send()调用后）；
3：接收中（服务器部分响应数据）；
4：已完成（服务器响应结束）。

当readyState为4时，表示请求完成，此时需检查HTTP状态码status（200表示成功，404表示资源未找到，500表示服务器错误等）：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 请求成功，获取响应数据
      const data = xhr.response; // 因设置了responseType为'json'，此处已是对象
      console.log('获取到的JSON数据：', data);
      // 处理数据（如渲染到页面）
    } else {
      // 请求失败
      console.error('请求失败，状态码：', xhr.status);
    }
  }
};

更简洁的写法（推荐）：使用onload（请求成功时触发）和onerror（请求失败时触发）：

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = xhr.response;
    console.log('数据获取成功：', data);
  } else {
    console.error('HTTP错误：', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('网络错误或请求被阻止');
};

完整示例

假设后端API返回的JSON数据为：

{
  "code": 200,
  "message": "success",
  "data": [
    { "id": 1, "name": "苹果", "price": 5.8 },
    { "id": 2, "name": "香蕉", "price": 3.5 }
  ]
}

前端通过XHR获取并渲染数据的代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/products.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = xhr.response;
    if (response.code === 200) {
      const products = response.data;
      // 渲染到页面
      const productList = document.getElementById('product-list');
      products.forEach(product => {
        const li = document.createElement('li');
        li.textContent = `${product.name}: ¥${product.price}`;
        productList.appendChild(li);
      });
    } else {
      console.error('接口返回错误：', response.message);
    }
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('网络错误，请检查连接');
};
xhr.send();

现代方法：用`fetch` API获取JSON数据

fetch是ES2015引入的现代Web API，用于替代XMLHttpRequest，语法更简洁、基于Promise，支持异步流程控制（如async/await），目前所有现代浏览器均支持fetch（IE除外）。

基本语法

fetch()返回一个Promise对象，成功时解析为Response对象，需通过json()方法进一步解析为JavaScript对象：

fetch(url, options)
  .then(response => response.json()) // 解析JSON数据
  .then(data => {
    console.log('获取到的数据：', data);
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

参数说明

url：请求的API地址（必填）；

options：请求配置对象（可选），包括方法、请求头、请求体等。

fetch('https://api.example.com/data.json', {
  method: 'GET', // 请求方法，默认为GET
  headers: {
    'Content-Type': 'application/json', // 设置请求头（POST/PUT时常用）
  },
  body: JSON.stringify({ name: '王五' }), // 请求体（POST/PUT时需传入字符串）
})

完整示例（Promise链式调用）

fetch('https://api.example.com/products.json')
  .then(response => {
    // 检查HTTP状态码
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    return response.json(); // 解析JSON
  })
  .then(data => {
    if (data.code === 200) {
      const products = data.data;
      const productList = document.getElementById('product-list');
      productList.innerHTML = products.map(product => 
        `<li>${product.name}: ¥${product.price}</li>`
      ).join('');
    } else {
      throw new Error(data.message || '接口返回错误');
    }
  })
  .catch(error => {
    console.error('请求出错：', error);
  });

更优雅的写法（`async/await`）

结合async/await，异步代码可以像同步代码一样清晰：

async function fetchProducts() {
  try {
    const response = await fetch('https://api.example.com/products.json');
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    const data = await response.json();
    if (data.code === 200) {
      const products = data.data;

正文

如何用ajax获取json数据