Json和Ajax的简单理解

1 JSON

1.1 认识JSON

JSON全称JavaScript Object Notation，即JavaScript对象标记法。JSON是一种轻量级、基于文本、可读的格式。虽然全称中带有JavaScript，但只是说明其语法规则是参考JavaScript的，而不是说只能用于JavaScript。JSON格式具有长时间的稳定性，不存在任何兼容性问题，并且与XML比较，JSON文件更小、读写更快。

1.2 JSON作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

1.3 JSON的语法规则

• 数组（Array）用中括号（“[ ]”）表示。
• 对象（Object）用大括号（“{ }”）表示。
• 名称/值对（name/value）组合成数组和对象。
• 名称（name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
• 并列的数据之间用英文逗号（“,”）分隔。
• 严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号；

<script>
var obj2={};//这只是JS对象
var obj3={width:100,height:200};/*这跟JSON就更不沾边了,只是JS的 对象 */
var obj4={'width':100,'height':200};/*这跟JSON就更不沾边了,只是JS的对象 */
var obj5={"width":100,"height":200,"name":"rose"}; /*我们可以把这个称做：JSON格式的JavaScript对象 */
var str1='{"width":100,"height":200,"name":"rose"}';/*我们可以把这个称做：JSON格式的字符串 */
 
var a=[
                {"width":100,"height":200,"name":"rose"},
                {"width":100,"height":200,"name":"rose"},
                {"width":100,"height":200,"name":"rose"},
        ];
        /*这个叫JSON格式的数组，是JSON的稍复杂一点的形式 */
var str2='['+
                '{"width":100,"height":200,"name":"rose"},'+
                '{"width":100,"height":200,"name":"rose"},'+
                '{"width":100,"height":200,"name":"rose"},'+
        ']' ;
        /* 这个叫稍复杂一点的JSON格式的字符串 */ 
</script>

1.4 JSON和XML

JSON的功能与XML相类似，所以常被拿来与XML做比较，因为JSON的出现就是为了能够取代XML。既然想取代XML，那JSON相对于XML有哪些优势呢？

• 没有结束标签，长度更短，读写更快。
• 能够直接被JavaScript解释器解析。
• 可以使用数组。
  下面感受一下两者语法区别
• JSON：

{
	"id":1,
	"name":"zl",
	"address":["ChengDu","GuangZhou","BeiJing"]
}

• XML：

<root>
	<id>1</>
	<name>zl</name>
	<address>ChengDu</address>
	<address>ChengDu</address>
	<address>ChengDu</address>
</root>

1.5 JSON和JS对象互换

要实现JSON和JS对象的互换，即对JSON的解析和生成，而在JavaScript中，有两个方法可以完成对JSON的解析和生成，一个是JSON.parse()，一个是JSON.stringify()。

• JSON字符串转为JS对象，使用JSON.parse()方法。

<script>
	var str = '{"id":1,"name":"zl"}';
	var obj = JSON.parse(str);
	console.log(obj);
</script>

• JS对象转换为JSON字符串，使用JSON.stringify()方法。

<script>
	var str = '{"id":1,"name":"zl"}';
	var obj = JSON.parse(str);//字符串转JS对象
	console.log(obj);

	var jsobj = JSON.stringify(obj);
	console.log(jsobj);
</script>

2 Ajax

2.1 初识Ajax

ajax全称Asynchronous Javascript And XML（异步的JavaScript和XML )。Ajax并不是一种新的编程语言，而是多种技术的综合应用，是前后台交互的能力，即客户端给服务端发送消息的工具以及接受响应的工具。Ajax可以在不重新加载整个页面的情况下，实现局部刷新网页的功能。Ajax分为同步（async=false）和异步（async=true）的执行机制，默认是异步的。

2.2 Ajax的优势

• 不需要插件的支持，原生js就可以使用。
• 用户体验感好（不需要重新加载整个页面就可以局部更新数据）。
• 能够减轻服务端和带宽的负担。

2.3 Ajax的格式

七个参数：

$.ajax({
	type:  //要使用的请求方式
	url:  //要使用的请求路径 
	contentType: //要传递的数据类型
	data:  //要拼接的数据
	dataType:  //数据类型
	success: function(data){ //成功时的方案 
		
	},
	error: function(data){ //失败时的方案
		
	}
})

2.4 Ajax的操作流程

流程解释：

• 首先通过PHP页面将数据库中的数据取出。
• 取出后转成JSON格式的字符串，然后利用Ajax把字符串返回给前台。
• 再利用JSON.parse()解析通过循环添加到页面上。
• 同理可得，前端的数据可以利用Ajax提交到后台。
• 但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上。
• 最后再由PHP将数据插入到数据库中。