一、JSON
定义:
JSON(JavaScript Object Notation, JS对象标记)是一种轻量级的数据交换格式。
它基于 ECMAScript(w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON称为理想的数据交换语言。易于阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
json类型:
数字类型,字符串类型,布尔类型,数组类型,对象类型,null
JS中的JSON用法
stringfy和parse方法
JSON.parse(); ???//用于将一个JSON字符串转换为JavaScript对象JSON.stringfy(); ???//用于将JavaScript值转换为JSON字符串
和XML的比较
JSON格式与2001年由Douglas Crockford提出,目的就是取代繁琐笨重的XML格式。
符合JavaScript原声语法,可以又解释器引擎直接处理,不用另外添加解释代码。所以,JSON迅速被接收,已经成为各大网站交换数据个标准格式,并被写入ECMAScript5,成为标准的一部分。
XML和JSON都使用结构化方法来标记数据。
用XML表示中国部分省市数据如下:
1 <?xml version="1.0" encoding="utf-8"?> 2 <country> 3 ????<name>中国</name> 4 ????<province> 5 ????????<name>黑龙江</name> 6 ????????<cities> 7 ????????????<city>哈尔滨</city> 8 ????????????<city>大庆</city> 9 ????????</cities>10 ????</province>11 ????<province>12 ????????<name>广东</name>13 ????????<cities>14 ????????????<city>广州</city>15 ????????????<city>深圳</city>16 ????????????<city>珠海</city>17 ????????</cities>18 ????</province>19 ????<province>20 ????????<name>台湾</name>21 ????????<cities>22 ????????????<city>台北</city>23 ????????????<city>高雄</city>24 ????????</cities>25 ????</province>26 ????<province>27 ????????<name>新疆</name>28 ????????<cities>29 ????????????<city>乌鲁木齐</city>30 ????????</cities>31 ????</province>32 </country>
用JSON表示如下:
1 { 2 ????"name": "中国", 3 ????"province": [{ 4 ????????"name": "黑龙江", 5 ????????"cities": { 6 ????????????"city": ["哈尔滨", "大庆"] 7 ????????} 8 ????}, { 9 ????????"name": "广东",10 ????????"cities": {11 ????????????"city": ["广州", "深圳", "珠海"]12 ????????}13 ????}, {14 ????????"name": "台湾",15 ????????"cities": {16 ????????????"city": ["台北", "高雄"]17 ????????}18 ????}, {19 ????????"name": "新疆",20 ????????"cities": {21 ????????????"city": ["乌鲁木齐"]22 ????????}23 ????}]24 }
可以看到,JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读,并且在数据交换方面,由于JSON所使用的字符要比XML少得多,可以大大节约传输数据所占用的带宽。
二、Ajax简介
AJAX(Asynchronous Javascript And XML),异步Javascript和XML。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
AJAX出了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
JS实现的局部刷新:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ? 7 ????<style> 8 ????????.error{ 9 ????????????color:red10 ????????}11 ????</style>12 </head>13 <body>14 ?15 ?16 <form class="Form">17 ?18 ????<p>姓名 <input class="v1" type="text" name="username" mark="用户名"></p>19 ????<p>密码 <input class="v1" type="text" name="email" mark="邮箱"></p>20 ????<p><input type="submit" value="submit"></p>21 ?22 </form>23 ?24 <script src="jquery-3.1.1.js"></script>25 ?26 <script>27 ????$(".Form :submit").click(function(){28 ????????flag = true;29 ????????$("Form .v1").each(function(){30 ????????????var value = $(this).val();31 ????????????if(value.tirm().length==0{32 ???????????????????var mark = $(this).attr("mark");33 ???????????????????var $span = $("<span>");34 ???????????????????$span.html(mark+"不能为空!");35 ???????????????????$span.prpo("class", "error");36 ????????????????????$(this).after($span);37 ????????????38 ????????????????????setTimeout(function(){39 ????????????????????????$span.remove();40 ????????????????????}, 800);41 ????????????????????flag = false;42 ????????????????????return flag;43 ???????????????}44 ????????});45 ????????return falg46 ????});47 ????</script>48 ????</body>49 </html>
AJAX的优势
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无需刷新整个页面
- 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高
jQuery实现的ajax
$.ajax参数
请求参数
************ data ************data: 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端;此外,ajax默认以get方式发送请求。function testData(){ ???$.ajax("/test/",{ ???????data:{ ???????// 此时的data是一个json形式的对象 ???????????a:1, ???????????b:2 ???}}); ?//?a=1&b=2?************ processData ************processData:声明当前的data数据是否进行转码或预处理,默认为true,即预处理;如果为false;那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString(),最后得到一个[object, object]形式的结果。?************ contentType ************contentType: 默认值:“application/x-www-form-urlencoded".发送信息至服务器时内容编码类型。 ???????????用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据,比如contentType:“application/json",即向服务器发送一个json字符串。 ???????????比如contentType:"application/sjon",即向服务器发送一个json字符串: ???????????$.ajax("‘ajax_get",{ ???????????data: JSON.stringfy({ ???????????????a:22, ???????????????b:33 ???????????????}), ???????????????contentType:"application/json", ???????????????type:"POST", ???????????}); ???????????注意:contentType:“appliation/json"一旦设定,data必须是json字符串,不能是json对象************ traditional ************traditional: 一般是我们的data数据又数组时会用到: data:{a:22, b:33, c:["x", "y"]}, ???????????????traditional为false会对数据进行深层次迭代。
响应参数
1 /* 2 dataType: 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换;比如我们的服务器响应的content Type为json格式,这时ajax方法就会对响应的内容进行一个json格式的转换,如果转换成功,我们在success的回调函数里就会得到一个json格式的对象,转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用data type。3 dataType的可用值:html|xml|json|text|script4 */
jQuery AJAX基础
原文地址:http://www.cnblogs.com/eric_yi/p/7831483.html