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

赞 (0)

相关推荐

  • 实现JavaScript高性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中对象的集合.这个集合被称为作用域链. 3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象). 所以多次调用同一个函数会导致创建多个执行环境. 4.函数执行过程 每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据.该过程搜索执行环境的作用域链.正是这种搜索过程影响了性能. 5

  • JavaScript数据存储 Cookie篇

    1.什么是cookie?     答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分?     ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的.     ②值:储存在cookie 中的字符串值.值必须被URL 编码.     ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.

  • js 数据存储和DOM编程

    数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • javascript 数据存储的常用函数总结

    数据存储的常用函数 存入数组不重复值 function pushtoArray(myarr,mydata){ if(myarr.length==0){ myarr.push(mydata); }else{ var oktopush=true; for(var ele in myarr){ if(myarr[ele]==mydata){ oktopush=false; } } if(oktopush){ myarr.push(mydata); } } return myarr; } 删除数组中的元

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

    数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易.JavaScript提供了各种不同的数据存储方式,它是一个从基本到未来走向的演化模式: XML代表可扩展标记语言,是一种比较灵活的数据格式,很多应用程序存储数据都喜欢用到它,结构像HTML,也包含元素,标签以及属性,模型都一样.它的一大优势在于它是一种可扩展的格式,你

  • 解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/sysMenu/listSysMenu', autoParam: ["id=parentId"] } SpringMvc中文字符处理: Java代码 <mvc:annotation-driven> <mvc

  • Ajax异步请求JSon数据(图文详解)

    Ajax异步请求JSon数据(图文详解)

    上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图

  • php基于jquery的ajax技术传递json数据简单实例

    本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

  • jQuery通过ajax方法获取json数据不执行success的原因及解决方法

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法: 1)键名称:用双引号括起: 2)字符串:用双引号括起: 3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success执行error语句 执

  • AJAX如何接收JSON数据示例介绍

    简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 复制代码 代码如下: var object = { "labId": "1", "labName": "服装" }; 通常我们使用如上的方式来表示JSON对象,那么数组呢 复制代码 代码如下: var array = [{ "labId": "1", &

  • Ajax responseText解析json数据案例详解

    解决ajax处理服务器端返回结果responseText中是JSON的数据. 第一,json格式的文件内容如下: { "city":"ShangHai", "telephone":"123456789" } 第二,服务器端返回的json数据就是上述的内容在responseText中,现在要取出来,方法有两种: 方法1: var json=JSON.parse(request.responseText); alert(json.

  • jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

  • 详谈 Jquery Ajax异步处理Json数据.

    详谈 Jquery Ajax异步处理Json数据.

    所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml

  • jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

    jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

    本文实例讲述了jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

随机推荐