AJAX实现JSON与XML数据交换方法详解：超详细实战步骤一看就会

文章目录▼CloseOpen

• 先搞懂AJAX和JSON/XML的基础逻辑——别再被概念绕晕
• AJAX+JSON：从请求到解析的全流程实战——照着做就不会错
• AJAX+XML：容易被忽略的细节和避坑技巧——别让旧接口难住你
  • 用AJAX发JSON请求为啥报400 Bad Request？
  • JSON.parse解析响应时提示“Unexpected token o in JSON at position 1”是怎么回事？
  • 解析XML响应时responseXML是null怎么办？
  • AJAX发POST请求传JSON，服务器收不到数据是哪里错了？
  • 处理XML响应时节点内容有空格怎么去掉？

我们不讲空泛的原理，直接把AJAX实现JSON与XML数据交换的全流程拆成“能跟着做”的实战步骤：从AJAX的基础配置（比如如何用XMLHttpRequest对象发请求、设置请求头）讲起，再分别针对JSON（如何构造JSON请求体、用JSON.parse解析响应）和XML（如何遍历responseXML节点、提取节点内容），一步步演示具体操作，每一步都配真实代码示例。哪怕你是刚入门的新手，跟着步骤“照做”也能完成数据交互；就算遇到常见坑（比如跨域、解析错误），我们也会告诉你排查方法。

读完这篇，你不用再对着“AJAX处理JSON/XML”的问题查半天资料——直接上手解决项目里的真实需求，真正做到“一看就会，会了能用”。

你有没有过这种情况？刚学前端没几天，想做个登录功能，用AJAX发请求结果控制台报“400 Bad Request”；或者服务器返回了数据，用JSON.parse解析时又蹦出“Unexpected token o in JSON at position 1”？别慌，这些都是我刚入行时踩过的坑——其实不是你笨，是没人把“AJAX怎么和JSON/XML配合”的逻辑掰碎了讲。今天我就把这几年做开发攒的“实战说明书”掏出来，从基础逻辑到具体代码，一步一步教你搞定AJAX和JSON/XML的数据交换，保证你看完就能上手写代码。

先搞懂AJAX和JSON/XML的基础逻辑——别再被概念绕晕

其实AJAX这玩意儿真没那么玄乎，说白了就是浏览器和服务器“偷偷传数据的工具”。你平时刷淘宝点“加入购物车”不用刷新页面，购物车数量直接变了；或者在知乎看回答下拉加载更多，这些都是AJAX在干活——它能让浏览器在不刷新页面的情况下，悄悄和服务器交换数据，再更新页面内容。

那JSON和XML又是啥？其实就是服务器给浏览器传数据的“包裹格式”。比如你让服务器给你传一个用户信息，JSON会裹成{"name":"张三","age":25}——像咱们平时用的字典，键是“name”，值是“张三”，一眼就能看懂；而XML会裹成张三25——用标签把内容包起来，像写小作文似的。我去年带的实习生小宇，一开始把JSON写成了字符串，结果服务器返回400错误，后来我让他加了一行“告诉服务器这是JSON”的代码，立马就好了——你看，不是他不会写，是没搞懂“包裹格式”的规矩。

再给你补个关键知识点：AJAX的核心是XMLHttpRequest对象（简称xhr），所有操作都得靠它。比如你要发请求，先创建xhr对象：var xhr = new XMLHttpRequest();——这步很简单，但我见过有人写成var xhr = new XMLHttpRequest;（少了括号），结果报错半天找不到原因，你可别犯这低级错误。

为了让你更清楚JSON和XML的区别，我做了个对比表格——你不用纠结选哪个，现在大部分项目用JSON，因为它小、快、好解析；但有些老系统（比如银行接口）还在用XML，所以俩都得会：

格式类型	语法特点	解析难度	常见使用场景
JSON	键值对结构，语法简洁，支持数组/对象嵌套	低（浏览器原生支持JSON.parse）	前端与后端交互、移动端API接口
XML	标签嵌套结构，语法严谨，需闭合标签	中（需遍历XML节点，处理命名空间）	企业级数据交换、旧系统接口兼容

AJAX+JSON：从请求到解析的全流程实战——照着做就不会错

接下来咱们干正事——用AJAX发JSON请求，再解析返回的JSON数据。我拿“用户登录”这个最常见的场景举例子，你跟着步骤写，保证能成。

• 第一步：创建XMLHttpRequest对象（xhr）

这是AJAX的“入口”，所有操作都得靠这个对象。代码超简单：

var xhr = new XMLHttpRequest();

别嫌这步基础——我见过有人写成var xhr = new XMLHttpRequest;（少了括号），结果报错半小时找不到原因，你可别犯这低级错误。

• 第二步：配置请求参数（open方法）

用open方法告诉xhr“你要发什么请求、发给谁、要不要异步”。参数顺序是：请求方式（GET/POST）、请求地址（url）、是否异步（async）。

比如登录请求要用POST（因为要传敏感信息，GET会把参数放url里，不安全），所以代码是：

xhr.open('POST', '/api/login', true);

这里的/api/login是服务器的接口地址，你换成自己项目的就行；true表示异步——异步不会卡页面，用户点完登录还能继续逛页面，比同步友好多了。

• 第三步：设置请求头——90%的人栽在这步

这是关键中的关键！你要发JSON数据，得明确告诉服务器“我发的是JSON”，不然服务器会当成普通字符串处理。用setRequestHeader方法：

xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

记住，Content-Type一定要设成application/json，后面加charset=utf-8是防止中文乱码。我去年帮朋友的电商项目调接口，他没加这行，结果服务器收到的密码是乱码，登录一直失败——加了这行代码，立马就好了。

• 第四步：发送请求（send方法）

用send方法把数据发出去，但注意：send只能发字符串或FormData，所以得把JSON对象转成字符串！

比如你要发的用户信息是：

var user = { username: 'admin', password: '123456' };

那send的时候得写成：

xhr.send(JSON.stringify(user)); JSON.stringify是把JSON对象转成字符串——要是直接发user，会变成“[object Object]”，服务器根本不认。

• 第五步：处理响应——拿到数据并解析

AJAX是异步的，得等服务器返回数据后再处理。这步要监听onreadystatechange事件，它会跟踪请求的状态（readyState）和结果（status）。

• readyState：0=未初始化，1=已打开，2=已发送，3=正在接收，4=完成（只有4的时候才能处理数据）；
• status：HTTP状态码，200=成功，400=请求错误，404=找不到接口，500=服务器内部错误。

直接上代码（结合登录场景）：

xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) { // 请求完成
 if (xhr.status === 200) { // 成功
 try {
 // 解析JSON数据（把字符串转成对象）
 var res = JSON.parse(xhr.responseText);
 // 根据返回的code判断登录结果
 if (res.code === 200) {
 alert('登录成功！');
 window.location.href = 'https://www.mayiym.com/home'; // 跳转到首页
 } else {
 alert('登录失败：' + res.message); // 提示错误原因
 }
 } catch (e) {
 alert('服务器返回数据格式错了：' + e.message); // 防止JSON格式错误崩溃
 }
 } else {
 alert('请求失败，状态码：' + xhr.status); // 处理404、500等错误
 }
 }
};

这里有两个细节要注意：

写完代码别着急上线，先打开Chrome的开发者工具（F12），点Network标签，然后触发请求（比如点登录按钮）。你能看到：

有问题直接在这里调，比瞎猜高效10倍——我见过很多人写完代码不测试，上线后用户反馈登录不了才急着查错，这多影响体验啊。

AJAX+XML：容易被忽略的细节和避坑技巧——别让旧接口难住你

虽然现在JSON用得多，但有些老项目（比如政府、银行系统）还在用XML。其实AJAX+XML的步骤和JSON差不多，但有几个细节得注意，不然你会踩坑。

和JSON相比，发送XML请求只有两点不同：

 var xml = 'admin123456';
 xhr.send(xml);
 
解析XML响应——别用responseText！
XML的响应不是用responseText，而是用responseXML——它是一个XML文档对象，你可以用DOM方法（比如getElementsByTagName）遍历节点。 
比如服务器返回的XML是： 

xml

200

登录成功

admin

管理员

解析代码是： 

javascript

var xmlDoc = xhr.responseXML; // 拿到XML文档对象

var code = xmlDoc.getElementsByTagName(‘code’)[0].textContent; // 取code的值

var nickname = xmlDoc.getElementsByTagName(‘nickname’)[0].textContent; // 取nickname的值

这里有个致命坑：如果服务器返回的

Content-Type不是application/xml或text/xml，responseXML会是null！我之前帮一个企业做官网，他们的服务器返回text/plain，结果我拿responseXML一直是null——让后端改成application/xml，立马就好了。

200 ，这时候textContent会包含空格，得用trim()去掉：

var code = xmlDoc.getElementsByTagName(‘code’)[0].textContent.trim();

200），getElementsByTagName不好使，得用getElementsByTagNameNS：

var code = xmlDoc.getElementsByTagNameNS(‘http://www.example.com/ns’, ‘code’)[0].textContent;

不过一般项目里很少用命名空间，你知道有这么回事就行。

你要是按这些步骤试了，遇到问题可以在评论区问我，我帮你看看；要是成功了，也来报个喜，让我沾沾你的喜气～毕竟看着新手从“报错到搞定”，比我自己写代码还开心呢～

用AJAX发JSON请求为啥报400 Bad Request？

最常见的原因有两个：一是没告诉服务器“我发的是JSON”，也就是没设置请求头Content-Type为application/json; charset=utf-8，服务器收到数据不知道怎么解析；二是发送的时候没把JSON对象转成字符串，直接发了对象（比如用xhr.send(user)而不是xhr.send(JSON.stringify(user))），服务器拿到的是“[object Object]”这种无效内容，自然就报错了。我之前帮朋友调电商项目接口时也遇到过，加了请求头和JSON.stringify之后，立马就好了。

JSON.parse解析响应时提示“Unexpected token o in JSON at position 1”是怎么回事？

大概率是你解析的不是合法JSON字符串！比如服务器返回的响应已经是JSON对象（很少见，但有的后端会直接返回对象），或者你不小心把xhr.responseText写成了xhr.response（有些老版本浏览器里response是对象）；还有可能是服务器返回的JSON格式有误（比如多了个逗号、少了引号）。这时候你可以打开Chrome开发者工具的Network标签，看Response里的内容是不是合法JSON——要是格式错了找后端改，要是没转字符串，就把JSON.parse(xhr.response)改成JSON.parse(xhr.responseText)试试，我刚入行时踩过这个坑，改完就解决了。

解析XML响应时responseXML是null怎么办？

这几乎都是服务器的Content-Type设置错了！AJAX的responseXML只有在服务器返回的Content-Type是application/xml或text/xml时，才会生成XML文档对象；如果服务器返回的是text/plain或者其他类型，responseXML就会是null。你可以先打开开发者工具看Response Headers里的Content-Type是不是对的——要是不对，让后端改成application/xml；要是后端没法改，也可以用DOMParser把responseText转成XML文档，但一般还是让后端改更方便，我去年帮企业项目调接口时就遇到过这个问题，改完Content-Type立马就好了。

AJAX发POST请求传JSON，服务器收不到数据是哪里错了？

先检查三个关键步骤：第一，有没有设置请求头Content-Type: application/json; charset=utf-8——没这行，服务器根本不知道你发的是JSON；第二，发送的数据是不是用JSON.stringify转成了字符串——直接发对象肯定不行；第三，是不是用了POST请求方式——要是用GET，参数得拼在url里，但GET不适合传敏感信息（比如密码），而且数据量有限。我带实习生时，他就是没转字符串，结果服务器一直收不到密码，改了之后立马就通了。

处理XML响应时节点内容有空格怎么去掉？

用trim()方法就行！比如你用getElementsByTagName拿到节点后，把textContent后面加个.trim()，像这样：xmlDoc.getElementsByTagName('nickname')[0].textContent.trim()——这样就能把节点里的空格、换行符都去掉了。我之前做政府项目接口时，服务器返回的XML节点里总带多余空格，加了trim()之后就正常了，简单又好用。