背景:上一篇[《【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、时代在前进,软件的开发也在完善。只要向前走,我们每个人都会变得越来越好!