java 传xml js_JavaScript实现的XML与JSON互转功能详解
本文实例讲述了JavaScript实现的XML与JSON互转功能。分享给大家供大家参考,具体如下:
这里来分享一个关于JavaScript实现XML与JSON互转例子,这里面介绍了国外的三款xml转json的例子,希望这些例子能给你带来帮助。
最近在开发在线XML编辑器,打算使用JSON做为中间格式。因为JSON相对于XML,有着容易阅读、解析速度快、占用空间小等优点,更易于在WEB上传递数据。但在实际使用中还是发现了一些易于忽略的细节,对于需要严格保证XML原始结构的情况,在转换成JSON时需要一些注意。
XML转换成JSON的格式大概如下:
XML形式
文章标题
章节标题
章节段落
JSON表现形式
{
"article": {
"header": {
"#text": "文章标题",
"@id": "h1"
},
"section": {
"@id": "s1",
"header": "章节标题",
"p": "章节段落"
}
}
}
用Js将XML转换成JSON的脚本,在网上找了一些现成的脚本,但大都只满足比较简单的情况,都不可以完成保证原始结构的互转。下面是从网上找到的一些脚本或者文章:
x2js : https://code.google.com/p/x2js/
jsonxml :http://davidwalsh.name/convert-xml-json
JKL.ParseXML :http://www.kawa.net/works/js/jkl/parsexml-e.html
x2js不会将下面的XML正确还原。
//XML形式
章节段落
而第2个脚本jsonxml,在上面这种“文本混合标签”的情况下,没有将标签提取出来,而是转换成了下面这种格式。
{"p":"章节段落"}}
之后我做了些改动,将它解析成如下格式后,满足了“文本混合标签”可正确还原的情况。
{"p":[{"strong":"章节"},"段",{"em":"落"}]}
另外,形如下面的代码,使用上文提到的脚本进行转换,也会导致无法正确还原的情况。
第一节
标题
第二节
同样,在一个标签内,它的子标签出现了大于一次,如果需要记录数据的路径,应该使用数组来保存这个结构。正确的代码应该是:
{
"article": [ {
"section": {
"#text": "第一节",
"@id": "s1"
},
}, {
"header": {
"#text": "标题",
"@id": "h1"
}
}, {
"section": {
"#text": "第一节",
"@id": "s2"
}
}
]
}
jkl.parsexml
10036
NY
New York
Broadway
SAMPLE SCRIPT:
var url = "zip-e.xml";
var xml = new JKL.ParseXML( url );
var data = xml.parse();
document.write( data["items"]["item"]["us_state"] );
document.write( data.items.item.us_state );
// -->
OUTPUT JSON:
{
items: {
item: {
zip_cd: "1000001"
us_state: "NY",
us_city: "New York",
us_dist: "Broadway",
}
}
};
jsonxml
// Changes XML to JSON
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for(var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof(obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof(obj[nodeName].push) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
};
The major change I needed to implement was using attributes.item(j) instead of the attributes[j] that most of the scripts I found used. With this function, XML that looks like:
...becomes workable a JavaScript object with the following structure:
{
"@attributes": {
AID: "=",
HOME: 0,
URL: "davidwalsh.name/",
VER: "0.9",
},
SD = [
{
"@attributes": {
FLAGS: "",
HOST: "davidwalsh.name",
TITLE: A
},
LINKSIN: {
"@attributes": {
NUM: 1102
}
},
SPEED: {
"@attributes": {
PCT: 51,
TEXT: 1421
}
},
TITLE: {
"@attributes": {
TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else",
}
},
},
{
POPULARITY: {
"@attributes": {
TEXT: 7131,
URL: "davidwalsh.name/"
}
},
RANK: {
"@attributes": {
DELTA: "-1648"
}
},
REACH: {
"@attributes": {
RANK = 5952
}
}
}
]
}
说了半天下面整理了一个例子
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for (var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof (obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof (obj[nodeName].length) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
};
PS:这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用:
希望本文所述对大家JavaScript程序设计有所帮助。
java 传xml js_JavaScript实现的XML与JSON互转功能详解相关推荐
- JAVA中的适配器应用_Java适配器模式应用之电源适配器功能详解
本文实例讲述了Java适配器模式应用之电源适配器功能.分享给大家供大家参考,具体如下: 一.模式定义 存在两种适配器模式 1 对象适配器模式,在这种适配器模式中,适配器容纳一个它包裹的类对象的物理实体 ...
- java手机模式_Java使用建造者模式实现办理手机套餐功能详解
本文实例讲述了Java使用建造者模式实现办理手机套餐功能.分享给大家供大家参考,具体如下: 一.模式定义 建造者简单理解就是造东西,只不过建造者模式建造的不是一个简单的东西,是一个比较复杂的东西. 二 ...
- Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验
Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...
- java调用webservice_笃学私教:Java开发网站架构演变过程-从单体应用到微服务架构详解...
原标题:笃学私教:Java开发网站架构演变过程-从单体应用到微服务架构详解 Java开发网站架构演变过程,到目前为止,大致分为5个阶段,分别为单体架构.集群架构.分布式架构.SOA架构和微服务架构.下 ...
- java 8 新功能详解_Java 8和Java 14之间的新功能
java 8 新功能详解 从版本9开始,Java每6个月就有一次新功能,因此很难跟踪这些新更改. 互联网上的大多数信息都描述了最近2个Java版本之间的变化. 但是,如果您的情况与我相似,则说明您使用 ...
- java 8 新功能详解_Java 8的8个新功能
java 8 新功能详解 注意:确保还检查了我们的详细教程Java 8 Features – ULTIMATE Guide . Jdk 1.8(又名Java 8)今天发布,这意味着它的通用发布版本已经 ...
- Java中常见RuntimeException与其他异常表及Exception逻辑关系详解
Java中常见RuntimeException与其他异常表及Exception逻辑关系详解 前言 常见`RuntimeException` 其他错误类型 `Error`类 `Exception`类 E ...
- java中北大学ppt总结+课后习题第四章(小宇特详解)
java中北大学ppt总结+课后习题第四章(小宇特详解) 继承 子类与父类 继承是根据现有类创建新的类的机制,由继承而得到的新类称为子类(subclass)或派生类(derived class),被继 ...
- Java调用SMSLib用单口短信猫发送短信详解
技术园地 当前位置:短信猫网站主页 > 技术园地 > [转载]Java调用SMSLib用单口短信猫发送短信详解 发布时间:2017/02/09 点击量:620 SMSLib是Apache的 ...
最新文章
- TVM图优化与算子融合
- 996 成福报?拼多多个别部门让员工在 “11-11-6” 和 996 中二选一
- 在shell脚本中没有换行符的#39;echo#39;
- 洛谷 P3157 [CQOI2011]动态逆序对 | CDQ分治
- pyqt5设置dialog的标题_PyQt5快速上手基础篇7-弹出dialog
- 阿里云助力1药网开辟疫情防控“第二战场”
- 新手程序员如何找一个靠谱的公司
- django 1.8 官方文档翻译: 3-5-1 使用Django输出CSV
- java-Hyper-V
- -bash: ifconfig: 未找到命令
- Android ~ 国际化(多语言)
- 背包问题九讲笔记_01背包
- Python抖音视频去水印,并打包成exe可执行文件
- python生成的词云没有图案_python词云(词云图生成器)
- 微博相册下载助手v7.2 微博图片批量下载神器
- 050 XSS通关小游戏——xss challenge
- 网易免费邮箱 - 中国第一大电子邮件服务商
- 计算机西方经济学试题,西方经济学的习题与答案
- 基于TI AM5728(浮点双DSP C66x +双ARM Cortex-A15)的开发板
- ThinkPad E420升级改造过程