当前位置: 首页 > 编程笔记 >

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

裘丰
2023-03-14
本文向大家介绍Ajax与用户交互的JSON数据存储格式,包括了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()方法 可以按照字母表顺序或自定义顺序来排列数组的元素,但是只会根据首字符排序,一般都是错误的。

对象

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

//对象数据存储
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数据存储格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 这个剧本 }); 正在引起通信路由的错误 /updatechat 但是如果在前一段代码中,我替换为 这个"var=request.form['var']"表单在我的代码中的几个不同的路由上工作

  • 我有很多相同类的实例。现在这些对象可以被链接并且这个链接可以有一个权重。就像在无向图中一样。现在我想在我的mysql数据库中存储每两个对象之间的关系。 数据如下所示 我可以创建一个具有以下结构的表: 但是在搜索两个对象之间的权重时,我不知道哪个是和哪个是。所以我需要写两个查询。此外,如果我想添加权重,并且想首先检查它是否已经在我的数据库中,我必须编写两个查询以确保它不在其中。 这两个问题是: 以确

  • 主要内容:JSON 概述,JSON 数据转换,示例 我们知道,Spring MVC 在传递数据时,通常都需要对数据的类型和格式进行转换。而这些数据不仅可以常见的 String 类型,还可以是 JSON 等其他类型。 JSON 是近些年一种比较流行的数据格式,它与 XML 相似,也是用来存储数据的。但相较于 XML,JSON 数据占用的空间更小,解析速度更快。因此,使用 JSON 数据进行前后台的数据交互也是一种十分常见的手段。 本节将针对 Spri

  • 本文向大家介绍详解vue与后端数据交互(ajax):vue-resource,包括了详解vue与后端数据交互(ajax):vue-resource的使用技巧和注意事项,需要的朋友参考一下 本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。 必须引入一个库:vue-resource 1.获取普通文本数据 比

  • 问题内容: 有多少个数据库系统使用JSON进行存储或传输?我知道: CouchDB MongoDB DBSlayer 我记得我在SO用户的个人资料中看到了另一个供应商。该系统使用的是所谓的二进制JSON,但我不记得该产品的名称。 最近,似乎越来越多的DB项目正在将JSON用于持久性存储。其中一些甚至将HTTP用作传输层。 问题答案: MongoDb是使用二进制JSON存储格式的一种。我不知道是否还

  • 英文原文:http://emberjs.com/guides/cookbook/user_interface_and_interaction/ 下面是一些可以帮助提供更好用户体验的技巧: 为组件添加CSS类 通过属性为组件添加CSS类 实现将焦点放置在添加的文本框 使用Moment.js显示格式化日期 指定模板中无需更新的数据驱动区域 使用模态对话框 路由改变时重置滚动条