JSON 教程 json入门学习笔记

目录
  • 什么是 JSON ?
    • 与 XML 相同之处
    • 与 XML 不同之处
    • 为什么使用 JSON?
  • JSON 语法
    • JSON 语法规则
    • JSON 名称/值对
    • JSON 值
    • JSON 数字
    • JSON 对象
    • JSON 数组
    • JSON 布尔值
    • JSON null
    • JSON 使用 JavaScript 语法
    • JSON 文件
  • JSON vs XML

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快,更易解析。

JSON 实例

{
 "sites": [
 { "name":"我们" , "url":"www.jb51.net" },
 { "name":"google" , "url":"www.google.com" },
 { "name":"微博" , "url":"www.weibo.com" }
 ]
}

这个 sites 对象是包含 3 个站点记录(对象)的数组。

什么是 JSON ?

JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
JSON 具有自我描述性,更易理解
JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

在线实例

通过我们的编辑器,您可以在线编辑 JavaScript 代码,然后通过点击一个按钮来查看结果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我们(jb51.net)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br />
网站地址: <span id="jurl"></span><br />
网站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= {
 "name":"我们",
 "url":"www.jb51.net",
 "slogan":"学的不仅是技术,更是梦想!"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
</body>
</html>

与 XML 相同之处

JSON 是纯文本
JSON 具有"自我描述性"(人类可读)
JSON 具有层级结构(值中存在值)
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

为什么使用 JSON?

对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

使用 XML
读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
使用 JSON
读取 JSON 字符串
用 eval() 处理 JSON 字符串

JSON 语法

JSON 语法是 JavaScript 语法的子集。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON 名称/值对

JSON 数据的书写格式是:名称/值对。

名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:

"name" : "我们"

这很容易理解,等价于这条 JavaScript 语句:

name = "我们"

JSON 值

JSON 值可以是:

数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在中括号中)
对象(在大括号中)
null

JSON 数字

JSON 数字可以是整型或者浮点型:

{ "age":30 }

JSON 对象

JSON 对象在大括号({})中书写:

对象可以包含多个名称/值对:

{ "name":"我们" , "url":"www.jb51.net" }

这一点也容易理解,与这条 JavaScript 语句等价:

name = "我们"
url = "www.jb51.net"

JSON 数组

JSON 数组在中括号中书写:

数组可包含多个对象:

{
"sites": [
{ "name":"我们" , "url":"www.jb51.net" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}

在上面的例子中,对象 "sites" 是包含三个对象的数组。每个对象代表一条关于某个网站(name、url)的记录。

JSON 布尔值

JSON 布尔值可以是 true 或者 false:

{ "flag":true }

JSON null

JSON 可以设置 null 值:

{ "jb51":null }

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

var sites = [
    { "name":"jb51" , "url":"www.jb51.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
];

可以像这样访问 JavaScript 对象数组中的第一项(索引从 0 开始):

sites[0].name;

返回的内容是:

jb51

可以像这样修改数据:

sites[0].name="我们";

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我们(jb51.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>第一个网站名称: <span id="name1"></span></p>
<p>第一个网站修改后的名称: <span id="name2"></span></p> 

<script>
var sites = [
	{ "name":"jb51" , "url":"www.jb51.com" },
	{ "name":"google" , "url":"www.google.com" },
	{ "name":"微博" , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
// 修改网站名称
sites[0].name="我们";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

</body>
</html>

在下面的章节,您将学到如何把 JSON 文本转换为 JavaScript 对象。

JSON 文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

JSON vs XML

JSON 和 XML 都用于接收 web 服务端的数据。

JSON 和 XML在写法上有所不同,如下所示:

JSON 实例

{
    "sites": [
    { "name":"我们" , "url":"www.jb51.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

XML 实例

<sites>
 <site>
  <name>我们</name> <url>www.jb51.com</url>
 </site>
 <site>
  <name>google</name> <url>www.google.com</url>
 </site>
 <site>
  <name>微博</name> <url>www.weibo.com</url>
 </site>
</sites>

JSON 与 XML 的相同之处:

JSON 和 XML 数据都是 "自我描述" ,都易于理解。
JSON 和 XML 数据都是有层次的结构
JSON 和 XML 数据可以被大多数编程语言使用
JSON 与 XML 的不同之处:
JSON 不需要结束标签
JSON 更加简短
JSON 读写速度更快
JSON 可以使用数组
最大的不同是:XML 需要使用 XML 解析器来解析,JSON 可以使用标准的 JavaScript 函数来解析。

JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。

为什么 JSON 比 XML 更好?

XML 比 JSON 更难解析。

JSON 可以直接使用现有的 JavaScript 对象解析。

针对 AJAX 应用,JSON 比 XML 数据加载更快,而且更简单:

使用 XML

获取 XML 文档
使用 XML DOM 迭代循环文档
接数据解析出来复制给变量

使用 JSON

获取 JSON 字符串
JSON.Parse 解析 JSON 字符串

Json介绍:

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。
      json 官方网站 http://www.json.org/
      json.net 下载地址 http://json.codeplex.com/releases/view/37810

Demo:

  

描述:

点击获取按钮后,将请求页面,获取json数据,填充到表格

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/jscript" src="../jquery/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.get("json1.aspx?m=m", null, function(callbackmsg) {
var product = eval(callbackmsg);
ShowProduct(product)
})
});
})
function ShowProduct(callbackmsg) {
var row='';
for (var u in callbackmsg) {
var len = callbackmsg[u].length;
row += '<tr>';
row += '<td>' + callbackmsg[u].Name + '</td>';
row += '<td>' + callbackmsg[u].Price + '</a></td>';
row += '<td>' + callbackmsg[u].Size + '</td>';
row += '</tr>';
}
$("#body").html(row);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="获取" />
</div>
<table>
<thead>
<tr>
<th>
名称
</th>
<th>
价格
</th>
<th>
大小
</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
</form>
</body>
</html> 

后台代码:

public partial class json1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (HttpContext.Current.Request.QueryString["m"] != null)
{
List<Product> Products = new List<Product>();
Products.Add(new Product() { Name = "笔记本", Price = "4.2", Size = "30x50" });
Products.Add(new Product() { Name = "尺子", Price = "1.2", Size = "30x50" });
Products.Add(new Product() { Name = "书", Price = "36", Size = "30x50" });
Products.Add(new Product() { Name = "钢笔", Price = "6.0", Size = "30x50" });
Products.Add(new Product() { Name = "铅笔", Price = "2.2", Size = "30x50" });
string json = JsonConvert.SerializeObject(Products);
Response.Write(json);
Response.End();
}
}
}
public class Product
{
public string Name { get; set; }
public string Size { get; set; }
public string Price { get; set; }
} 

知识点:

  1.json官方提供了用于.net操作的dll类库,JsonConvert.SerializeObject将.net对象序列化为json。
  2.Javascript读取json对象var product = eval(callbackmsg)。
  3.Javascript读取json值callbackmsg[u].Name。

(0)

相关推荐

  • 10分钟学会js处理json的常用方法

    一.json定义 JSON ( JavaScript Object Notation) ,它是一串字符串 只不过元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "" 双引号内是属性或值 : 冒号表示后者是前者的值(这个值可以是字符串.数字.也可以是另一个数组或对象) JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中.数据由逗号分隔.花括号保存对象.方括号保存数组 JSON 值可以是:数字(整数或浮点数).字符串(在双引号中).逻

  • Java使用JSON传递字符串注意事项解析

    一.问题由来 项目开发中,由于实际需要将某一个功能模块抽取成了一个单独的服务,其他地方需要调用的时候,通过Spring提供的RestTemplate类发送请求进行调用. 经过测试这种方法完全可行,我和同事都能够正常使用,可是有一次调用一个方法时始终出现问题.调用方的参数可以正常传递,可是被调用方却使用匹 配不上,寻找了很久都没找到原因. 二.问题分析 问题主要在传递的invoType参数上,在被调用方一直匹配不上,两边都是使用switch语句进行匹配,数据类型为String类型,调用方的swit

  • JSON stringify方法原理及实例解析

    JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串. 语法 JSON.stringify(value[, replacer[, space]]) 参数说明: value: 必需, 要转换的 JavaScript 值(通常为对象或数组). replacer: 可选.用于转换结果的函数或数组. 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值.使用返回值而不是原始值.如果此函数返回 undefined,

  • Python解析json文件相关知识学习

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等).这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 今天用pytho

  • JSON 入门教程基础篇 json入门学习笔记

    JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. JSON 实例 { "sites": [ { "name":"我们" , "url":"www.jb51.net" }, { "name":"google" , &qu

  • JSON学习笔记第1/2页

    利用xmlHttpRequest组件作为交互工具,利用XML作为数据传输的格式. [  XML ] 使用XML作为传输格式的优势: 1. 格式统一, 符合标准 2. 容易与其他系统进行远程交互, 数据共享比较方便 缺点: 1. XML文件格式文件庞大, 格式复杂, 传输占用带宽 2. 服务器端和客户端都需要花费大量代码来解析XML, 不论服务器端和客户端代码变的异常复杂和不容易维护 3. 客户端不同浏览器之间解析XML的方式不一致, 需要重复编写很多代码 4. 服务器端和客户端解析XML花费资源

  • Java解析JSON数据时报错问题解决方案

    一.问题由来 测试人员最近在测试时,后台日志一直抱错,大致意思是JSON数据解析错误,错误信息如下: 二.问题分析 去查看代码时,发现异常信息是这里抛出来的,解析时使用的是json-lib这个包中的方法: 然后进一步排查错误,将里面的测试数据复制出来查看能否正常解析,如下: 结果还是不行,进一步排查发现问题,去掉最后一个解析的字段remarks后,解析正常: 由此找到问题的原因,是由于JSON数据中包含回车符\n,数据如下: 三.解决方案 原因找到后,就很好对症下药,针对上面的问题,在解析JSO

  • Ajax与JSON的一些学习总结

    1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式可以是XML或JSON等格式. XMLHttpRequest对象用于在后台与服务器交换数据,具体作用如下: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 1.1.2 正文 XMLHttp

  • javascript学习之json入门

    1. 什么是JSON JSON---Javascript Object Notation,前两个单词大家应该都认识,最后一个notation,是"记号.标记法"的意思,连在一起,便成了JSON. 它是一种轻量级的数据交换格式,是基于Javascript的一个子集,可以叫做Javascript对象表示法,是存储和交换文本信息的语法,但它并不是Javascript独有的数据格式,其它很多语言都可以对JSON进行解析和序列化. 2. JSON的由来 在21世纪初,Douglas Crockf

  • javascript解析json格式的数据方法详解

    JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧. 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包.那么如何用JavaScript来解析json呢? 首先,科普一下json.在json中,有两种结构:对象和数组. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"

  • 10分钟掌握XML、JSON及其解析

    引言 NOKIA 有句著名的广告语:"科技以人为本".任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的技术也是浩如烟海,是几千年来人类科技的结晶,单个人穷其一生也未必能掌握其一角.不过个人一直认为基本的技术和思想是放之四海而皆准的,许多技术未必需要我们从头到尾再研究一遍,我们要做的就是站在巨人的肩膀上,利用其成果来为人们的需求服务. 随着移动互联网时代的大潮,越来越多的App不光是需要和网络服务器进行数据传输和交互,也需要和其他 App 进行数据传递.承担

随机推荐