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将数据插入到数据库中。