AJAX如何传送JSON数据:从基础到实践的完整指南
在现代Web开发中,AJAX(Asynchronous JavaScript and XML)和JSON(JavaScript Object Notation)是构建动态、交互式页面的核心技术,AJAX允许网页在不重新加载的情况下与服务器交换数据,而JSON以其轻量级、易读的格式成为数据交换的主流选择,本文将详细介绍AJAX如何高效、安全地传送JSON数据,涵盖核心原理、代码实现、常见问题及解决方案。
AJAX与JSON:数据交换的“黄金搭档”
1 什么是AJAX?
AJAX(异步JavaScript和XML)并非一种新技术,而是利用浏览器内置对象(如XMLHttpRequest或fetch API)实现异步通信的技术集合,其核心优势是通过后台与服务器交换数据,更新页面局部内容,提升用户体验。
2 什么是JSON?
JSON(JavaScript对象表示法)是一种轻量级的数据交换格式,以键值对("key": "value")和数组([])组织数据,结构清晰,易于人阅读和机器解析,它与JavaScript原生兼容,无需额外转换即可在JS中使用,成为AJAX数据传输的首选格式。
3 为什么AJAX+JSON是最佳组合?
- 高效性:JSON文本格式紧凑,传输数据量小,网络传输速度快。
- 易用性:JSON可直接通过
JSON.parse()和JSON.stringify()与JS对象互转,无需复杂解析。 - 灵活性:支持复杂数据结构(嵌套对象、数组等),能满足大多数业务场景需求。
AJAX传送JSON数据的两种核心方式
AJAX传送JSON数据主要通过两种方式:请求体携带JSON数据(POST/PUT等请求)和响应体返回JSON数据(GET请求获取数据),以下是具体实现方法。
1 使用XMLHttpRequest(传统方式)
XMLHttpRequest是AJAX的经典实现,所有现代浏览器均支持,以下是分步实现:
步骤1:创建XHR对象
const xhr = new XMLHttpRequest();
步骤2:配置请求
通过open()方法指定请求方法、URL和是否异步,若需传送JSON数据,通常使用POST或PUT请求,并设置Content-Type为application/json(告知服务器请求体是JSON格式)。
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json'); // 关键:设置请求头
步骤3:准备JSON数据并序列化
JS对象需通过JSON.stringify()转换为JSON字符串,才能作为请求体发送:
const data = {
name: '张三',
age: 25,
hobbies: ['reading', 'coding']
};
const jsonData = JSON.stringify(data); // 转换为JSON字符串
步骤4:发送请求
将JSON字符串作为send()方法的参数:
xhr.send(jsonData);
步骤5:处理响应
通过onreadystatechange事件监听请求状态,当readyState为4(请求完成)且status为200(成功)时,解析响应数据:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText); // 解析响应JSON
console.log('服务器返回:', response);
} else if (xhr.readyState === 4) {
console.error('请求失败:', xhr.status);
}
};
完整代码示例
// 1. 创建XHR对象
const xhr = new XMLHttpRequest();
// 2. 配置请求
xhr.open('POST', 'https://api.example.com/user', true);
xhr.setRequestHeader('Content-Type', 'application/json');
// 3. 准备数据
const userData = {
username: 'zhangsan',
password: '123456',
email: 'zhangsan@example.com'
};
const jsonData = JSON.stringify(userData);
// 4. 发送请求
xhr.send(jsonData);
// 5. 处理响应
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
console.log('创建用户成功:', response);
} else {
console.error('请求失败:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('网络错误或请求未发送');
};
2 使用fetch API(现代方式)
fetch是ES6引入的现代API,基于Promise,语法更简洁,已成为AJAX开发的主流选择,以下是实现步骤:
基本语法
fetch(url, options)
.then(response => response.json()) // 解析响应JSON
.then(data => console.log(data))
.catch(error => console.error('错误:', error));
关键参数:options对象
传送JSON数据时,需在options中配置以下属性:
method: 请求方法(如POST、PUT)。headers: 请求头,必须设置'Content-Type': 'application/json'。body: 请求体,需通过JSON.stringify()将JS对象转为JSON字符串。
完整代码示例
// 1. 准备请求数据
const postData = { '学习AJAX',
content: '本文介绍AJAX传送JSON的方法',
tags: ['前端', 'JavaScript']
};
// 2. 发送fetch请求
fetch('https://api.example.com/posts', {
method: 'POST', // 请求方法
headers: {
'Content-Type': 'application/json', // 关键:设置请求头
'Authorization': 'Bearer your_token' // 可选:认证信息
},
body: JSON.stringify(postData) // 转换为JSON字符串
})
.then(response => {
if (!response.ok) { // 检查HTTP状态码
throw new Error(`HTTP错误!状态码:${response.status}`);
}
return response.json(); // 解析响应JSON
})
.then(data => {
console.log('创建文章成功:', data);
})
.catch(error => {
console.error('请求失败:', error);
});
fetch与XMLHttpRequest的对比
| 特性 | fetch API |
XMLHttpRequest |
|---|---|---|
| 语法 | 基于Promise,简洁 | 基于回调,代码冗长 |
| 错误处理 | 仅当网络错误时进入catch,需手动检查response.ok |
通过status和onerror处理 |
| 响应解析 | 需调用response.json()等方法手动解析 |
可通过responseText直接获取 |
| 兼容性 | IE不支持(需polyfill),现代浏览器全支持 | 所有浏览器支持 |
关键细节:避免常见错误
1 请求头Content-Type必须匹配
- 发送JSON时:请求头需设置
'Content-Type': 'application/json',否则服务器无法正确解析请求体。 - 接收JSON时:若服务器返回JSON,响应头通常包含
'Content-Type': 'application/json',客户端需通过response.json()解析(而非直接使用responseText)。
2 数据序列化与反序列化
- 发送前:JS对象必须用
JSON.stringify()转为JSON字符串,否则body会以[object Object]形式发送,导致服务器解析失败。 - 接收后:响应体是JSON字符串,需用
JSON.parse()转为JS对象,否则无法访问属性(如response.name会报错)。
3 跨域问题(CORS)
若请求的API与当前页面不同源(如协议、域名、端口不同),浏览器会阻止AJAX请求(同源策略),解决方案:
- 服务器配置CORS:在响应头中添加
'Access-Control-Allow-Origin': '*'(允许所有域名)或指定域名(如'https://yourdomain.com')。 - 携带凭证:若需发送Cookie,需设置
credentials: 'include'(fetch)或xhr.withCredentials = true(XMLHttpRequest)。
实战场景:用户登录与数据提交
1 场景1:用户登录(传送JSON)
前端收集用户名和密码,通过AJAX发送至服务器验证。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">AJAX登录示例</title>
</head>
<body>
<form id="loginForm">
<input type="text" id="username" placeholder="用户名" required>
<input type="password" id="password" placeholder="密码" required>
<button type="submit">登录</


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