17370845950

新闻动态
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." }, 
 { "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>()</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.", 
 "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." }

    这一点也容易理解，与这条 JavaScript 语句等价：

    name = ""
    url = "www."

    JSON 数组

    JSON 数组在中括号中书写：

    数组可包含多个对象：

    {
    "sites": [
    { "name":"" , "url":"www." },
    { "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。

    广照天下广告 广照天下广告 广照天下广告策划 广照天下广告策划 广照天下 广照天下 广照天下 广照天下 广照天下 广照天下 广照天下广告策划 广照天下广告策划 广照天下广告策划 广照天下广告策划 南昌市广照天下广告策划有限公司 南昌市广照天下广告策划有限公司 南昌市广照天下广告策划有限公司 南昌市广照天下广告策划有限公司

    赣ICP备2024031479号