侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Ajax中数据传递的另一种模式 javascript Object Notation思想(JSON)

前端  /  管理员 发布于 4年前   327

Ajax是“异步javascript和XML”的缩写已经众所周知,然而虽然XML是看上去的重要组成部分,它却不是必须的。一位资深的软件工程师Douglas Crock ford 开发了一个内建于 javascript 的数据格式,称为javascript 对象表示(JSON,javascript Object Notation),意思是直接使用Ajax对象来传递信息,可以读作“Jason”。
1. 什么是 JSON
JSON概念很简单,JSON 是一种轻量级的数据格式,他基于 javascript 语法的子集,即数组和对象表示。由于使用的是 javascript 语法,因此JSON 定义可以包含在javascript 文件中,对其的访问无需通过基于 XML 的语言来额外解析。不过在使用 JSON 之前,很重要的一点是理解 javascript 中数组及对象字面量的特殊语法。
1.1 数组字面量
数组字面量,是用一对方括号括起一组用逗号隔开的 javascript 值,例如:

复制代码 代码如下:

var aNames=["hello", 12, true , null];
[html]
1.2 对象字面量
对象字面量,是通过两个花括号来定义的。在花括号内可以放置任意数量的“名称-值”对,定义格 式字符串值”。除了最后一行外,每个“名称-值”对后必须有一个逗号(这与Perl 中的联合数组的定义有些类似)。例如:
[code]
var oCar = {
"color": "red",
"doors" : 4,
"paidFor" : true
};

1.3 混合字面量
我们可以混用对象和数组字面量,来创建一个对象数组,或一个包含数组的对象。例如:
复制代码 代码如下:

{comments:[
{
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
},
{
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
},
{
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
}
]};

1.4 JSON 语法
在Ajax应用中,就是服务器直接生成javascript语句,客户端获取后直接用eval方法来获得这个对象,这样就可以省去解析XML的性能损失。同时,在javascript 通信中使用JSON作为数据格式的好处很明星,可以立即获得数据的值,因此可以更快的访问其中包含的数据。
var oCarInfo = eval("(" + sJSON + ")");
请记住:在javascript中花括号也是一个语句。要让解析器知道这个花括号表示的是一个对象而非一个语句的唯一方法是能否找到封装它的圆括号(它是用来说明代码是一个表达式而非一个语句)。
1.5 JSON 编码和解码
作为 JSON 资源的一部分,Corockford 开发了一个能够实现 JSON 和Javascript 对象直接解码和编码的工具。这个工具的源程序可以在 www.crockford.com/JSON/json.js 中下载。
在上面提出用到eval() 存在些固有的不足:它是用来对传入的任何 Javascript 代码求值的,而不仅仅针对JSON。因此,当涉及企业级 web 应用程序开发时,它存在很大的安全隐患。为了解决这个问题,可以使用只用来将 JSON 代码转换为 Javascript 的解析器 JSON.parse() 方法来实现。例如:
var oObject = JSON.parse (sJSON);
同时,它也提供了一种将 Javascript 对象转换为 JSON 字符串(数据传输时使用的)的工具(在Javascript 中没有内建这种功能支持)。你要做的只是将对象传入到 JSON.Stringify() 方法。请看下面的例子:
复制代码 代码如下:

var oCar = new Object();
oCar.doors = 4;
oCar.color = "blue";
oCar.year = 1995;
oCar.drivers = new Array("Penny", "Dan" , "Kris");
document.write(JSON.stringify(oCar));

这段代码将输出如下所示的JSON 字符串:
{"doors" : 4, "color" : "blue", "year" :1995, "drivers" : ["Penny", "Dan" , "Kris"]}


2. JSON 与 XML
正如上面所说,JSON 与 XML 相比的一大优点就是它更加简单。
请看 XML 数据表示实例:
使用XML表示:
复制代码 代码如下:

<comments>
<comment>
<id>1</id>
<author>someone1</author>
<url>http://someone1.x2design.net</url>
<content>hello</content>
</comment>
<comment>
<id>2</id>
<author>someone2</author>
<url>http://someone2.x2design.net</url>
<content>someone1</content>
</comment>
<comment>
<id>3</id>
<author>someone3</author>
<url>http://someone3.x2design.net</url>
<content>hello</content>
</comment>
</comments>

使用JSON表示:
复制代码 代码如下:

{comments:[
{
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
},
{
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
},
{
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
}
]};

很容易发现,许多冗余的信息不见了。由于不需要有与开始标签(opening tag)匹配的结束标签(closing tag),因此传送相同的信息所需的字节数大大降低了。创始人 Corockford 将其称之为“XML 的减肥方案”)。
JSON 格式的数据与 XML 相比,缺点是对于外行人可读性更差。当然,有一种观点是,数据交换格式不是用肉眼观察的。如果是通过工具对来回传送的数据进行创建和解析,那么的确没有理由要求数据必须使人们易于阅读。问题的实质在于:存在可用的 JSON 工具。

3. 服务器端 JSON 工具
java :java JSON 工具,由Douglas Crock ford 开发,可在 www.crockford.com/JSON/java/
中下载,它可以在 JSP 中使用。

4. JSON 优势与缺点
JSON不仅减少了解析XML解析带来的性能问题和兼容性问题,而且对于javascript来说非常容易使用,可以方便的通过遍历数组以及访问对象属性来获取数据,其可读性也不错,基本具备了结构化数据的性质。不得不说是一个很好的办法,而且事实上google maps就没有采用XML传递数据,而是采用了JSON方案。

JSON 另外一个优势是跨域可行性,例如你在www.xxx.com的网页里使用是完全可行的,这就意味着你可以跨域传递信息。而使用XMLHttpRequest却获取不了跨域的信息,这是javascript内部的安全性质所限制的。

JSON看上去很美,是不是就能完全取代XML呢?事实并非如此,而原因就在于XML的优势:通用性。要使服务器端产生语法合格的javascript代码并不是很容易做到的,这主要发生在比较庞大的系统,服务器端和客户端有不同的开发人员。它们必须协商对象的格式,这很容易造成错误。

无论如何,JSON是一个诱人的技术,准备做一个大量的试用。希望届时可以获取大的性能提高。


  • 上一条:
    Ajax与JSON的一些学习总结
    下一条:
    perl哈希的一个实例分析
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客