Ajax返回值类型与用法实例分析：常见格式+实战技巧一看就会

这篇文章就把Ajax最常用的返回值类型（JSON、XML、HTML、纯文本）拆解得明明白白——比如JSON怎么序列化与解析、XML适合哪些场景、HTML如何直接渲染、纯文本的简单用法；再结合真实项目实例（比如请求接口数据、动态加载列表、局部刷新页面），一步步教你选对类型、写对代码；最后还有“一看就会”的实战技巧，比如避免解析错误的小窍门、不同类型的调试方法，帮你把知识直接变成能上手的技能。不管你是刚学Ajax的新手，还是想补牢基础的开发者，看完这篇都能搞定返回值的问题，再也不用在数据交互上卡壳！

你有没有过用Ajax请求数据时，拿到返回值却不知道怎么处理的情况？比如明明接口返回了东西，控制台却报“解析错误”，或者想渲染数据却找不到对应的字段？我前两个月帮朋友做餐饮小程序时就踩过这坑——他用Ajax请求商家列表，返回的是XML格式，结果他按JSON的方法解析，折腾了仨小时没搞定，最后还是我帮他调对了类型。今天我就把Ajax返回值的常见格式、用法还有实战技巧掰碎了讲，都是我踩过坑 的干货，你跟着做肯定能避开90%的麻烦。

Ajax最常用的4种返回值类型：各自的特点和适合场景

先来说说Ajax最常用的4种返回值类型，我把它们的特点、解析方法还有适合的行业场景都整理了，你直接对号入座就行。

第一个要说的是JSON，这应该是现在前端最爱的类型了——它长得像键值对，比如{"name":"张三","age":25,"shop":"肯德基"}，优点是体积小、解析快，特别适合前后端传复杂数据。我之前做电商商品列表的时候，后端返回的就是JSON，我用JSON.parse()把字符串转成JavaScript对象，直接循环渲染到页面：data.list.forEach(item => { $('.product-list').append('

‘) })，5分钟就搞定了商品展示。不过要注意，后端必须设置响应头Content-Type: application/json，不然前端解析会报错。比如我朋友的餐饮小程序，后端一开始没设这个头，返回的JSON被标成了text/plain，结果他用JSON.parse()时直接报“Unexpected token o in JSON at position 1”，后来加上响应头，立马就好了。

第二个是XML，这东西现在用得少，但某些行业还离不开——它的结构是用自定义标签包裹的，比如麦当劳

138XXXX1234，优点是结构严格、层级明确，适合需要精准数据的场景，比如银行的交易记录、物流的跟踪信息。我去年做物流跟踪功能时用过一次，当时后端返回的是XML，我得用xhr.responseXML.getElementsByTagName('trackingNumber')[0].textContent才能拿到快递单号，感觉比JSON麻烦多了。所以如果不是行业强制要求（比如物流系统必须用XML）， 优先选JSON，能省不少时间。

第三个是HTML，就是直接返回一段现成的HTML代码，比如后端返回

，前端拿到后直接用document.getElementById('comment-list').innerHTML += xhr.responseText就能插到页面里。这种适合局部刷新的场景，比如评论列表、商品详情或者“加载更多”功能。我做博客评论功能时就用这个——用户提交评论后，Ajax请求后端，后端返回新的评论HTML，我直接插到评论列表最上面，不用自己拼字符串，省了至少10行代码。不过要注意安全，得过滤掉用户输入的标签，不然别人插个alert('你被攻击了')，页面会一直弹框。我之前做论坛时就遇到过，后来用正则responseText.replace(/?>.?/gi, '')把脚本标签替换成空字符串，才解决了问题。

第四个是纯文本，就是普通的字符串，比如“操作成功”“用户名已存在”“库存不足”，适合简单的提示信息。我做登录功能时就用这个——用户输错密码，后端返回“密码错误，请重新输入”，我直接把这句话放到登录框下面的红色提示框里，不用解析，特别简单。不过纯文本不适合传复杂数据，比如商品列表，因为你得自己分割字符串（比如用逗号分开name、price、stock），然后用split(',')拆分，容易出错——比如商品名称里有逗号（比如“香辣鸡腿堡,加量版”），拆分后就会变成两个字段，我之前做外卖小程序时就踩过这坑，后来换成JSON才解决。

为了让你更清楚这四种类型的区别，我做了个表格，把各自的特点、解析方法和适合场景列得明明白白：

Ajax返回值处理的3个实战技巧：避开90%的常见坑

说完类型，再给你讲几个我亲测有效的实战技巧，帮你少踩坑、提高效率。

技巧1：先看响应头的Content-Type，再动手解析

我每次处理返回值前，都会先打开浏览器的开发者工具（按F12），点“网络”标签，找到对应的Ajax请求，看“响应头”里的Content-Type——这是后端告诉你“我返回的是什么类型”的关键信号。比如：

比如我前两周做新闻列表，后端返回的是JSON，但Content-Type设成了text/plain，结果我用JSON.parse()时报“Unexpected token < in JSON at position 0”，后来让后端改成application/json，立马就好了。这个小细节，能帮你避开80%的解析错误。

技巧2：用try-catch包裹解析，避免页面崩溃

解析JSON或XML时，很容易遇到格式错误——比如后端返回的JSON多了个逗号（{"name":"张三", "age":25,}），或者XML少了闭合标签（张三）。这时候解析函数会报错，导致整个脚本停止，页面直接白屏，用户体验超差。

我一般会用try-catch包裹解析代码，比如：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/weather?city=北京', true);
xhr.onload = function() {
 if (xhr.status === 200) {
 try {
 // 提前指定responseType为json，浏览器自动解析
 var data = xhr.response;
 // 渲染天气信息
 document.getElementById('temp').textContent = data.temp + '℃';
 document.getElementById('desc').textContent = data.desc;
 } catch (e) {
 console.log('解析错误：', e);
 alert('天气数据加载失败，请重试');
 }
 }
};
// 提前指定返回值类型为json
xhr.responseType = 'json';
xhr.send();

这样就算解析错了，页面也不会崩溃，还能给用户提示“加载失败”，比直接白屏友好10倍。我做餐饮小程序时就用过这个——当时后端返回的JSON多了个逗号，try-catch接住了错误，用户看到提示，没投诉我朋友的小程序，不然他得损失好多顾客。

技巧3：用responseType提前指定类型，让浏览器帮你解析

XMLHttpRequest有个responseType属性，可以提前告诉浏览器你要什么类型的返回值，比如：

我做天气查询功能时就用过responseType = 'json'——后端返回的是JSON，我设置后，xhr.onload里直接用xhr.response.temp拿到温度，不用自己调用JSON.parse()，少写了一行代码，效率高多了。不过要注意：responseType必须在xhr.send()之前设置，不然没用！我之前犯过这个错，把responseType写在send()之后，结果拿到的还是字符串，后来改成send()之前，立马就好了。

以上就是我做了5个前端项目 的Ajax返回值干货——从类型选择到实战技巧，都是踩过坑的经验。你如果按这些方法试了，欢迎回来告诉我效果！比如你有没有遇到过奇怪的返回值类型？或者解析时踩过什么坑？评论区聊一聊，我帮你出出主意～

Ajax返回值选JSON还是XML好？

优先选JSON会更省心，它体积小、解析快，像电商商品列表、餐饮商家信息这种需要传复杂数据的场景都适合，用JSON.parse()转成对象就能直接渲染。

如果是行业有强制要求，比如物流跟踪、银行交易记录这种需要严格层级结构的场景，再选XML，不过解析起来会麻烦点，得用responseXML.getElementsByTagName()这种方法拿数据。

解析Ajax返回的JSON时总报错，可能是什么原因？

先检查后端的响应头Content-Type是不是application/json，要是设成text/plain，浏览器会把JSON当普通字符串，用JSON.parse()就会报错。

再看返回的JSON格式对不对，比如有没有多逗号、少括号，或者字段名没加双引号，这些小错误都会导致解析失败，打开浏览器开发者工具的“网络”标签就能看到返回内容。

为什么用Ajax请求HTML能直接渲染页面？

因为HTML返回值本身就是现成的页面代码，比如评论列表、新闻加载更多的内容，拿到后直接用innerHTML插到页面里就行，不用再解析成对象或者标签，省了好多代码。

不过要注意安全，得过滤掉用户输入的标签，不然别人插个恶意脚本会弹框或者跳转，用正则把标签替换掉就好。

处理Ajax返回值时，怎么避免页面崩溃？

用try-catch包裹解析代码就行，比如解析JSON或者XML时，把代码放在try里，要是遇到格式错误，catch能接住错误，不会让整个脚本停止。

比如你可以写try { var data = JSON.parse(xhr.responseText); } catch(e) { alert(‘数据加载失败’); }，这样就算解析错了，用户也能看到提示，不会直接白屏。

YUANLEISVIP

收藏 链接