1 ## 今日内容
2 1. AJAX：
3 2. JSON
4
5
6
7
8
9 # AJAX：
10 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
11 1. 异步和同步：客户端和服务器端相互通信的基础上
12 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
13 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
14
15 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]
16 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
17 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
18
19 提升用户的体验
20
21 2. 实现方式：
22 1. 原生的JS实现方式（了解）
23 //1.创建核心对象
24 var xmlhttp;
25 if (window.XMLHttpRequest)
26 {// code for IE7+, Firefox, Chrome, Opera, Safari
27 xmlhttp=new XMLHttpRequest();
28 }
29 else
30 {// code for IE6, IE5
31 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
32 }
33
34 //2. 建立连接
35 /*
36 参数：
37 1. 请求方式：GET、POST
38 * get方式，请求参数在URL后边拼接。send方法为空参
39 * post方式，请求参数在send方法中定义
40 2. 请求的URL：
41 3. 同步或异步请求：true（异步）或 false（同步）
42
43 */
44 xmlhttp.open("GET","ajaxServlet?username=tom",true);
45
46 //3.发送请求
47 xmlhttp.send();
48
49 //4.接受并处理来自服务器的响应结果
50 //获取方式 ：xmlhttp.responseText
51 //什么时候获取？当服务器响应成功后再获取
52
53 //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
54 xmlhttp.onreadystatechange=function()
55 {
56 //判断readyState就绪状态是否为4，判断status响应状态码是否为200
57 if (xmlhttp.readyState==4 && xmlhttp.status==200)
58 {
59 //获取服务器的响应结果
60 var responseText = xmlhttp.responseText;
61 alert(responseText);
62 }
63 }
64 2. JQeury实现方式
65 1. $.ajax()
66 * 语法：$.ajax({键值对});
67 //使用$.ajax()发送异步请求
68 $.ajax({
69 url:"ajaxServlet1111" , // 请求路径
70 type:"POST" , //请求方式
71 //data: "username=jack&age=23",//请求参数
72 data:{"username":"jack","age":23},
73 success:function (data) {
74 alert(data);
75 },//响应成功后的回调函数
76 error:function () {
77 alert("出错啦...")
78 },//表示如果请求响应出现错误，会执行的回调函数
79
80 dataType:"text"//设置接受到的响应数据的格式
81 });
82 2. $.get()：发送get请求
83 * 语法：$.get(url, [data], [callback], [type])
84 * 参数：
85 * url：请求路径
86 * data：请求参数
87 * callback：回调函数
88 * type：响应结果的类型
89
90 3. $.post()：发送post请求
91 * 语法：$.post(url, [data], [callback], [type])
92 * 参数：
93 * url：请求路径
94 * data：请求参数
95 * callback：回调函数
96 * type：响应结果的类型
97
98
99
100 # JSON：
101 1. 概念： JavaScript Object Notation JavaScript对象表示法
102 Person p = new Person();
103 p.setName("张三");
104 p.setAge(23);
105 p.setGender("男");
106
107 var p = {"name":"张三","age":23,"gender":"男"};
108
109 * json现在多用于存储和交换文本信息的语法
110 * 进行数据的传输
111 * JSON 比 XML 更小、更快，更易解析。
112
113 2. 语法：
114 1. 基本规则
115 * 数据在名称/值对中：json数据是由键值对构成的
116 * 键用引号(单双都行)引起来，也可以不使用引号
117 * 值得取值类型：
118 1. 数字（整数或浮点数）
119 2. 字符串（在双引号中）
120 3. 逻辑值（true 或 false）
121 4. 数组（在方括号中） {"persons":[{},{}]}
122 5. 对象（在花括号中） {"address":{"province"："陕西"....}}
123 6. null
124 * 数据由逗号分隔：多个键值对由逗号分隔
125 * 花括号保存对象：使用{}定义json 格式
126 * 方括号保存数组：[]
127 2. 获取数据:
128 1. json对象.键名
129 2. json对象["键名"]
130 3. 数组对象[索引]
131 4. 遍历
132 //1.定义基本格式
133 var person = {"name": "张三", age: 23, 'gender': true};
134
135 var ps = [{"name": "张三", "age": 23, "gender": true},
136 {"name": "李四", "age": 24, "gender": true},
137 {"name": "王五", "age": 25, "gender": false}];
138
139
140
141
142 //获取person对象中所有的键和值
143 //for in 循环
144 /* for(var key in person){
145 //这样的方式获取不行。因为相当于 person."name"
146 //alert(key + ":" + person.key);
147 alert(key+":"+person[key]);
148 }*/
149
150 //获取ps中的所有值
151 for (var i = 0; i < ps.length; i++) {
152 var p = ps[i];
153 for(var key in p){
154 alert(key+":"+p[key]);
155 }
156 }
157
158
159 3. JSON数据和Java对象的相互转换
160
161 * JSON解析器：
162 * 常见的解析器：Jsonlib，Gson，fastjson，jackson
163
164 1. JSON转为Java对象
165 1. 导入jackson的相关jar包
166 2. 创建Jackson核心对象 ObjectMapper
167 3. 调用ObjectMapper的相关方法进行转换
168 1. readValue(json字符串数据,Class)
169 2. Java对象转换JSON
170 1. 使用步骤：
171 1. 导入jackson的相关jar包
172 2. 创建Jackson核心对象 ObjectMapper
173 3. 调用ObjectMapper的相关方法进行转换
174 1. 转换方法：
175 * writeValue(参数1，obj):
176 参数1：
177 File：将obj对象转换为JSON字符串，并保存到指定的文件中
178 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
179 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
180 * writeValueAsString(obj):将对象转为json字符串
181
182 2. 注解：
183 1. @JsonIgnore：排除属性。
184 2. @JsonFormat：属性值得格式化
185 * @JsonFormat(pattern = "yyyy-MM-dd")
186
187 3. 复杂java对象转换
188 1. List：数组
189 2. Map：对象格式一致
190
191
192 # 案例：
193 * 校验用户名是否存在
194 1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
195 1. $.get(type):将最后一个参数type指定为"json"
196 2. 在服务器端设置MIME类型
197 response.setContentType("application/json;charset=utf-8");
