如何用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;


还没有评论,来说两句吧...