JavaScript之Ajax-Json

一、简介:Json是JavaScript中读取结构化数据更好的方式。因为Json数据可以直接传给eval(),而且不必创建DOM对象。Json是一种数据格式,不是一种编程语言,虽然具有相同的语法形式,带Json并不从属于JavaScript.而且,并不是只有JavaScript才使用Json,毕竟Json只是一种数据格式。很多编程语言都有针对Json的解析器和序列化器。

二、语法

Json的语法可以表示一下三种类型的值

1、简单值:使用与JavaScript相同的语法,可以在Json中表示字符串、数值、布尔值和null。注意:Json不支持JavaSciprt中的特殊值:undefined。

2、对象:对象作为一种复杂的数据类型,表示的是一组无序的键值对儿。而每个键值对中的值可以是简单值,也可以是复杂数据类型的值。

3、数组:数组也是一种复杂的数据类型,表示一组有序的值的列表,可以通过数值索引来访问其中的值。数组的值也可以是简单值、对象、数组。

2.1 简单值

简单值在Json中的表示可以是字符串、数值、布尔值和null!

注意:上面这些数据都和JavaScript中一样,只有字符串,在Js中字符串可以用单引号表示,但是在Json中字符串使用单引号会报错!

2.2 对象

Js中的对象,代码如下:

var person={
  name:"张三",
  age:23
};

var person={
  "name":"张三",
  "age":23
};

在JS中上面两种方法都可以表示对象,但是在Json中没有变量的概念。其次,没有末尾的分号(因为这不是JavaScipt语句,所以也不需要分号),

所以在Json的对象中,对象的属性必须是字符串(也就是说要加双引号),属性的值可以是简单值,数组,对象,所以在Json中的对象表现形式如下:

{
"name":"张三",
"age":23
}

注意:对象的属性名必须加双引号!

三、Json的解析与序列化

JSON之所以流行,拥有与JavaScript类似的语法并不是全部的原因,更重要的原因是,可以把Json数据结构解析为有用的JavaScipt对象。与XML数据解析成DOM文档而且从中提取数据麻烦相比,JSON可以解析为JavaScript对象的优势十分明显!代码如下:

[
{"title":"book_one",
  "year":"2016"
},
{"title":"book_two",
  "year":"2015"
},
{"title":"book_three",
  "year":"2015"
},
]

下面需要取得第三本书的名字,通过Json转换为JavaScript对象的方式获取

books[2].title

通过XML解析成DOM元素,在获取:

document.getElementsByTagName("book")[2].getAttribute("title");

比较两种方法,就知道Json为什么会得到JavaSciprt开发人员的欢迎了!

时间: 2024-10-29 10:57:18

JavaScript之Ajax-Json的相关文章

Jsp&JavaScript &jQuery &Ajax&Json

jsp 用于页面的展示 javaScript 用于浏览器中的动态脚本语言,可以实现网页上的一些高级功能, 对页面进行渲染,实现一些逻辑 --数据验证处理, 页面动态效果,定时任务,跟用户交互,发送/接收服务端数据,,, JQuery 轻量级的js工具类,对js进行了封装,Query提供了一系列的Ajax函数,使得js和ajax使用更加方便 Ajax 一种基于js等的异步通讯技术,实现页面局部更新(客户端和服务器交换数据是局部的,而不是刷新整个页面),常用于前后台数据交互,提高了数据更新的速度,.

【JavaScript.6】阶段概念总结之HTML+CSS+JavaScript+xml+xpath+Json+Ajax

[前言] 最近学习了很多BS的新东西,有很多新名称,概念多了,理解也少了,很多东西都混乱.今天静下来把学到的几 个概念性东西总结一下.本文多是一些概念性的个人理解,希望同样存在疑惑的小伙伴看完后能够如入桃源般地豁然 开朗.当然如果我的理解有偏差,请指出来,共同进步. 关于BS的学习,相信很多人都已经走过了,当初最开始接触的是牛腩,里面用到了很多BS的知识,包括HTML. CSS.JavaScript和Ajax等.对于有基础或者正处于迷惑之间的人来说,接下来的话可能会很有感触. [HTML] 首先

032.Ajax+Json+Jquery

AjjA: AjaxJ: JSONJ: jQuery -----------------------------------------------JSONJavascript Object NotationJS对象标记 class User{ public int Id{get;set;} public string Name{get;set;} public string Phone{get;set;} // public string HomeAddress{get;set;} // pu

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

struts2 + ajax + json的结合使用,实例讲解

struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4.2.min.js ②struts2与json的依赖包:struts2-json-plugin-2.2.3.jar PS:版本可自己控制!~ 2.过程 ①引入json依赖包 ②编写action类 ③配置struts.xml ④编写页面 ⑤测试 3.实例 ① action类,JsonAction  注

Javascript与Ajax

不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数据给它.服务端返回的数据格式多样,即可以是字符串,也可以是数字,也可以是对象.客户端接到这些数据后按自己的需要处理后显示在Html页面上.这个处理工作就交给Javascript来做.  Javascript处理Ajax异步请求要注意三点: 1.创建一个新的XMLHttpRequest对象; 2.创建

JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对此,给出代码示例,通过网络爬虫技术,将上传到HDFS的新浪网新闻信息实现热词统计功能,通过图表的柱状图来显示出来. ------> 目录: 1.JFreeChart可视化处理(生成本地图片) [1]HDFS文件读取 [2]JDFreeChart库应用 2.AJAX+JSON+EChart生成可视化图

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面 开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

echarts3+ajax+json+SpringMVC+mybatis

最近使用的东西有点多,就不分开描述了,写在一起,也比较连贯 最近在写统计查询,所以用到了echarts3,用了几个小时看了下,还是不错的,主要准备好字符串,直接嵌入就可以 下面我描述下需求,这样在看代码还能有一些针对性 需求:实现对访问记录的统计,每天一个访问记录表,需要根据时间段进行查询(这里面就设计到联调查询),同时,在页面点击某一天的数据时,需要显示这一天每个时段的访问人数(这里面就有点意思了,用到了ajax+json) 好,先附一张截图 这就是最后显示的样子,下面来点实惠的,上代码~ 我

JavaScript和ajax 跨域的案例

今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <tit