🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
背景:上一篇[《【JavaScript】(5)——JavaScript与cookie、XML交互》](http://blog.csdn.net/helijie92902/article/details/50187647)见识了JavaScript的强大,感觉如何,要是感觉神奇的话,那么接下来的展示更会让你觉得它简直不可思议。本篇介绍JavaScript与XPath、JSON的交互,Are you ready? ### 一、JavaScript与XPath XPath即为 XML Path Language(XML路径语言),它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言。XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力。 起初 XPath 的提出的初衷是将其作为一个通用的、介于XPointer与XSLT间的语法模型。但是 XPath 很快的被开发者采用来当作小型查询语言。 XPath语法: ![](https://box.kancloud.cn/2016-03-28_56f8f89f8e4b3.jpg) XPath跨浏览器兼容 ~~~ //跨浏览器获取单一节点 function selectSingleNode(xmlDom, xpath) { var node = null; if (typeof xmlDom.evaluate != 'undefined') { var patten = /\[(\d+)\]/g; var flag = xpath.match(patten); var num = 0; if (flag !== null) { num = parseInt(RegExp.$1) + 1; xpath = xpath.replace(patten, '[' + num + ']'); } var result = xmlDom.evaluate(xpath, xmlDom, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); if (result !== null) { node = result.singleNodeValue; } } else if (typeof xmlDom.selectSingleNode != 'undefined') { node = xmlDom.selectSingleNode(xpath); } return node; } //跨浏览器获取节点集合 function selectNodes(xmlDom,xpath){ var nodes=[]; if(typeof xmlDom.evaluate!='undefined'){ var patten=/\[(\d+)\]/g; var flag=xpath.match(patten); var num=0; if(flag!==null){ num=parseInt(RegExp.$1)+1; xpath=xpath.replace(patten,'['+num+']'); } var node=null; var result=xmlDom.evaluate('root/user',xmlDom,null, XPathResult.ORDERED_NODE_ITERATOR_TYPE,null); if(result!==null){ while((node=result.iterateNext())!==null){ nodes.push(node); } } }else if(typeof xmlDom.selectNodes!='undefined'){ nodes=xmlDom.selectNodes(xpath); } return nodes; } ~~~ ### 二、JavaScript与JSON 前面我们探讨了XML的结构化数据,但开发人员还是觉得这种微型的数据结构还是过于烦琐、冗长。为了解决这个问题,JSON的结构化数据出现了。JSON是JavaScript的一个严格的子集,利用JavaScript中的一些模式来表示结构化数据。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript。它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式。这表示可以使用responseText从服务器中检索JSON数据,然后再使用JavaScript的eval()方法将JSON字符串转换成JavaScript对象,那么,使用附加JavaScript就可以很地从该对象中提取数据,而不需要处理DOM。 另外,也有针对大部分编程语言(包括C++,C#,ColdFusion、Java、Perl、PHP和Python)的JSON库,这些库能将上述语言格式化数据转换成JSON格式。 早期JSON字符串解析为JavaScript原生值,早期采用的是eval()函数。但这种方法既不安全,可能会执行一些恶意代码。 ~~~ var box='[{"name":"a","age":1},{"name":"b","age":2}]'; alert(box); //JSON字符串 ~~~ ![](https://box.kancloud.cn/2016-03-28_56f8f89fa979d.jpg) ~~~ var json=eval(box); //使用eval()函数解析 alert(json); //得到JavaScript原生 ~~~ ![](https://box.kancloud.cn/2016-03-28_56f8f89fbad83.jpg) JSON对象提供了两个方法,一个是将原生JavaScript值转换为JSON字符串: stringify(); 另一个是将JSON字符串转换为JavaScript原生值: parse()。 ~~~ var box = '[{"name": "a","age": 1},{"name" : "b","age" : 2}]'; var json = JSON.parse(box, function(key,value) { if (key == 'name') { return'Mr.' + value; } else { return value; } }); alert(json[0].name); ~~~ ![](https://box.kancloud.cn/2016-03-28_56f8f89fd1cc2.jpg) ~~~ <span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>var box=[{name:'a',age:1,height:177},{name:'b',age:2,height:188}]; var json=JSON.stringify(box,function(key,value){ switch(key){ case'name': return'Mr.'+value; case'age': return value+'岁'; default: return value; } },4); alert(json);</strong></span> ~~~ ![](https://box.kancloud.cn/2016-03-28_56f8f89fe2629.jpg) ### 三、学习心得 1、不同的浏览器对代码的要求不同,要想“八面玲珑”,就必须要兼容。兼容一直都是这个时代的主题。 2、即使自己不是一种软件开发语言,也能很好的为其他开发语言服务。天生我才必有用。 3、时代在前进,软件的开发也在完善。只要向前走,我们每个人都会变得越来越好!