首页 > web前端 > js教程 > 正文

Ajax与用户交互的JSON数据存储格式

韦小宝
发布: 2017-12-30 20:05:35
原创
1721人浏览过

数据存储是javascript的核心功能,适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易。这篇文章给大家介绍了ajax与用户交互的json数据存储格式,对ajax感兴趣的朋友一起看看ajax与用户交互的json数据存储格式吧

数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题。它并不是那种像页面滑动、幻灯片展示、淡入淡出等吸引人眼球的特效。适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易。JavaScript提供了各种不同的数据存储方式,它是一个从基本到未来走向的演化模式:

XML代表可扩展标记语言,是一种比较灵活的数据格式,很多应用程序存储数据都喜欢用到它,结构像HTML,也包含元素,标签以及属性,模型都一样。它的一大优势在于它是一种可扩展的格式,你并不会受制于某种预设的数据结构;并且它还符合DOM标准,使用AJAX调用获取到的数据就像解析HTML一样,通过相应的DOM方法和属性解析它:


<ingredient>
<prison>
<name>apple</name>
<color>red</color>
</prison>
<prison>
<name>tomato</name>
<color>red</color>
</prison>
<prison>
<name>peach</name>
<color>pink</color>
</prison>
<prison>
<name>pitaya</name>
<color>green</color>
</prison>
</ingredient>
登录后复制

但是XML的一个严重的缺陷在于它不能用于跨域名的Aiax调用,也就是说每一个Ajax调用的XML数据都必须和执行调用的脚本处于同一域名内,否则请求会失败。

HTML存储也相似,它与Ajax结合起来最简单。采用这种方式的数据格式的重要因素是速度,HTML代码段无需在客户端解析就能直接将其输出到DOM之中,所以我们不需要再额外的编写JavaScript代码解析HTML。


<ul>
<li><a href="boke.js">apple:red</a></li>
<li>tomato:red</li>
<li>peach:pink</li>
<li>piyata:green</li>
</ul>
登录后复制

说说它的缺点,它存储的数据可能和HTML代码混合在一起,所以说可维护性降低。另外在编写处理代码时,开发者可能需要在服务器端做一些精细的控制手段。

以下是使用JavaScript进行数据存储的手段,循序渐进…

变量

JavaScript最为基础的数据存储方式,它接受字符串、数值、布尔等。最核心的内容是它的作用域问题。

于变量相关的性能问题:

变量在声明完之后,就会被缓存到JavaScript文件中,于是在作用域内就可以反复的使用它们了,获取变量的开销微乎其微,只要数据的使用次数大于1,就应该将其存入变量。

数组

数组跟普通数组、关联数组和多维数组,它们都是元素列表,这种形式是各种数据存储中非常灵活的一种。掌握了数组最基本的形式,也会对其他复杂形式的运用大有脾益。数组元素的访问合一处是常见的基本交互代码。鉴于数组这种数据存储类型的重要性,JavaScript为数组交互操作提供了大量的专属方法:

.join() 方法 可以指定某个字符可作为数组内每个元素的连接符;slice() 方法可以输出数组中某个范围内的元素;shift()和unshift() 方法 分别用于在数组头部移除或新增元素;pop() 方法 用于移除并返回数组中的最后一个元素;concat() 方法 用于将多个数组拼接成一个数组,按参数的先后而定;sort()方法 可以按照字母表顺序或自定义顺序来排列数组的元素,但是只会根据首字符排序,一般都是错误的。

对象

Find JSON Path Online
Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

Find JSON Path Online 30
查看详情 Find JSON Path Online

在数据变得更加复杂、更加难以管理的情况下,我就会选择将数组转换为对象。因为对象的存储方式更加易读。


//对象数据存储
var meatball = {
bread:"wang",
meat :"li",
cheese : "zhang"
};
//返回对象的bread 
alert(meatball.bread);
登录后复制

对象对效率的影响

上面的代码只有一层,然而它是可以无限嵌套的。对象能更好的组织代码,提高模块化的程度。不过与此同时,还是需要考虑性能和可维护性的权衡问题,因为它需要寻找这三者中的一个。如果是运用面向对象编程技术,嵌套达到3层及以上,就会引发性能问题;但是在服务器端运用时就不是这样了,所以前端开发者要决定什么时候使用面向对象编程技术。

JSON

JSON是一种易于同jacascript 集成的数据格式,它通常是在用JavaScript调用外部服务器时使用的。JSON数据存放于独立的文件中,而且通常位于另一台完全不同的服务器上。它现在是最常见的一种调用API服务时所使用的数据格式,人们之所以选中它,是因为此格式非常易于阅读。起初,JSON格式是作为一种XML格式的替代方案而出现的,但很快它就在数据交换领域占据了主流的地位。它是一种轻量级的数据格式,易于通过远程Ajax调用进行跨域名访问。尽管JavaScript对JSON格式的解析提供了原生的支持,但它还是一种独立于平台的格式,客户端与服务器端在数据交换时都可以使用。

由于JSON格式具备跨域名访问的能力,所以为了防止一切恶意行为,我们务必只使用从可信的数据源中获取JSON。

这是一个 Salad.json 数据文件:


//ajax JSON Salad
var ingredient = {
"fruit":[
{
"name" : "apple",
"color" : "green"
},
{
"name" : "tomato",
"color" : "red"
},
{
"name" : "peach",
"color" : "pink"
},
{
"name" : "pitaya",
"color" : "white"
},
{
"name" : "lettuce",
"color" : "green"
}
]
};
登录后复制

JSON最常见的用途就是配合API调用,在于API为基础的网络程序开发环境中,使用何种后端语言进行开发,数据格式都无需改变。

以上所述是小编给大家介绍的Ajax与用户交互的JSON数据存储格式,希望对大家有所帮助!!

相关推荐:

原生JS写Ajax的请求函数功能的实例分享

全面总结基于jQuery中ajax的相关方法

Ajax应该如何使用

以上就是Ajax与用户交互的JSON数据存储格式的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号