XML的代替者----JSON


Posted in Javascript onJuly 21, 2007

我个人觉得PHP与Javascript各有长处,如果能完美的结合起来,那将创造出许许多多的奇迹! 我是初次写此类文章,Bug难免,请各位指正~ 
    现在AJAX应用非常流行,而在AJAX中客户端Javascript和服务端动态脚本的通信是关键。如果传输的信息比较简单,通常我们会直接采用字符串的方式,如果信息结构复杂一点,则通常用XML文档。XML文档虽然应用广泛,但是用php生成和用Javascript处理却不是一件很容易的事情。这里我推荐一种XML文档的比较好简化替代方案:JSON! 
    首先我们来了解一下Javascript的基础知识。 
    1.创建数组,可以用JS内建的类Array来初始化,也可以用JSON符号"[]"。下面通过两种方式创建的arr1和arr2的实质是一样的: 

var arr1 = new Array(); 
arr1[0] = "apple"; 
arr1[1] = "google"; 
arr1[2] = "longbill"; 

var arr2 = ["apple","google","longbill"];
注意,数组的索引也可以是字符串,如 arr1["name"] = "longbill"; 这时的数组就相当于对象了。。。 
    2.创建对象,可以用JS内建的类Object来初始化,也可以用JSON符号"{}"。下面通过两种方式创建的obj1和ob2的实质也是一样的: 

var obj1 = new Object(); 
obj1.name = "longbill"; 
obj1.age = 18; 

var obj2 = { name:"longbill",age:18 };
注意,这里"{"和"}"之间必须写成"键:值"的形式,而且不同的"键:值"之间要用","分割。 "键"中也可以包含空格等特殊字符,此时要用""(引号)来引用,如 "phone number":123456 
    其实在JS中,数组的本质是一个对象,对象本身也是一个数组。所以, obj1.name 和 obj1["name"] 是同一个引用。 
    我们还可以通过JSON符号的嵌套来定义复杂的S对象: 

var people = [ 
    { 
        name:"longbill", 
        age:18 
    }, 
    { 
        name:"neal", 
        age:19 
    }, 
    { 
        name:"glocklee", 
        age:17 
    } 
];
//这个应该看的懂吧~~ 
大部分XML文档都可以用JSON来表达: 

<?xml version="1.0"?> 
<root> 
  <book> 
    <name>Ju love</name> 
    <price>$15</price> 
  </book> 
  <book> 
    <name>Javascrip</name> 
    <price>$25</price> 
  </book> 
</root>

如果用JSON就可以表达为: 


root: 

  { 
     name:"Ju love", 
     price:"$15" 
  }, 
  { 
     name:"Javascript", 
     price:"$25" 
  } 
]}

是不是简化很多? 

    而且客户端JS处理起来也很简单,只要用执行字符串函数 "eval" 就可以将JSON信息提取出来,而如果是XML文档,那就不的不用大量的标准DOM操作来提取其中的数据。如: 

//已经用AJAX从服务端下载了一个JSON文件(字符串),保存在变量 json 里 
eval("var myvar = "+json); 
//这样,JSON里的信息就表达在myvar这个变量里了。
缺点:一旦JSON的格式错误,将导致服务端JS系统错误,甚至崩溃。 
   解决办法: 
   最好在eval之前使用try(试探执行),如 

//已经用AJAX从服务端下载了一个JSON文件(字符串),保存在变量 json 里 
try { 
    eval("var myvar = "+json); 
} catch(e) { alert('json syntax error!'); } 
//这样,即使JSON格式错误,也只会弹出一个提示框,而不会抛出一个脚本错误!

Javascript 相关文章推荐
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
js实现简单的验证码
Dec 25 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
js右键菜单效果代码
Jul 21 #Javascript
$()JS小技巧
Jul 21 #Javascript
IE 缓存策略的BUG的解决方法
Jul 21 #Javascript
用JS实现的一个include函数
Jul 21 #Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 #Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 #Javascript
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
You might like
php实现利用phpexcel导出数据
2013/08/24 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
js微信分享实现代码
2020/10/11 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python字符串Intern机制详解
2019/07/01 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
培训计划通知
2015/07/15 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Vue实现动态查询规则生成组件
2021/05/27 Vue.js